Skip to main content

Search Results Page

🧩 Overview​

The ai12z search result component provides both search suggestions and the ability to interact with an AI assistant in a conversational format.

📖 How to use​

  1. Implement the Component
    You can use the <search-results-page> tag to include the search result component in your HTML.
PropertyTypeRequiredDescription
data-keystring✔️API key from your ai12z project settings
data-modestring✔️Server to use dev or prod or local
placeholderstring❌Allow us to customize the placeholder text in the searchbar
load-resultsboolean❌When load-results="true" → the component will fetch and display search suggestions.When load-results="false" → the component will start a conversation with the AI, treating the input as a message to the assistant rather than a keyword search.

💻 Example Code​

<html>
  <head>
    <script
      type="module"
      src="https://cdn.ai12z.net/pkg/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.ai12z.net/pkg/ai12z@latest/dist/library/library.css"
    />
  </head>
  <body>
    <div>
      <search-results-page
        data-key="your_api_key_here"
        data-mode=""
        placeholder="AI search"
        load-results="false"
      ></search-results-page>
    </div>
    <!-- Style customization example, place after the `ai12z-cta tag to overide the style -->
    <style>
      ai12z-search-panel {
        --ai12z-search-page-bgcolor: #f3f4f6;
        --ai12z-search-page-button-bgcolor: #007bff;
      }
    </style>
  </body>
</html>

🎨 Custom CSS Properties​

PropertyDescriptionDefault
--ai12z-search-page-bgcolorDefines the background color of the AI search result container. This property allows customization of the panel’s visual appearance to match your app’s theme or design system.#f3f4f6;
--ai12z-search-page-button-bgcolorSpecifies the background color of buttons inside the AI search panel (e.g., submit or voice input buttons). Customize this to match your brand or theme.#007bff