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

Parameter	Type	Default	Description	Required
widgetName	string	(to be filled)	Name of the widget.	Yes
websiteUrl	string	(to be filled)	The website where the widget will be used.	Yes
color	string	'#6366f1'	Widget primary color (hex code).	Yes
position	string	'bottom-right'	Position of the widget on the screen.	Yes
buttonText	string	'Let's Chat'	Text displayed on the widget button.	No
welcomeMessage	string	(default message)	Welcome message shown to users.	No

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?"
        }
      });
    });
  })();
</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?"
        }
      });
    };
  }

  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?"
          }
        });
      } 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.