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.

Certainly! Here's a clearer and more professional version of the searchText URL parameter description:

🔗 searchText URL Parameter​

You can pre-fill the search input and trigger the component’s behavior by including the searchText parameter in the URL. For example:

https://yourdomain.com/search?searchText=who%20is%20ai12z

  • If load-results="true" is set, the component will immediately treat the searchText as a question to the AI assistant, and display a direct answer.

  • If load-results="false" is set, the component will behave as if the user is typing a search query. It will display a list of matching results with titles and links, but will not provide an answer until the user clicks the Ask AI button.

Let me know if you'd like to integrate this into your documentation.

💻 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