Adding live chat to your website or help center

In this article, we’ll walk you through the tasks you need to complete to make live chat available to your customers on your website. These tasks include:

• Enabling live chat in the Web Widget (Classic)
• Configuring the appearance of the widget
• Creating and enabling your chat forms
• Allowing visitors to rate chats
• Establishing your widget security rules
• Adding the widget to your website or help center

• Configuring the appearance of the widget
• Creating and enabling your chat forms
• Allowing visitors to rate chats
• Establishing your widget security rules
• Adding the widget to your website

Enabling live chat in the Web Widget (Classic)

To make live chat available to your customers through the Web Widget (Classic), you need to enable it on the Web Widget (Classic) admin page in Admin Center. Other channels are available through the Web Widget (Classic) as well. Your exact steps depend on how you're planning to use the widget, and what you may already have configured. You can offer through the Web Widget (Classic):

• Live chat functionality only
• Live chat plus other channel functionality

If you are already using the Web Widget (Classic), and are just adding live chat to it, it is available to users as soon as you enable it.

If you are new to the Web Widget (Classic), you will need to add it to your website or help center before it is available to users.

See Configuring components in the Web Widget (Classic), which covers all of your options for offering customer support through the Web Widget (Classic).

Configuring the appearance of the widget

You can customize how the widget looks, and how visitors interact with it, to best match your company’s brand.

This section describes the following configurable elements:

• Chat window
• Chat badge
• Concierge
• Message style

• Chat window
• Concierge
• Message style

Chat window

The Chat window is the frame around the live chat interface.

From the Chat dashboard, you can customize the top title and theme color, as well as the widget’s position on your web page.

From the Chat dashboard, you can customize the top title.

From the Web Widget (Classic) admin page, you can customize the theme colors, the theme’s text color (on the launcher, contact button, and header), and the widget’s position on your web page.

See Customizing the Chat Window section.

See Customizing the Chat Window section for information on updating the top title.

See Customizing the color of the widget elements for information on updating the theme and text colors.

See Offsetting the widget placement for information on updating the widget position.

Chat badge

The Chat badge is how the widget looks before a live chat is started. You can customize whether to display the badge, whether the badge is text only or includes an image (and the position of that image), the background color, and what text appears on the badge.

See Customizing the Chat Badge section.

Concierge

The Concierge section covers what customers see after clicking to open the widget, but before they enter a question and begin chatting with an agent. It welcomes visitors to the chat, and can be customized to reflect your organization’s personality by choosing a display title, byline, and avatar.

See Customizing the Concierge section.

Message style

The Message Style section allows you to choose whether you want to display the avatars selected in the Concierge section alongside chat messages.

See Customizing the Message Style section.

Creating and enabling your chat forms (offline and pre-chat)

There are two forms you can use to streamline communication with your visitors: The pre-chat form, which requests information from a visitor before starting a live chat; and the offline form, which allows visitors to leave a message for agents when none are online to assist them. These forms, along with visitor profile requirements, are managed from your Chat dashboard.

This section includes the following:

• Visitor profile
• Pre-chat form
• Offline form

Visitor profile

In the Visitor profile section, you can allow visitors to sign in and share contact information before or during a chat, including:

• Phone number, which allows unauthenticated visitors to enter a contact number.
• Social login, to allow visitors to pull contact details from their Facebook or Google accounts.

Selections made in this section can impact information in the pre-chat and offline forms.

See Editing Visitor Profile settings.

Pre-chat form

The pre-chat form is a way to request information from visitors before they can start a chat. The pre-chat form by default asks for a visitor’s name, email, requested department, and initial message; optionally, you can add a field for a phone number, and can choose to allow users to pull information from social media accounts (Facebook or Google). The requested information can be optional or required, depending on your needs. You also have the option to include a pre-chat greeting.

See Enabling the pre-chat form.

Offline form

Note: If you have enabled the Web Widget (Classic) contact form, you cannot also use Chat's offline form.

The offline form allows your visitors to leave a message for agents when none are online. Similar to the pre-chat form, by default it includes fields requesting a visitor’s name, email, and message. You can add a field requesting a phone number, allow users to pull information from social media accounts (Facebook or Google), make form fields required or optional, and include an offline greeting. You can also allow visitors to access the form via Facebook Messenger or X (formerly Twitter).

See Managing offline form settings.

Allowing visitors to rate chats

If you would like to gather immediate feedback from your customers, you can enable satisfaction ratings, which give your visitors the option to approve or disapprove of the service they received by clicking a thumbs up or thumbs down icon.

See Measuring visitor satisfaction with chat rating.

Establishing your widget security rules

There are a number of ways you can control access to Chat functionality. You can specify which countries and domains can load and use the widget, by adding them to the Blocked Countries and Allowed Domains lists. In addition, you can require visitor authentication on each page that includes the widget, which helps identify visitors starting a chat. These settings are managed under the Widget security tab on your Chat dashboard.

Note that these settings apply only to visitors using Chat. To restrict visitors using the Web Widget (Classic) to access other functionality, you need to establish these rules through the Web Widget (Classic) admin page.

This section describes the following settings:

• Restricting and granting access to specific countries and domains
• Enabling visitor authentication

Restricting and granting access to specific countries and domains

When you enable the Blocked Countries option, you can use the dropdown menu to select which countries will not have access to Chat in the widget -- that is, if they load a page with the widget embedded, Chat functionality will not be available to them.

When you enable the Allowed Domains option, you can specify trusted domains. Users from these domains will have Chat functionality available to them when they load a web page with the widget embedded.

Enabling visitor authentication

When you enable visitor authentication for Chat, signed-in visitors are identified on any page that includes Chat. This allows visitors to continue chats when moving between devices or browsers, and automatically fills in any profile information that may be required for chatting.

You can configure your widget to authenticate visitors on every page load using a new Javascript API and JWT token. To do this, you’ll need to generate a Shared secret, and create a JWT token.

See Enabling authenticated visitors in the Chat widget.

See Enabling authenticated visitors in the Web Widget (Classic).

Adding the widget to your website

Now that you’ve customized the basic look and functionality for Chat, you’re ready to make it available to your customers by adding it to your website. You can also check out the advanced customization options available to you.

To embed the widget on your website, you’ll need to copy a short code snippet (provided by us) and paste it into the HTML on each web page where visitors should have the option to request support via Chat.

See Adding the Chat widget to your website.

Adding the widget to your website or help center

Now that you’ve customized the basic look and functionality for Chat, you’re ready to make it available to your customers by adding it to your website or help center. You can also check out the advanced customization options available to you.

To embed the widget on your website, you’ll need to copy a short code snippet (provided by us) and paste it into the HTML on each web page where visitors should have the option to request support via Chat.

If you already have the Web Widget available on your website, and are adding Chat functionality to it, you do not need to update this snippet – Chat will be available as soon as you enable it, as described above.

If you’re adding the widget to your help center, you simply need to toggle it on, from the Web Widget (Classic) admin page.

See Adding the Web Widget (Classic) to your website or help center.