Integrating the TailorTalk Widget

Follow these steps to add the TailorTalk Widget to your website and customize its appearance and behavior.

Step 1: Navigate to Website Integration

1. Go to the Agent Page in your TailorTalk dashboard.
2. Click on the Add Channels integration option.
3. Select Website Channel.

Step 2: Customize and Test

Please enter your preferred settings and information in the widget configuration form and test the widget within it.

Widget Parameters

TailorTalk uses a configuration object with both top-level parameters and a nested options object for detailed customization.

Top-level Parameters

Parameter	Type	Default	Description	Required
widgetName	string	(to be filled)	Internal name or window title of the widget.	Yes
agentId	string	(to be filled)	Your unique Agent ID.	Yes
color	string	'#6366f1'	Widget primary color (hex code).	Yes
position	string	'right'	Horizontal position of the widget ('left' or 'right').	Yes
options	object	{}	Nested object for UI/UX customizations (see below).	No

Options Parameters (passed inside the options object)

Parameter	Type	Default	Description
buttonIcon	string	'bot'	Icon displayed on the widget button.
buttonText	string	'Let's Chat'	Text displayed on the widget button.
welcomeMessage	string	(default message)	Initial greeting shown to users when they open the chat.
popupMessage	string	(empty)	Short teaser message shown in a bubble before the widget opens.
quickQuestions	string[]	[]	List of up to 3 short questions (max 55 chars each) for quick interactions.
askDetails	boolean	false	Toggle to collect user name and phone before chat.
defaultCountryCode	string	'IN'	Default country code for phone number input (ISO 3166-1 alpha-2).
sideButton	boolean	false	Show a vertical side button instead of a bubble (Mobile only).

Step 3: Save & Generate Code

1. Click Generate Code.
2. Choose your Integration method (e.g., HTML, React, etc.).
3. Copy the generated code snippet.

Step 4: Add the Widget Code to Your Website

Choose your integration method and add the code as follows:

• HTML Website:
  Paste the code just before the closing </body> tag in your main HTML file (e.g., index.html).

• React Application:
  Place the code inside a useLayoutEffect (or useEffect) in your main component (e.g., App.js).
  You can also create a dedicated component for the widget.

• Next.js Application:
  Use the code in your main layout or page file.
  Make sure to import next/script as Script.

Example Integration Code

Choose your integration method and use the corresponding code snippet below.
Replace the values as needed for your configuration.

HTML Website

<script>
  (function() {
    function loadTailorTalkWidget(callback) {
      var script = document.createElement('script');
      script.src = "https://plugins.tailortalk.ai/widget.js";
      script.onload = callback;
      document.head.appendChild(script);
    }

    loadTailorTalkWidget(function() {
      TailorTalk.init({
        widgetName: "YOUR_WIDGET_NAME",
        agentId: "YOUR_AGENT_ID",
        color: "#6366f1",
        position: "right",
        options: {
          buttonText: "Let's Chat",
          welcomeMessage: "Hello! How can I assist you today?",
          quickQuestions: ["How can you help?", "Tell me more about..."], // Optional
          sideButton: true // Mobile only feature
        }
      });
    });
  })();
</script>

---

React Application

import React from "react";

React.useLayoutEffect(() => {
  if (!document.getElementById("tailortalk-widget-script")) {
    const script = document.createElement("script");
    script.id = "tailortalk-widget-script";
    script.src = "https://plugins.tailortalk.ai/widget.js";
    script.async = true;
    document.body.appendChild(script);

    script.onload = () => {
      window.TailorTalk && window.TailorTalk.init({
        widgetName: "YOUR_WIDGET_NAME",
        agentId: "YOUR_AGENT_ID",
        color: "#6366f1",
        position: "right",
        options: {
          buttonText: "Let's Chat",
          welcomeMessage: "Hello! How can I assist you today?",
          quickQuestions: ["How can you help?", "Tell me more about..."], // Optional
          sideButton: true // Mobile only feature
        }
      });
    };
  }

  return () => {
    const container = document.querySelector(".tt-widget-container");
    if (container) container.remove();
  };
}, []);

---

Next.js Application

import Script from "next/script";

<>
  <Script src="https://plugins.tailortalk.ai/widget.js" strategy="afterInteractive" />
  <Script id="tailortalk-init" strategy="afterInteractive">{`
    function initTailorTalkWidget() {
      if (window.TailorTalk && window.TailorTalk.init) {
        window.TailorTalk.init({
          widgetName: "YOUR_WIDGET_NAME",
          agentId: "YOUR_AGENT_ID",
          color: "#6366f1",
          position: "right",
          options: {
            buttonText: "Let's Chat",
            welcomeMessage: "Hello! How can I assist you today?",
            quickQuestions: ["How can you help?", "Tell me more about..."], // Optional
            sideButton: true // Mobile only feature
          }
        });
      } else {
        setTimeout(initTailorTalkWidget, 100);
      }
    }
    initTailorTalkWidget();
  `}</Script>
</>

Tip:

• For all methods, replace the sample values with your actual configuration.
• If you use another framework, ensure the script loads after the DOM is ready and the widget is initialized as shown.

Confirmation

Once integrated, your TailorTalk widget will appear on your website, ready to assist your visitors.

By following these steps, you can easily integrate and customize the TailorTalk Widget to match your website's style and user experience.