Widget SDK for Web

Introduction

Chative's live chat widget offers the simplest method for your website to establish a direct communication channel with your visitors. Widget SDKs have features allowing them to fine-tune their behavior and style.

Installation

To make the widget to appear on your web app, simply copy and paste the snippet below before the tag <body> on every page where you want the widget to appear for website visitors.

<script>
const channelId = 'your-channel-id';

!function(t,e,i){e.chativeApi=function(t,i){e.ChativeApi?e.ChativeApi(t,i):(e.ChativeEvents||=[],e.ChativeEvents.push([t,i]))},function n(){if(t.body){const n=t.createElement("script");n.src=`https://messenger.svc.chative.io/static/v1.0/channels/${i}/script.js?mode=livechat&state=off&hostname=${e.location.hostname}`,n.async=!0,t.body.appendChild(n)}else setTimeout(n,100)}()}(document,window,channelId);
</script>

Methods

chativeApi('boot');

const user = {
    user_id: 'UNIQUE_USER_ID', // Replace with your user ID
    user: {
        email: 'acme@example.com', // Your user's email address
        first_name: 'John',
        last_name: 'Doe',
        phone: '+1234567890',
        custom_field: 'CUSTOMER_FIELD_VALUE' // Replace key and value with your custom field
    },
    isHidden: true // If you want to hide the widget immediately after boot, set it to true, otherwise set it to false.
}

chativeApi('boot', user);

You may attach user information so your customers don't need to manually fill their email address. Providing custom data is possible as well.

info

Custom fields are optional and can be used to store any additional information about the customer. Custom fields must be created before using this function.

chativeApi('shutdown');

chativeApi('shutdown');

This will shut down the live chat widget. Based on the provided rules, this method will:

Remove all events from the queue if it appears after a 'boot' event.
Keep only subsequent events in the queue if it appears before a 'boot' event.

chativeApi('hide');

chativeApi('hide');

This will hide the live chat widget.

chativeApi('show');

chativeApi('show');

This will show the live chat widget.

chativeApi('openChatWindow');

chativeApi('openChatWindow');

This will show the chat window.

info

This method only available to widget configured with mode of live chat window.

chativeApi('closeChatWindow');

chativeApi('closeChatWindow');

This will close the chat window.

info

This method only available to widget configured with mode of live chat window.

chativeApi('addEventListener')

chativeApi('addEventListener', {
    event: 'closed' | 'opened' | 'new-agent-message' | 'message-sent' | 'greeting-opened' | 'greeting-closed',
    callback: function(data) {
        // Do stuff...
    }
});

You can subscribe to various events to enhance your interaction with the live chat. These events include:

'closed': Triggered when the live chat window is closed.
'opened': Occurs when the live chat window is opened.
'new-agent-message': Fired upon receiving a new message from an agent.
'message-sent': Activated when a message is sent from the live chat window.
'greeting-opened': Triggered when the greeting message is opened.
'greeting-closed': Occurs when the greeting message is closed.

If you have any concerns, please feel free to contact us through live chat. For more details on how we have helped our customers grow their business, you can view our blogs or join our Discord community to learn and share new things 😊

Introduction​

Installation​

Methods​

Introduction

Installation

Methods