ChatBot Builder's Webchat enables you to incorporate a chatbot on your website.
This standalone feature doesn't require linkage to any third-party platforms such as Facebook, Telegram, WhatsApp, or Google. This eliminates the need for your customers to create new accounts and facilitates more effortless interactions.
Additionally, if you gather customer emails or phone numbers via the webchat, your business can easily communicate with them through an SMS or email whenever needed.
Embedding the Webchat Code into Your Website
1 – Navigate to Settings > Channels > Web Chatbot > Manage
Add you website domain or subdomain to the Authorized websites.The chatbot will only load on authorized websites.
After creating and saving your Webchat, click 3 dots and get the code.
2 – Copy and insert the following code into your website’s body or footer.
Copy code:
<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID});
</script>
This simple code snippet will embed a webchat on your website. Implementing the Webchat as a Standalone Page:
Navigate to the URL, replacing "YOUR_ACCOUNT_ID" with your account ID: https://app.chatgptbuilder.io/webchat/?p=YOUR_ACCOUNT_ID
Customizing Color Scheme
To change the color of the webchat interface, include a 'color' attribute within the setup function as follows:
Copy code:
<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID, color: "#36D6B5"});
</script>
Replace "#ff0000" with your desired color code.
Switching Webchat Templates
ChatGPT Builder currently offers three templates for webchat. We'll soon offer more template options. To change the template, include a 'template' attribute within the setup function as follows:
Copy code:
<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script>
<script>
ktt10.setup(
{
pageId: YOUR_ACCOUNT_ID,
color: "#007BFF",
hideHeader: true,
template: "template1"
}
);
</script>
ChatGPT Builder currently provides three templates: a standard default template and two additional templates named "template1" and "template2". More templates will be introduced in the future.
Displaying the Account Profile Picture as a Persona
To showcase your account profile image as a persona within the chat, use the 'showPersona' attribute as follows:
Copy code:
<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID, showPersona: true});
</script>
Modifying the Chat Icon
To change the chat icon, use the 'icon' attribute and specify the URL of your desired image:
Copy code:
<script src="https://app.chatgptbuilder.io/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID, showPersona: true, icon: "YOUR_IMAGE_URL"});
</script>
Replace "YOUR_IMAGE_URL" with the URL of your chosen image.
Option Name | Possible Values/Description | Default |
type | floating/window/container container: include the chatbot inside any HTML element window: the chatbot will open on a new window | floating |
element | Only used if “type” is “container”. example “#div1” | |
headerTitle | The title that is shown on the header of the webchat | Account Name |
color | any color name or color code | #36D6B5 |
hideHeader | Hide the session that contains the business name true/false | false |
ref | any ref/flow/step ID to be sent automatically once the user clicks on the chat ICON. Set ref as “get_started_button” to automatically send the Welcome flow. | |
showPersona | true/false | false |
hideComposer | true/false | false |
template | template1/template2 | |
icon | the chat icon that shows on the bottom | right | |
right | Distance of the icon from the left edge of the screen | 20px |
bottom | Distance of the icon from the bottom edge of the screen | 20px |
loadMessages | Load past conversations with the contact when webchat is opened. true/false | true |
setCustomFields | Allow to set multiple custom fields. id: Custom Field ID You can use a system field name as ID: email, phone, full_name, first_name,last_name | [{id:”email”, value:”…@gmail.com”}, {id:348574, value:”Value here”}] |
Transitioning the Conversation from Any Channel to Webchat
Not all channels support the comprehensive features offered by webchat. For example, if a customer is communicating with your business via SMS and you want to showcase a gallery list of your services, you can transfer the conversation to webchat.
Simply send the user a message containing the following system custom field: {{webchat}}
To automatically start a specific flow or step when the user accesses this link, append "&ref=FLOW_OR_STEP_ID" to the end.
For example, if the FLOW_ID is 111111, the link would be:
{{webchat}}&ref=111111
This link will load previous messages from the conversation between the bot and the user.
If you prefer not to load old messages, append "&lc=0" at the end of the link:
{{webchat}}&ref=111111&lc=0
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> | |
<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", "hideHeader": "true"});</script> |
iFrame
<div style="width:100%; padding-bottom:56.25%; position:relative;">
<iframe src="{{Your WebChat Link HERE}}" style="position:absolute; top:0px; left:0px;
width:100%; height:100%; border: none; overflow: hidden;">iframe>
div></iframe></div>
How to Automatically Open Webchat
Chatbot Builder AI Setup Script with Timeout
To set up the Chatbot Builder AI plugin and include a setTimeout function to click a button after 4 seconds, follow the script format below:
<script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=5"></script>
<script>
ktt10.setup({
id: "uxZ1a5Wvqj3TpqlgNaZ",
accountId: "YOUR-ID-HERE",
color: "#36D6B5"
});
setTimeout(function() {
ktt10Btn.click();
}, 4000);
</script>
Breakdown of the Script:
1. Loading the Plugin:
<script src="https://app.chatgptbuilder.io/webchat/plugin.js?v=5"></script>
2. Initializing the Plugin:
<script>
ktt10.setup({
id: "uxZ1a5Wvqj3TpqlgNaZ",
accountId: "YOUR-ID-HERE",
color: "#36D6B5"
});
3. Adding the Timeout Function:
setTimeout(function() {
ktt10Btn.click();
}, 4000);
</script>
This script initializes the Chatbot Builder AI plugin with the specified configuration and sets a timeout to automatically click the ktt10Btn button after 4 seconds.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article