Chat – Website Integration

Reading Time: 5 minutes

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® Desk 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

  1. Select a project from the project list, then select Channels > Chat.
  2. Copy the content from the Webchat plugin code 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 Transcript email. 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 Webchat tab.
  3. Mark or unmark the Automatically open chat window (seconds) 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 Automatically open chat window (seconds) 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 > 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 Webchat tab.
  3. In the Maximum number of conversations appear 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.

VCC Live Chat Customization

To Change the Chat Widget Logo

  1. Select a project from the project list, then select Channels > Chat.
  2. Select the Webchat tab.
  3. In the Image URL: field, insert an 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. 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 > Chat.
  2. Select the Webchat 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 Webchat 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 Webchat 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.


There are no comments yet.
Subscribe to our newsletter
or Contact us!
Please note that by subscribing to our newsletter, you agree to receive regular email messages from VCC Live® about service related news and updates. By subscribing to our newsletter, you also agree that VCC Live® will use your data in accordance with the applicable Privacy Policy until you unsubscribe from the newsletter.