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. See Agent Settings API Key to get your API key

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://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"
/>

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 Agent settingsdata-key="123456"
data-mode (Optional)Server to use dev or proddata-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://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>
    <ai12z-knowledge-box
      data-key="5b9acefd6a5b1629dc17dd71cf9c5e75ff0d0dffebb5c6cbe60e982dab730502"
      data-mode="dev"
      relevance-score="false"
    ></ai12z-knowledge-box>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        function selectQuery() {
          const knowledgeBox = document.querySelector("ai12z-knowledge-box")
          knowledgeBox.setAttribute("question", "what is a Agent")
        }
        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>