What is Chat?

Chat offers a search feature where users can ask questions and receive answers through a chat interface, typically powered by artificial intelligence (AI) and natural language processing (NLP) technologies. Chat-based search can be implemented on various platforms, including mobile apps, web browsers, and messaging apps. With chat-based search, users can ask questions in a conversational style, using natural language. The AI-powered system then analyzes the question, understands the context and intent, and generates a response with a list of products that best suit the user's query in a human-like manner. The system can also learn from the user's behavior and preferences and improve its responses over time.

How can chat search be triggered?

Zevi provides two options to trigger chat:

1. By clicking on the chat icon
2. Using a custom HTML selector

What is an HTML selector?

An HTML selector is a string of characters used to identify and target specific HTML elements on a webpage. Selectors are used in conjunction with CSS to style and format webpages, and they can be based on a variety of attributes, such as class, ID, or element type. The most commonly used HTML selector is the class selector, which targets all elements with a specific class attribute. Selectors play a crucial role in web development, allowing developers to create engaging and dynamic webpages.

How do you get an HTML selector?

To get an HTML selector, you need to identify the HTML element that you want to target on a webpage. You can do this by using your web browser's "Inspect" tool, which allows you to view the website's HTML and CSS code. Once you've identified the element you want to target, you can use the appropriate selector syntax to select it. For example, to target all elements with a specific class, you can use a class selector with a period (.) followed by the class name (e.g., ".example-class"). Similarly, to target a specific element type, you can use an element selector (e.g., "p" for paragraphs or "h1" for headings). With the appropriate selector, you can modify the HTML and CSS code to customize the appearance and behavior of the website. Click here to learn more.

Chat API

Below is the explanation and examples of usage for Chat Search offered by Zevi.ai

Sample Request :

curl --request GET 'https://api.zevi.ai/2023-01/chat?q=ghee&session_id=chat_session_identifier&store=63b5a4f23d3d68e12be783d9'
-H 'X-Zevi-Org-Id: 63b5a4f23d3d68e12be783d9' \
-H 'X-Zevi-Api-Key: 9a940c8f-4609-4fa8-acab-5f4d55facfef' \
-H 'Content-Type: application/json'

Sample Response :

{
  "products": [
    {
      "product_id": "11441",
      "title": "Velvet Matte Lipstick - Ruby Red",
      "description": "Make a bold statement with our Velvet Matte Lipstick in the shade Ruby Red. This highly pigmented lipstick glides on smoothly, leaving a rich and velvety finish. The vibrant red color adds a touch of elegance to your look, perfect for both daytime and evening wear.",
      "category1": "Cosmetics",
      "category2": "Beauty",
      "subcategory": "Lipstick",
      "handle": "velvet-matte-lipstick-ruby-red",
      "store_id": 999,
      "store_name": "Revlon"
    },
    {
      "product_id": "25522",
      "title": "Moisturizing Lipstick - Pink Peony",
      "description": "Achieve luscious and hydrated lips with our Moisturizing Lipstick in the shade Pink Peony. This lipstick provides a creamy and moisturizing formula that keeps your lips soft and supple. The beautiful pink hue adds a touch of femininity and complements a wide range of skin tones.",
      "category1": "Cosmetics",
      "category2": "Beauty",
      "subcategory": "Lipstick",
      "handle": "moisturizing-lipstick-pink-peony",
      "store_id": 999,
      "store_name": "Revlon"
    },
    ...,
        ...
  ],
  "sentences": [
    "Get ready to make a statement with our stunning lipsticks! Here are some products for you:",
    "Our top pick for you is the \"Comfy Matte Liquid Lipstick\" - available in various shades, it offers a long-lasting, comfortable matte finish that you'll absolutely love!"
    ]
}

Chat UI Integration

Copy the code snippet to integrate chatbot on your website

<script type="text/javascript">
  (function (z, e, v, i, c, h, a, t) {
    z[v] =
      z[v] ||
      function () {
        (z[v].q = z[v].q || []).push(arguments);
      };
    h = 'https://static.zevi.ai/scripts/chat-overlay.js';
    t = e.createElement(i);
    t.async = 1;
    t.src = h + '?store=' + c;
    t.id = v + '-chat-' + i;
    y = e.getElementsByTagName(i)[0];
    y.parentNode.insertBefore(t, y);
  })(window, document, 'zevi', 'script', '${organizationId}');
</script>