Setup and Usage

VCC Live 360 includes an embeddable webchat module that seamlessly integrates with your website or solution. This guide explains how to set up and customize the webchat feature in your tool. The webchat allows users to integrate a chat widget into their website and configure various display and functional settings.

Table of Contents

• Setup
• Customization Options
• Logo
• Button and Header
• Chat Widget Behavior
• Advanced Customization via Injected CSS
• Messaging
• Embed code customization
• Passing variables
• Customizing project handling in the domain

Setup

Navigate to Project -> Channels -> Chat -> Web chat, you can switch on VCC Live 360 webchat here.

Here is the code snippet for the webchat interface, which you can embed directly on your website. The webchat widget will only appear if the website’s domain is added to Allowed websites.

Customization Options

Logo

• Admins can configure the logo displayed on the webchat.
• The uploaded logo is resized to 40px in height while maintaining the aspect ratio.
• If no logo URL is provided, the default VCC logo will be displayed.

Button and Header

• Admins can define the text on the webchat button.
• The colors of the button and header can be customized.
• The text color on the button and header can also be modified.
• When switching to VCC Live 360 webchat, the default colors will change.

Chat Widget Behavior

• Admins can set a delay for the chat widget to appear (between 1 to 36,000 seconds).
• Admins can enable auto-reopening of the minimized chat widget after a set time (between 1 to 1,440 minutes).

Advanced Customization via Injected CSS

The following elements can be customized using injected CSS:

• Chat bubbles
• Background
• Attachments component
• Timestamps
• Input field and text inside
• Send button
• Header and its buttons
• Minimized chat icon

For full technical details around CSS customization, please contact our Support team!

Messaging

Your visitors can send messages to you after typing into the webchat widget and clicking the Send button. The webchat widget can always appear on your website or, based on your settings, only after a set amount of time.

Your visitor can minimize or close the existing chat session by clicking on the Close button in the top right corner. The visitor will receive a notification to confirm the closing of the session.

Your visitor can attach files to the messages. Multiple attachments can be sent in one message. If an attachment exceeds the size limit or violates other security restrictions (e.g. unsupported extension), then the user will be notified. The user cannot send the message until the attachment with the error is removed.

Embed code customization

Passing variables

In the embed code of the webchat, you can now pass variables that can be later used by the chat workflow 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' };