Live 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 VCC Live 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 > Chat.
2. Copy the content from the Code to insert on your website 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 > Chat.
2. Enter an email address in the Send chat transcript via email to. When an agent closes the chat, the transcript is sent to the email address.
3. Press Save.

To Customize Chat Greeting

1. Select a project from the project list, then select Channels > Chat.
2. Enter your chat greeting in the Chat greeting text field. When your website visitor opens the chat, the greeting is displayed.
3. Press Save.

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

1. Select a project from the project list, then select Channels > Chat.
2. Select the Web chat tab.
3. Mark or unmark the Pop up chat window in (sec) 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 Save.

Note: If Pop up chat window in (sec) is disabled, the chat widget only appears when the website visitor selects the button. If the function 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 > Chat.
2. Mark the checkbox beside Expected agent response time (sec).
3. Enter the desired value.
4. Press Save.

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 > Chat.
2. Select the Web chat tab.
3. In the Conversations per agent text field, enter the desired value.
4. Press Save.

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 > Chat.
2. Select the Web chat tab.
3. In the Image URL field, insert a URL link to the logo you want to use.
4. Press Save.

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

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

To Change the Chat Button Label

1. Select a project from the project list, then select Channels > Chat.
2. Select the Web chat tab.
3. In the Chat button label text field, enter a text.
4. Press Save.

To Customize the Chat Widget Accent Color

1. Select a project from the project list, then select Channels > Chat.
2. Select the Web chat tab.
3. Select the Accent color color bar to invoke the color picker control.
4. Select a color, or enter a HEX color code.
5. Press OK, then press Save.

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 > Chat.
2. Select the Web chat tab.
3. Select the Header text color color bar to invoke the color picker control.
4. Select a color, or enter a HEX color code.
5. Press OK, then press Save.

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 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 to 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

Your website visitor may be 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 agent.

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.