Chat – Website Integration

You can add VCC Live Chat to your website, allowing your website visitors and agents to communicate in real time. When a visitor sends you a message via your website, agents can instantly respond from within the productname.label application.

Tip: You can also integrate VCC Live Chat with Facebook Messenger. See Chat – Facebook Integration.

Table of Contents

• To Add VCC Live Chat to your Website
• To Send Chat Transcript to an Email
• To Customize Chat Greeting
• To Enable or Disable Automatic Pop-Ups After a Time Delay
• To Set the Expected Agent Response Time
• To Limit How Many Chat Conversations an Agent is Allowed to Handle
• Customizing Chat Widget Appearance
• To Change the Chat Widget Logo
• To Change the Chat Button Label
• To Customize the Chat Widget Accent Color
• To Customize the Chat Widget Header Font Color
• Chat Queues and Chat Transfer
• To Create and Use Chat Queues
• Transfer Chat Conversations to Other Agents or Queues
• To Enable or Disable the Chat Transfer Function
• Chat Templates
• To Create a Chat Template

To Add VCC Live Chat to your Website

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Copy the content from the webchatSettings.code.label field to your website.

Note: You may need to contact your webmaster to add the code to your website.

To Send Chat Transcript to an Email

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Enter an email address in the webchatSettings.transcript.label. When an agent closes the chat, the transcript is sent to the email address.
3. Press field_change.button.label.

To Customize Chat Greeting

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Enter your chat greeting in the webchatSettings.welcomeMessage.label text field. When your website visitor opens the chat, the greeting is displayed.
3. Press field_change.button.label.

To Enable or Disable Automatic Pop-Ups After a Time Delay

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Select the webchat_settings.tab.label tab.
3. Mark or unmark the webchatSettings.automaticOpen.label checkbox.
4. Enter a value in the text field to define after how many seconds the chat windows should appear. Minimum value: 1 sec, maximum value: 3600 secs, default value: 15 secs.
5. Press field_change.button.label.

Note: If webchatSettings.automaticOpen.label is disabled, the chat widget only appears when the website visitor selects the button. If the functon is enabled, the chat widget will only appear if there are available agents.

To Set the Expected Agent Response Time

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Mark the checkbox beside maxAgentResponseTime.label.
3. Enter the desired value.
4. Press field_change.button.label.

Note: If this function is enabled, when a chat conversation between an agent and client ends, the system will allocate a chat-specific disposition to the conversation. See Chat-Specific Dispositions.

Note: You can view the chat conversation history in the chat log. See Chat Log.

To Limit How Many Chat Conversations an Agent is Allowed to Handle

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Select the webchat_settings.tab.label tab.
3. In the webchatSettings.simultaneousConversations.label text field, enter the desired value.
4. Press field_change.button.label.

Customizing Chat Widget Appearance

You can customize VCC Live Chat widget colors and change the widget logo, enabling it to reflect your company’s branding.

To Change the Chat Widget Logo

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Select the webchat_settings.tab.label tab.
3. In the webchatSettings.headerLogoUrl.label field, insert an URL link to the logo you want to use.
4. Press field_change.button.label.

Note: Optimal image resolution: 350 x 40 px. Any larger image will be automatically resized to 40 px height. Aspect ratio is preserved.

Tip: We recommend using a PNG or SVG image with transparent background.

To Change the Chat Button Label

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Select the webchat_settings.tab.label tab.
3. In the webchatSettings.minimizedPluginText.label text field, enter a text.
4. Press field_change.button.label.

To Customize the Chat Widget Accent Color

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Select the webchat_settings.tab.label tab.
3. Select the webchatSettings.backgroundColor.label color bar to invoke the color picker control.
4. Select a color, or enter a HEX color code.
5. Press OK, then press field_change.button.label.

Note: The color picker control interface may vary depending on what operating system you are using.

To Customize the Chat Widget Header Font Color

1. Select a project from the project list, then select channels.menu.label > webchatSettings.menu.label.
2. Select the webchat_settings.tab.label tab.
3. Select the webchatSettings.textColor.label color bar to invoke the color picker control.
4. Select a color, or enter a HEX color code.
5. Press OK, then press field_change.button.label.

Note: The color picker control interface may vary depending on what operating system you are using.

Chat Queues and Chat Transfer

Using Chat queues, you can configure how new chat messages are assigned to specific groups of agents. This allows you to more efficiently allocate your agents to chat messages based on their expertise, while also ensuring your clients get the answer they need.

For example, you can create chat queues for specific topics (e.g., “Technical support” and “Question about my order”) with each queue assigned to specific agent departments (e.g., Technical Support and Sales Support). Before your website visitors start a chat conversation on your website, they can choose the most relevant topic from a list — and their messages will be routed to one of the queues you have specified earlier.

To Create and Use Chat Queues

1. Select a project from the project list, select Channels > Chat, then select the Queues tab.
2. Enter a Name and Label for the new queue, for example “Technical Support”, then press Save. Your new chat queue is ready to use!
3. To use the chat queues, you need assign the queues to agents on the Queues & Skills interface. See Assigning Agents to a Queue.

Note: You can specify a message to display in the chat when the website visitor chooses a queue. To enter the message, select the General settings tab, then enter your message in the Message to display when selecting queue text field.

Transfer Chat Conversations to Other Agents or Queues

It may happen that your website visitor is routed to the wrong queue, for example because the website visitor selected the wrong topic in the chat widget. In this case, your agent can transfer the website visitor to another chat queue or a specific agents.

To Enable or Disable the Chat Transfer Function

1. Select a project from the project list, select Channels > Chat, then select the General settings tab.
2. Mark or unmark the Transfer chat conversation checkbox.

Chat Templates

You can create chat templates —short preset messages— that can be inserted by the agents in the message box using shortcut expressions. When the agent starts typing in the shortcut, the system will automatically suggest the corresponding template that can be inserted by clicking on the suggestion.

To Create a Chat Template

1. Select a project from the project list, select Channels > Chat, then select the Chat templates tab.
2. Press Create new to create a new template.