@ai12z/react

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"

---