Search/Ask AI Web Component

Overview

The AI12Z Search/Ask web component allows seamless integration of AI-powered search capabilities into your HTML pages. This component is loaded from a Content Delivery Network (CDN) and can be customized through a variety of properties.

The Search Web component, that loads from the CDN using the ai12z search web component

How to Use

Add the Required Script
Insert the following script and stylesheet in the head section of your HTML:

<script
  type="module"
  src="https://unpkg.com/ai12z@latest/dist/esm/library.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/ai12z@latest/dist/library/library.css"
/>

Implement the Component
You can use the <ai12z-cta> tag to include the search component in your HTML. This tag supports customization through several attributes and slots.

Example Code

<html>
  <head>
    <script
      type="module"
      src="https://unpkg.com/ai12z@latest/dist/esm/library.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/ai12z@latest/dist/library/library.css"
    />
  </head>
  <body>
    <div>
      <ai12z-cta data-key="your_api_key_here"></ai12z-cta>
    </div>
    <!-- Style customization example, place after the `ai12z-cta tag to overide the style -->
    <style>
      ai12z-cta {
        --ai12z-primary-color: rgb(165 180 252);
        --ai12z-secondary-color: #64748b;
        --ai12z-font-size: 16px;

        --ai12z-heading-color: rgb(51 65 85);
        --ai12z-heading-font-size: 1.2rem;

        --ai12z-input-placeholder-color: rgb(148 163 184);
        --ai12z-input-placeholder-font-size: 1.1rem;

        --ai12z-followup-color: rgb(107 114 128);
        --ai12z-followup-font-size: 1rem;
        --ai12z-followup-bg-color: rgb(30 64 175);

        --ai12z-category-font-color: #2a2727;
        --ai12z-category-font-size: medium;

        --ai12z-search-result-title-color: #111827;
        --ai12z-search-result-title-font-size: 0.875rem;

        --ai12z-search-result-description-color: rgb(107 114 128);
        --ai12z-search-result-description-font-size: 0.75rem;

        --ai12z-bubble-background: rgb(241 245 249);
        --ai12z-bubble-font-color: rgb(15 23 42);
        --ai12z-bubble-font-size: 1.1rem;

        --ai12z-button-font-color: rgb(51 65 85);
        --ai12z-button-font-size: 1rem;

        --ai12z-font-color: rgb(51 65 85);
        --ai12z-font-mute: #64748b;
        --ai12z-border-color: rgba(59, 130, 246, 0.5);
        --ai12z-hover-button-color: rgb(165 180 252);
        --ai12z-hover-bg-color: rgb(249 250 251);

        --ai12z-feedback-selected: rgb(55 65 81);
        --ai12z-feedback-color: rgb(107 114 128);

        --ai12z-dialog-margin: 3rem 0 0 0;
      }
    </style>
  </body>
</html>

Customization Options

The control contains following properties to customize the page.

Property	Description	Example	Default
data-key (Required)	API key from your ai12z project settings	data-key="123456"
data-mode (Optional)	Server to use `dev` or `prod` or `local`	data-mode="prod"	`prod`
heading (Optional)	Text displayed above the control.	heading="Search Here 1"	empty
button-text (Optional)	Custom text for the button.	button-text="Ask me"	`Ask AI`
help-text (Optional)	Helper text displayed in the search input.	help-text="Type your question here..."	`Enter text to get started`
no-results-text(Optional)	allows us to customize the no results found text	no-results-text="No results found..."	`No results found...`
auto-search (Optional)	If true, returns search results as you type.	auto-search="true"	`true`
placeholder (Optional)	allows us to customize the placeholder text	placeholder="Enter your question "	empty
categorize (Optional)	If true, output will be organized by category if categories are set up.	`true	`true`
follow-up-label (Optional)	Label for follow-up questions	follow-up-label="Another question "	`Do you have a follow up question?`
clear-memory (Optional)	If true, clears the search history upon closing the dialog	clear-memory="true"	`true`
image-upload (Optional)	Enable upload icon	image-upload="true"	`true`
enable-mobile-view (Optional)	If true, on mobile view, it occupies entire width of the screen	`true`	enable-mobile-view="false"

Privacy Link (Optional)

To include a privacy policy link, use the <privacy> tag with a custom slot within the <ai12z-cta> element:

<ai12z-cta data-key="your_api_key_here">
    <div slot="custom-privacy">Privacy Statement
      <a href="https://ai12z.com/privacy-policy/" target="_blank">Click to view</a
    </div>
</ai12z-cta>

CTA (Optional)

If cta tag exists the standard search control will be replaced with the html in the cta tag

<ai12z-cta data-key="your_api_key_here" heading="">
  <div slot="cta">
    <img
      style="width: 20px; cursor: pointer"
      src="https://demo.ai12z.com/wp-content/uploads/2024/08/magnifying-glass-solid.svg"
      alt="Search"
    />
  </div>
</ai12z-cta>

Custom CSS Properties

Property	Description	Default
--ai12z-primary-color	Primary Font color	--ai12z-primary-color: rgb(165 180 252);
--ai12z-secondary-color	Secondary Font color	--ai12z-secondary-color: #64748b;
--ai12z-font-size	Primary Font size	--ai12z-font-size:16px;
--ai12z-font-mute	Font color of the custom message forexample: There is no results.	--ai12z-font-mute: #64748b;
--ai12z-heading-color	Customize the heading color like search here	--ai12z-heading-color: #64748b;
--ai12z-heading-font-size	Customize the heading font size	--ai12z-heading-font-size:1rem;
--ai12z-input-placeholder-color	Customize the placeholder test color of the input field	--ai12z-input-placeholder-color: rgb(148 163 184);
--ai12z-input-placeholder-font-size	Customize the font size of the placeholder text in the input field	--ai12z-input-placeholder-font-size:1.1rem;
--ai12z-followup-color	Customize the followup label text color	--ai12z-followup-color:rgb(107 114 128);
--ai12z-followup-font-size	Customize the font size of the followup text	--ai12z-followup-font-size: 1rem;
--ai12z-followup-bg-color	Customize the bg color of the followup checkbox color	--ai12z-followup-bg-color:rgb(30 64 175);
--ai12z-border-color	Border color of the input field	--ai12z-border-color: rgba(59, 130, 246, 0.5);
--ai12z-hover-button-color	Color of the button when hover	--ai12z-hover-button-color:rgb(165 180 252);
--ai12z-hover-bg-color	Color of the list of Search History when hover	--ai12z-hover-bg-color: rgb(249 250 251);
--ai12z-bubble-background	Background color of the bubble chat	--ai12z-bubble-background:rgb(241 245 249);
--ai12z-feedback-selected	Color of the thumbs when selected	--ai12z-feedback-selected: rgb(55 65 81);
--ai12z-feedback-color	Color of the thumbs up and down	--ai12z-feedback-color: rgb(107 114 128);
--ai12z-font-description	Font color of the description on the auto search results	--ai12z-font-description:rgb(107 114 128);
--ai12z-font-search-text	Font color of the title on the auto search results	--ai12z-font-search-text : #111827;
--ai12z-dialog-margin	Position of the modal content	--ai12z-dialog-margin:3rem 0 0 0;
--ai12z-category-font-color	Customize the color of the category text	--ai12z-category-font-color: #2a2727;
--ai12z-category-font-size	Customize the size of the category text	--ai12z-category-font-size: medium;
--ai12z-search-result-title-color	Customize the color of the title which shows in the search results	--ai12z-search-result-title-color: #111827;
--ai12z-search-result-title-font-size	Customize the size of the title which shows in the search results	--ai12z-search-result-title-font-size: 0.875rem;
--ai12z-search-result-description-color	Customize the color of the description text which shows in the search results	--ai12z-search-result-description-color: rgb(107 114 128);
--ai12z-search-result-description-font-size	Customize the size of the description text which shows in the search results	--ai12z-search-result-description-font-size: 0.75rem;
--ai12z-bubble-font-color	customize the color of the bubble text	--ai12z-bubble-font-color: rgb(15 23 42);
--ai12z-bubble-font-size	Customize the size of the bubble text	--ai12z-bubble-font-size: 1.1rem;
--ai12z-button-font-color	Customize the button font color Example: ASK AI	--ai12z-button-font-color: rgb(51 65 85);
--ai12z-button-font-size	Customize the button font size	--ai12z-button-font-size: 1rem;

Overview​

How to Use​

Example Code​

Customization Options​

Privacy Link (Optional)​

CTA (Optional)​

Custom CSS Properties​