react-library

TODO: description

Usage

const reactLibrary = require('react-library');

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>

Setup

To install from npm

npm install @ai12z/react

Getting Started

• Include this below command to use the control.

import { Ai12zCta, Ai12zKnowledgeBox } from '@ai12z/react'

• Then you can use the element anywhere in your template.
• The control named as Ai12zCta 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.

<Ai12zCta>
  <privacy></privacy>
  <cta></cta>
</Ai12zCta>

• (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.

| Property | Description | Example | | ------------------------ | :-----------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------: | | dataKey (Required) | API key from your ai12z project settings | dataKey="123456" | | dataMode (Required) | Allows us to enter the data-mode which will identify the server as local or dev or prod | dataMode="dev" | | heading (Optional) | Allows us to show the header text | heading="Search Here 1" | | buttonText (Optional) | Allows us to customize the button name | buttonText="Ask me" | | helpText (Optional) | Allows us to customize the helper text | helpText="Type your question here..." | | noResultsText (Optional) | allows us to customize the no results found text | noResultsText="No results found..." | | autoSearch (Optional) | allows us to configure the search option | autoSearch="true" | | placeholder (Optional) | allows us to customize the placeholder text | placeholder="Enter the text" | | iconSrc (Optional) | allows us to add the icon to the search button along with the text or icon only | icon-src= "https://uxwing.com/wp-content/themes/uxwing/download/user-interface/magnifying-glass-icon.png?w=24&h=24" | | categorize (Optional) | allows us to customize the search results based on the category. By default the search results will be catogorized. | categorize = "true" | | clearMemory (Optional) | allows us to clear the previously searched data. By defualt, this property is set to true | clearMemory={true} | | imageUpload (Optional) | allows us to perform a image based search.By default, this property is set to true | imageUpload={true} |

• The second control named as Ai12zKnowledgeBox allows us to send the query programmmatically through javascript and rendering the query results by clicking on a button.

| Property | Description | Example | | ------------------------- | :--------------------------------------------------------------------------------------------------------: | ----------------------------: | | dataKey (Required) | API key from your ai12z project settings | dataKey="123456" | | dataMode (Required) | Allows us to enter the data-mode which will identify the server as local or dev or prod | dataMode="dev" | | question (Required) | Allows us to set the question for on-load | question="what does ai12z do" | | relavanceScore (Optional) | allows us to view the score of clicks, engagement, conversions and negative reviews. | relavanceScore="true" | | feedback (Optional) | allows us to add the thumbs up and down option for the questions. By default, this property is set to true | feedback="true" | | clearMemory (Optional) | allows us to clear the previously searched data. By defualt, this property is set to true | clearMemory="true" |