Webchat allows your business to add a chatbot on your website that doesn’t depend on any other platform like Facebook, Telegram, WhatsApp, or Google. Your customers don’t need to create an account to interact with your chatbot.
If you collect email or a phone number on the webchat, your business can send an SMS or email anytime.
Adding the code to your website
1 – Include the code below in the website’s body or footer.
<script src="https://app.chatshero.com/webchat/plugin.js"></script>
<script>
ktt10.setup({ pageId: YOUR_ACCOUNT_ID});
</script>This simple code will add a webchat similar to the below image.
Use web chat as a single page
https://app.chatshero.com/webchat/?p=1284242&ref=1694406387192
The webchat plugin is very flexible and allows many customizations
| 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 | #007BFF |
| 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 |
If you still have any doubts, visit other articles on knowledge base or contact our support to get your doubts cleared.