Integrating Chatbot Builder AI’s Webchat with Your Website

One of the key advantages of Chatbot Builder AI’s Webchat is its independent operation, meaning there's no need to connect it to platforms like Facebook, Telegram, WhatsApp, or Google. 

This allows customers to start interacting with your chatbot immediately, without creating new accounts or dealing with extra steps. Additionally, you can easily follow up with customers via SMS or email using the contact information collected through Webchat, making it simple to maintain communication, offer support, and strengthen customer relationships.

1 – Navigate to Settings > Channels > Web Chatbot > Manage

To ensure the security and proper functionality of your chatbot, you need to add your website domain or subdomain to the list of Authorized Websites. 

This step is crucial because the chatbot will only load and operate on the websites that you have explicitly authorized. By doing this, you prevent unauthorized use of your chatbot on other domains and maintain control over where your chatbot is accessible. 

This added layer of security ensures that your chatbot engages only with users on the websites you designate, protecting your brand and providing a consistent user experience.

After you've created and saved your Webchat, you'll need to get the code to embed it on your website. To do this, navigate to Settings > Channels > Webchat where you'll see a list of your saved webchats. 

Find the Webchat you just created, and click on the three dots (more options menu) next to it. You'll see the following options:

• Get Code
• Get Link
• Duplicate
• Rename
• Copy to another account
• Delete

To proceed, select Get Code. 

This will generate the specific script you need to embed the Webchat on your site. Copy this code and follow the provided instructions to integrate the Webchat into your website or set it up as a standalone page. This ensures that your Webchat is ready for customer interactions.

Embedding the Webchat Code in Your Website

To integrate the webchat directly into your website, you'll need to add a small code snippet to your site’s body or footer section. This will allow visitors to interact with your chatbot seamlessly as they browse your pages.

Step-by-Step Integration:

1. Locate the body or footer section of your website’s HTML. This is where the code will be placed to ensure the webchat is loaded on every page.

2. Copy and insert the following code into your website’s body or footer:

<script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=5"></script>

<script>

    ktt10.setup({

        id: "YOUR-ID-HERE",        // Replace "YOUR-ID-HERE" with your specific plugin ID

        accountId: "YOUR-ID-HERE", // Replace "YOUR-ID-HERE" with your actual account ID

        color: "YOUR-COLOR-HERE"   // Replace "YOUR-COLOR-HERE" with the hex code of your desired webchat color

    });

</script>

3. Replace the placeholder values with your specific details:

• "YOUR-ID-HERE" in the id field should be replaced with the unique plugin ID provided to you. This ID identifies the specific instance of your webchat.
• "YOUR-ID-HERE" in the accountId field should be replaced with your actual account ID, which links the webchat to your account.
• "YOUR-COLOR-HERE" should be replaced with the hex code of the color you want to use for your webchat. This will customize the appearance of the chat interface to match your branding.

4. Save and upload the changes to your website. This simple step will embed the webchat, making it accessible to all your website visitors.

By following these steps, you’ll ensure that your webchat is fully integrated into your site, seamlessly blending with your website’s design and functionality. Chatbot Builder AI's Webchat will provide a consistent and engaging experience for your users, making it easier for them to interact with your chatbot and get the support they need directly from any page on your site.

Setting Up Webchat as a Standalone Page

If you prefer to have the webchat accessible on its own dedicated page, you can easily set it up as a standalone interface. This is ideal for offering users a focused, full-screen chat experience.

Navigate to the following URL, replacing "YOUR_ACCOUNT_ID" with your actual account ID:

https://app.chatgptbuilder.io/webchat/?p=YOUR_ACCOUNT_ID

By using this URL, you’ll create a separate page where users can interact with your chatbot independently of your main website content. This setup is perfect for keeping chat interactions distinct and easily accessible.

General Webchat Settings 

Webchat Position Settings

Webchat Behavior Settings

Advanced Webchat Actions

Webchat Chat Bubble Icon Customization

Routing Conversations from Any Channel to Webchat

Some communication channels don’t offer the advanced features and flexibility that Chatbot Builder AI's webchat provides. For example, if a customer is communicating with your business through SMS and you want to display a gallery of your services, you can transition the conversation to webchat. This allows you to use the full range of features available in webchat for a more interactive and engaging experience.

To make this transition, simply send the customer a message that includes the following system custom field: `{{webchat}}`. This will direct the customer to your webchat.

If you want the customer to automatically start a specific flow or step when they open the webchat, you can add a reference ID to the link. To do this, append `&ref=FLOW_OR_STEP_ID` to the end of the webchat link.

For example, if you want the customer to automatically trigger a specific flow when they open the webchat, you can do so by appending the flow ID to the link. Let’s say the flow ID you want to trigger is `111111`. In this case, the link you would send to the customer would look like this:

`{{webchat}}&ref=111111`

When the customer clicks on this link, they will be directed to the webchat, where the conversation will start with the flow you specified. Additionally, the webchat will load the previous conversation history between the customer and the bot, allowing them to pick up right where they left off. This can be especially useful if the customer has interacted with the bot before and you want to maintain continuity in the conversation.

However, there may be situations where you prefer to start a fresh conversation without loading any past messages. In such cases, you can disable the loading of previous messages by adding `&lc=0` to the end of the link. 

For instance, using the same flow ID, the link would be:

`{{webchat}}&ref=111111&lc=0`

With this link, when the customer clicks on it, they will be taken to the webchat where the specified flow will start, but the chat interface will be completely fresh—no past conversation history will be visible. This is ideal for scenarios where you want to start a new interaction from scratch, ensuring that the customer is presented with only the current, relevant information.

Example Image and Code:

<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script> <script>ktt10.setup({"pageId":"1970516","headerTitle":"Chatgpt Builder","ref":"1679880775117", "icon": "https://i.ibb.co/P9Kd08V/Untitled-2.png", "color": "#36D6B5", "template": "template1"});</script>

iFrame 

Note: We strongly recommend using the Webchat Channel’s provided script or full-page link to integrate webchat into your website, rather than relying on a published webchat flow link. While using a published flow link can be a quick and flexible solution, it has a few drawbacks like losing the ability to use features like the webchat microphone, due to cross-domain restrictions. However, if you still choose to proceed with this method, here’s how you can do so:

To embed an iframed flow link, use the following structure:

<div style="width:100%; padding-bottom:56.25%; position:relative;"> <iframe src="{{Your Published Flow Link Here}}" style="position:absolute; top:0px; left:0px; width:100%; height:100%; border:none; overflow:hidden;"></iframe> </div>

How to Automatically Open Webchat

To set up the Chatbot Builder AI plugin and include a setTimeout function to automatically click a button after 4 seconds, follow the script format below:

Loading the Plugin:
This step loads the necessary plugin for Chatbot Builder AI to function on your website. Insert the following script tag into your website's HTML:

<script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=5"></script>

Initializing the Plugin:

After loading the plugin, you need to initialize it with your specific configuration. This involves setting up parameters such as the plugin ID, account ID, and the color theme for the webchat. Here’s an example of how to do this:

<script> ktt10.setup({ id: "uxZ1a5Wvqj3TpqlgNaZ", accountId: "YOUR-ID-HERE", color: "#36D6B5" }); </script>

id: This is the unique identifier for the plugin instance.
accountId: Replace "YOUR-ID-HERE" with your actual account ID.
color: Customize the webchat's color by setting your desired color code.

Auto-Open Webchat After 4 Seconds (Or Your Preferred Timing)

The setTimeout function is a simple tool that lets you automate actions on your website. In this case, it’s used to automatically click the webchat button after 4 seconds. This means that the chat window will pop up on its own shortly after the page loads, making it easier to catch the visitor's attention and encourage them to start a conversation. 

You can also customize the timing to open the chat at any interval you prefer, not just 4 seconds. This feature is especially helpful for engaging users without requiring them to manually open the chat.

Add the following code snippet to enable this functionality:

setTimeout(function() { ktt10Btn.click(); }, 4000);

This code will trigger the ktt10Btn button to be clicked automatically 4 seconds after the webchat loads.

By following these steps, you can successfully set up the Chatbot Builder AI plugin with your desired configurations and ensure it automatically opens after a brief delay.

Example Code for a webchat that will open after 4 seconds:

<script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=5"></script>

<script>

    ktt10.setup({

        id: "uxZ1a5Wvqj3TpqlgNaZ",  // Replace with your specific plugin ID

        accountId: "YOUR-ID-HERE",  // Replace with your actual account ID

        color: "#36D6B5"            // Customize the webchat's color

    });

</script>

<script>

    setTimeout(function() {

        ktt10Btn.click();

    }, 4000);

</script>