Skip to main content

Search Panel

🧩 Overview​

The ai12z Search Panel allows seamless integration of AI-powered search capabilities which will show the suggestions with concise information.

📖 How to use​

  1. Implement the Component
    You can use the <ai12z-search-panel> tag to include the search panel component in your HTML. This tag supports customization through several attributes.
PropertyTypeRequiredDescription
data-keystring✔️API key from your ai12z project settings
data-modestring✔️Server to use dev or prod or local
redirect-urlstring✔️The URL to redirect the user to after a search is submitted.
placeholderstring❌Allow us to customize the placeholder text in the searchbar

💻 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 class="search-panel">
      <ai12z-search-panel
        data-key="your_api_key_here"
        data-mode=""
        placeholder="AI search"
        redirect-url="/searchpage"
      ></ai12z-search-panel>
    </div>
    <!-- Style customization example, place after the `ai12z-cta tag to overide the style -->
    <style>
      .search-panel {
        width: 50%;
        top: 1rem;
        position: fixed;
        right: 1rem;
      }

      ai12z-search-panel {
        --ai12z-search-panel-bg: #f3f4f6;
        --ai12z-search-panel-icon-color: #fff;
        --ai12z-search-panel-focus-color: rgb(59 130 246);
        --ai12z-search-panel-input-border-color: gray;
        --ai12z-search-panel-button-bgcolor: #007bff;
      }
    </style>
  </body>
</html>

🎨 Custom CSS Properties​

PropertyDescriptionDefault
--ai12z-search-panel-bgDefines the background color of the AI search panel container. This property allows customization of the panel’s visual appearance to match your app’s theme or design system.#f3f4f6;
--ai12z-search-panel-icon-colorDefines the color of icons within the AI search panel (e.g., search, close, voice icons). Use this to ensure icons match your app's theme or maintain visual consistency.#fff
--ai12z-search-panel-focus-colorSpecifies the focus ring or border color applied to interactive elements (like input fields or buttons) when they are focused inside the AI search panel. This enhances accessibility and visual feedback during user interaction.rgb(59 130 246);
--ai12z-search-panel-input-border-colorDefines the border color of the search input field inside the AI search panel. Use this to customize the input’s appearance and ensure it matches your design system.gray
--ai12z-search-panel-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