Comprehensive Guide for Customizing Your Webchat

Introduction

Chatbot BuilderWebchat allows you to easily integrate a chatbot on your website without needing third-party platforms. This guide will help you set up and customize your webchat, including changing the chat bubble icon and controlling its size, with easy-to-follow steps for non-coders and beginners.

Embedding the Webchat Code into Your Website

Steps to Embed Webchat

1. Navigate to Settings (Inside Your CBB Account)
   Go to Settings > Channels > Web Chatbot > Manage inside your CBB account.

2. Add Authorized Websites (Inside the Manage Webchat Section)
   Inside the Manage Webchat section, add your website domain or subdomain to the authorized websites list. The chatbot will only load on these authorized sites.

3. Get the Webchat Code (Inside the Manage Webchat Section)
   After creating and saving your Webchat inside your CBB account, click the three dots in the Manage Webchat section to get the code.

4. Insert the Code into Your Website
   Warning: Always ensure that both IDs (YOUR-WEBCHAT-ID and YOUR-ACCOUNT-ID) provided in the Webchat section are included in the script.

   Example code to insert:

   <script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=5"></script>   <script>   ktt10.setup({   id: "YOUR-WEBCHAT-ID",  // Webchat ID   accountId: "YOUR-ACCOUNT-ID",  // Account ID   color: "#36D6B5"   });   </script>

   This code will embed the webchat on your website, ensuring proper functionality with both required IDs.

Webchat Customization Table

Follow the instructions below to insert the necessary CSS or scripts into the designated areas of your Webchat Editor in CBB for customizing your chatbot interface.

Switching Webchat Templates (Inside the Webchat Editor in Your CBB Account)

Warning: Insert the following code into the designated script area inside your Webchat Editor.

<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script> <script> ktt10.setup({ pageId: "YOUR-ACCOUNT-ID", color: "#007BFF", hideHeader: true, template: "template1" }); </script>

Displaying the Account Profile Picture as a Persona (Inside the Webchat Editor in Your CBB Account)

Warning: Insert the following code into the designated script area inside your Webchat Editor.

<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script> <script> ktt10.setup({ pageId: "YOUR-ACCOUNT-ID", showPersona: true }); </script>

Modifying the Chat Icon (Inside the Webchat Editor in Your CBB Account)

Warning: Insert the following code into the designated script area inside your Webchat Editor.

<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script>   <script>   ktt10.setup({   pageId: "YOUR-ACCOUNT-ID",   icon: "YOUR_IMAGE_URL" }); </script>

Replace "YOUR_IMAGE_URL" with the URL of your desired image.

Open the Webchat after a Defined Time (timeout):

Simply substitute YOUR_WEBCHAT_ID with your unique webchat ID, and YOUR_ACCOUNT_ID with your account ID. This ensures that your webchat will automatically open after 3 seconds, using the correct identifiers for seamless integration.

Example code:

<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script> <script> ktt10.setup({ id: "YOUR_WEBCHAT_ID",  // This is your webchat ID accountId: "YOUR_ACCOUNT_ID",  // This is your account ID color: "#36D6B5" }); setTimeout(function() { ktt10Btn.click(); }, 3000);  // Automatically open after 3 seconds </script>

Free Templates:

Access a collection of free templates here.