ai12z Web Components

ai12z is a library of web components to integrate ai12z platform to you website / web app.

Setup

To install from npm:

npm install ai12z@latest --save
npm install ai12z-cta --save
npm install ai12z-knowledge-box  --save

Getting Started

HTML

• Put a script tag similar to this <script type='module' src='https://unpkg.com/ai12z@latest/dist/esm/library.js'></script> in the head of your index.html
• Then you can use the element anywhere in your html
• The tag named as ai12z-cta allows us to show the search results along with the follow up chat conversations and customize our search results.
• This control is having two tag element which is mentioned below.

<<ai12z-cta>
  <privacy slot="custom-privacy"></privacy>
  <cta slot="cta"></cta>
</<ai12z-cta>

• (Optional) This tag element allows us to add the privacy policy links.
• (Optional) This tag element allows us to customize our page by adding our own tag elements within this element.

The control contains following properties to customize the page.

• data-key (Required) api key from your ai12z project settings.
• data-mode (Required) Allows us to enter the data-mode which will identify the server as local or dev or prod.
• heading (Optional) allows us to show the header text.
• button-text (Optional) allows us to customize the button name.
• help-text (Optional) allows us to customize the helper text.
• no-results-text (Optional) allows us to customize the no results found text.
• auto-search (Optional) allows us to configure the search option.
• placeholder (Optional) allows us to customize the placeholder text.
• icon-src (Optional) allows us to add the icon to the search button.
• categorize (Optional) allows us to customize the search results based on the category. By default the search results will be catogorized.
• clear-memory (Optional) allows us to clear the previously searched data. By defualt, this property is set to true.
• image-upload (Optional) allows us to perform a image based search.By default, this property is set to true.

• The second control named as ai12z-knowledge-box allows us to send the query programmmatically through javascript and rendering the query results by clicking on the button.

The control contains following properties to customize the page.

• data-key (Required) api key from your ai12z project settings.
• data-mode (Required) Allows us to enter the data-mode which will identify the server as local or dev or prod.
• question (Optional) allows us to set the question for on-load.
• relavance-score (Optional) allows us to view the score of clicks, engagement, conversions and negative reviews.
• feedback (Optional) allows us to add the thumbs up and down option for the question. By default this property set to true.

Usage

We are providing the option named as dataAttributes for assigning the JSON object programmatically and sending those object to the API payload for furthur use.

<script>
  const ele = document.querySelector('ai12z-cta');
  ele.dataAttributes = {
    content: {
      newlist: [
        {
          _uid: "BUY6Drn9e1",
          component: "foo",
          headline: "Foo"
        },
        {
          _uid: "gJZoSLkfZV",
          component: "bar",
          title: "Bar"
        },
        {
          _uid: "X1JAfdsZxy",
          component: "foo",
          headline: "Another headline"
        }
      ]
    }
};
</script>

Events

<script>
  // Reference to your component
  const ele = document.querySelector("ai12z-cta")

  // onErrored
  ele.addEventListener("errored", (event) => {
    console.error("Error:", event.detail)
  })

  // onButtonClicked
  ele.addEventListener("buttonClicked", (event) => {
    console.log("Button clicked:", event.detail)
  })

  // onMessageSent
  ele.addEventListener("messageSent", (event) => {
    console.log("Sent message:", event.detail)
  })

  // onMessageReceived
  ele.addEventListener("messageReceived", (event) => {
    console.log("Received message:", event.detail)
  })

  // onOpen
  ele.addEventListener("open", () => {
    console.log("Component opened")
  })

  // onClose
  ele.addEventListener("close", () => {
    console.log("Component closed")
  })
</script>