How to add webchat to your website?

You are here:
Estimated reading time: 2 min

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://web.chatrace.com/webchat/plugin.js"></script>
<script>
      ktt10.setup({ pageId: YOUR_ACCOUNT_ID});
</script>

For Whitelabel

<script src="https://YOUR_SUB_DOMAIN/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://chatrace.com/webchat/?p=YOUR_ACCOUNT_ID

For Whitelabel

https://YOUR_SUB_DOMAIN/webchat/?p=YOUR_ACCOUNT_ID

The webchat plugin is very flexible and allows many customizations

Option NamePossible Values/DescriptionDefault
typefloating/window/container
container: include the chatbot inside any HTML element
window: the chatbot will open on a new window
floating
elementOnly used if “type” is “container”. example “#div1”
headerTitleThe title that is shown on the header of the webchatAccount Name
colorany color name or color code#007BFF
hideHeaderHide the session that contains the business name
true/false
false
refany 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.
showPersonatrue/falsefalse
hideComposertrue/falsefalse
templatetemplate1/template2
iconthe chat icon that shows on the bottom | right
rightDistance of the icon from the left edge of the screen20px
bottomDistance of the icon from the bottom edge of the screen20px

Changing Color

<script src="https://web.chatrace.com/webchat/plugin.js"></script>
<script>
      ktt10.setup({ pageId: YOUR_ACCOUNT_ID, color: "#ff0000"});
</script>

Changing template

Currently, we offer only 3 templates for the webchat. We will create more templates soon.

<script src="https://web.chatrace.com/webchat/plugin.js"></script>
<script>
      ktt10.setup(
        { 
            pageId: YOUR_ACCOUNT_ID, 
            color: "#007BFF", 
            hideHeader: true, 
            template: "template1"
        }
      );
</script>

<script src="https://web.chatrace.com/webchat/plugin.js"></script>
<script>
      ktt10.setup(
        { 
            pageId: YOUR_ACCOUNT_ID, 
            color: "#007BFF", 
            hideHeader: true, 
            template: "template2"
        }
      );
</script>

Show the account profile image as a persona.

<script src="https://web.chatrace.com/webchat/plugin.js"></script>
<script>
      ktt10.setup({ pageId: YOUR_ACCOUNT_ID, showPersona: true});
</script>

Change the chat icon.

<script src="https://web.chatrace.com/webchat/plugin.js"></script>
<script>
      ktt10.setup({ pageId: YOUR_ACCOUNT_ID, showPersona: true, icon: "YOUR_IMAGE_URL"});
</script>

Handover the conversation from any channel to webchat

Not all channels support all features that webchat supports. For example, if a customer is messaging your business on SMS and you want to show a gallery with a list of your services, you could transfer the conversation to the webchat. Just send the user a message with the below system custom field.

{{webchat}}

If you want to automatically start a flow or step when the user access this link, you will need to append &ref=FLOW_OR_STEP_ID. For example, if the FLOW_ID is 111111 the link will be

{{webchat}}&ref=111111

The link above will load previous messages from the conversation between the bot and the user. If you don’t want to load old messages, append &lc=0 by the end of the link

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

Was this article helpful?
Dislike 0
Views: 8001