Skip to main content

Knowledge Box Component

Overview​

The AI12Z Knowledge Box is a web component that functions like Google's Knowledge Panel, offering AI-generated content alongside search results on your website. This feature is designed to provide users with relevant and detailed information that enhances the search experience.

Setup​

To integrate the Knowledge Box into your site, include the following script tag 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"
/>

You can then use the <ai12z-knowledge-box> tag anywhere in your HTML to display the Knowledge Box.

Attributes and Customization​

<ai12z-knowledge-box
  data-key="<API_KEY>"
  relevance-score="false"
></ai12z-knowledge-box>

Attributes and Customization​

PropertyDescriptionExampleDefault
data-key (Required)API key from your ai12z project settingsdata-key="123456"
data-mode (Optional)Server to use dev or prod or localdata-mode="dev"prod
question (Optional)Sets a pre-loaded question when the component loads Onloadquestion="what does ai12z do"
relavanceScore (Optional)View relavance ScorerelavanceScore="true"false
feedback (Optional)Enables thumbs up or down feedbackfeedback="true"true

Example with Styling​

<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>
    <ai12z-knowledge-box
      data-key="5b9acefd6a5b1629dc17dd71cf9c5e75ff0d0dffebb5c6cbe60e982dab730502"
      data-mode="dev"
      relevance-score="false"
    ></ai12z-knowledge-box>
    <style>
      ai12z-knowledge-box {
        --ai12z-knowledge-box-bg-color: rgb(241 245 249);
        --ai12z-knowledge-box-button-bgcolor: #007bff;
        --ai12z-knowledge-box-button-color: #fff;
        --ai12z-knowledge-box-privacy-color: #64748b;
        --ai12z-knowledge-box-privacy-font-size: 0.875rem;
        --ai12z-knowledge-box-font-size: 1rem;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        function selectQuery() {
          const knowledgeBox = document.querySelector("ai12z-knowledge-box")
          knowledgeBox.setAttribute("question", "what is a copilot")
        }
        selectQuery()
      })
    </script>
  </body>
</html>

This setup allows for easy deployment and customization, ensuring that the Knowledge Box seamlessly integrates into your website's design and functionality.

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

<ai12z-knowledge-box 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-knowledge-box>

Custom CSS Properties​

PropertyDescriptionDefault
--ai12z-knowledge-box-bg-colorCustomize the background color of the knowledge box--ai12z-knowledge-box-bg-color: rgb(241 245 249);
--ai12z-knowledge-box-button-bgcolorCustomize the button color which shows in the results--ai12z-knowledge-box-button-bgcolor: #007bff;
--ai12z-knowledge-box-button-colorCustomize the font color of the button which shows in the results--ai12z-knowledge-box-button-color: #fff;
--ai12z-knowledge-box-privacy-colorCustomize the font color of the privacy text--ai12z-knowledge-box-privacy-color: #64748b;
--ai12z-knowledge-box-privacy-font-sizeCustomize the font size of the privacy text--ai12z-knowledge-box-privacy-font-size: 0.875rem;
--ai12z-knowledge-box-font-sizeCustomize the font size which displayed in the results--ai12z-knowledge-box-font-size:1rem;