Customized behaviour

Embed code customization

The following is a summary of all programmatic customization options of VCC Live webchat.

Table of Contents

• Embed code customization
• Passing variables
• Customizing project handling in the domain
• Customizing webchat for full-screen mode
• Hide webchat bubble when minimized
• Loaded the webchat in the open state
• Events
• Opening/closing webchat with SDK actions

Passing variables

In the embed code of the webchat, you can now pass variables that the chat workflow can later use for customer identification or other purposes.

In the example below, a variable called customer_id is passed with a value of 850031.

window.__vcc_chat_variables = {
 customer_id: '850031'
};

Customizing project handling in the domain

In case you are embedding multiple VCC webchats from different projects under the same domain, then by default, if a customer initiates a chat in one of the projects, the customer can continue the same chat session under the domain, even if the customer navigates to a subpage where a different project’s webchat code is embedded. If multiple VCC webchats are embedded under different domains, then the same chat cannot be continued in different projects.

If you would like to change this behaviour, then in the embed code, you can pass an optional parameter ‘scope’ as below. All embed codes, where the scope has the same value, will maintain the same system behaviour as described above. If the scope has different values under the same domain, then even if the customer starts a chat in one project, this chat cannot be continued under another project if one is embedded under the same domain.

window.__vcc_next_chat = { a, p, scope: 'example' };

Customizing webchat for full-screen mode

In case you would like the webchat to fill out the browser as it does on mobile platforms, you can pass the below parameter to behave in such a way. When passed, the webchat will always fill out the given browser window/container.

window.__vcc_next_always_fill_container = true;

Hide webchat bubble when minimized

In case you would like the webchat bubble not to appear at all and drive the opening/closing of the chat with custom actions, you can make it disappear with this setting.

window.__vcc_next_hide_chat_minimalized = true;

Loaded the webchat in the open state

If you would like to load the webchat automatically in opened state, you can use the below setting

window.__vcc_next_auto_open_chat = true;

Events

The following events can also help you customize the webchat behaviour

• vccNextChatLoaded: event is fired when the chat is loaded
• vccNextChatStateChanged: event is fired when the chat changes state (e.g., customer opens or closes the chat)

Opening/closing webchat with SDK actions

If you would like to open or close the webchat widget programmatically, then you can use the following SDK actions.

• Global name: window.__vcc_chat_sdk
• Methods:
  • openChat() — programmatically open the chat widget
  • closeChat() — programmatically close the chat widget
  • getPluginState() — returns the current widget state as a string: 'opened' or 'closed' (defaults to 'closed'). This reflects the webchatPluginState cookie used by the plugin to sync state with the host page.

You can observe state changes via the cookieStore API (when available) by listening for changes to the webchatPluginState cookie.

Example:

// Read current state
const state = window.__vcc_chat_sdk.getPluginState();

// Open / Close
window.__vcc_chat_sdk.openChat();
window.__vcc_chat_sdk.closeChat();

// React to state changes (browser support required)
cookieStore.addEventListener('change', (e) => {
  // re-read the state on any cookie change
  console.log('chat state:', window.__vcc_chat_sdk.getPluginState());
});