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

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 Web chat 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 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.

Related articles

There's always more to learn. Discover similar features by visiting related articles:

Can't find what you need? Use the comment section below to connect with others, get answers from our experts, or share your ideas with us.


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.