Configuring the Web Widget for messaging

Note: This article applies to accounts using the messaging Web Widget. If you're using Web Widget (Classic), see Configuring the components in your Web Widget (Classic).

There are multiple customizable components in the Web Widget that you can configure to best represent your business before installing it in your website or help center.

Some of these elements can be configured as part of the wizard for setting up messaging for the Web Widget. In this article, we’ll discuss how you can update these settings after that initial setup process. We’ll also go over the settings not covered in the setup wizard: customizing the automated response, and enabling the conversation history option.

This article includes the following topics:

• Configuring basic information
• Configuring the widget appearance
• Configuring the default messaging response
• Configuring conversation history
• Installing the widget

You can also activate messaging on an Android or iOS app.

Configuring basic information

The Basics tab includes an editable Channel name field, and management settings for linking your social messaging channels to the Web Widget.

The name field is automatically populated with the brand name. To make it easier to find in your channels list, you may want to update it to something easily recognizable.

For information on configuring social channel linking, see Linking social channels to your Web Widget.

To update the channel name

1. In Admin Center, click the Channels icon () in the sidebar, then select Messaging and social > Messaging.
2. Click the name of the channel you want to edit. The widget’s edit page opens.
3. Click the Basics tab.
4. In the Channel name field, delete the text you want to change.
5. Enter the new name for the channel, then click the Save settings button at the bottom of the page.

Configuring the widget appearance

The Style tab includes the appearance-related components of the Web Widget.

To update the style settings

1. In Admin Center, click the Channels icon () in the sidebar, then select Messaging and social > Messaging.
2. Click the name of the channel you want to edit. The widget’s edit page opens.
3. Click the Style tab.
4. In the Frame section, you can update the following:
   • Primary color , the main color of the launcher button and widget header. Enter a hexadecimal number, or click the color swatch to open a color picker. If you're migrating from Web Widget (Classic), the color defaults to that brand's widget settings.
   • Message color, the color of the bubble around customer messages. Enter a hexadecimal number, or click the color swatch to open a color picker.
   • Action color, the color of any buttons or customer actions (such as a selected option). Enter a hexadecimal number, or click the color swatch to open a color picker.
   • Logo (optional), a JPG or PNG to appear at the top of the frame. The logo is the visual identity of the conversation flow. Click Upload image, then browse to the image you want to add.
   • Title, text which appears at the top of the frame – usually a call to action ("Contact us") or your business name.
   • Description (optional), a short piece of text under the title. This can be information you want to share, or a tagline, for example. Enter the description in the text box.
5. In the Launcher section, update the following elements as needed:
   • Position in browser window, where the launcher button appears in your browser window. Use the radio buttons to choose either Bottom right or Bottom left.
   • Shape (Web Widget only), the shape of the launcher button. Choose Square or Circle.
   • Text (optional), text that appears next to the launcher button.
   • Show on mobile, select to display the text in a mobile SDK.
6. Click Save settings.

Configuring the default messaging response

The Responses tab allows you to customize the default messaging response, which greets your customers when they initiate a Web Widget interaction. Here, you can:

• Apply your Support schedules to create separate responses for online and offline hours
• Customize the automated response(s)
• Enable a conversation bot

When you apply a previously-established Support schedule to your widget, you can create different responses for customers based on whether they contact you during your set office hours, or outside of those hours. You apply any of your Support schedules to the responses.

If you do not apply a Support schedule to your widget, customers receive the same response, regardless of the time or day they launch the widget.

Note: Support schedules are not available on all Suite plans. If your plan does not offer schedules, you can use out of office triggers to manage basic responses.

To apply a business hours schedule to your widget

1. In Admin Center, click the Channels icon () in the sidebar, then select Messaging and social > Messaging.
2. Click the name of the channel you want to edit. The Edit Web Widget page opens.
3. Click the Responses tab.
4. Expand the Business hours section, and use the drop-down to select a saved Support schedule.
5. Expand the Response during business hours section and update as described in the procedure below. Repeat for the Response outside of business hours section.
6. Click Save settings.

If you remove the business hours schedule, the Response during business hours settings are applied.

Whether you are using the business hours option or not, you can customize the response your customers receive when they launch the Web Widget.

To customize your automated response

1. In Admin Center, click the Channels icon () in the sidebar, then select Messaging and social > Messaging.
2. Click the name of the channel you want to edit. The Edit Web Widget page opens.
3. Click the Responses tab.
4. Expand the Response during business hours section. The default messaging response information is displayed in the text boxes.
5. Update the following:
   • First message: Enter the text that appears when a customer launches the Web Widget.
   • Customer details: Use the drop-down to select the information (Name and/or Email) you want to request from the customer before handing them off to an agent. Customers must enter information into these fields before behind handed off to an agent.
   • Follow-up message: Enter the text that appears after the customer submits their details, if enabled.
6. If using business hours, expand the Response outside of business hours section and update the information as described in the previous step.
7. Click Save settings.

At the bottom of the tab, you have the option to enable an automated, customizable bot to the widget. For more information, see Enabling a messaging bot.

Configuring conversation history

The Preferences tab is where you can set your Conversation history options.

If you choose to enable this feature for your customers, when an end user returns to the Web Widget where conversations with your business have already taken place, the full text of those conversations remains visible to them. See Understanding and managing handback events for more information on conversation persistence.

Installing the widget

The Installation tab is where you add the Web Widget to your website or help center.

To add the Web Widget to your website

1. Click the Installation tab, then click the Copy icon () at the bottom of the code snippet frame.
2. If you want to add the Web Widget to your website, go to the web page where you want to add the widget, then paste the code before the closing HTML </body> tag. Add the code to every web page where you want the widget to appear.
3. If you want to send the code to someone else (a developer, for example), click Email code to a team member.
4. Make sure your firewall is configured to allow the Web Widget to appear.

To add the Web Widget to your help center

• Click the Installation tab, then click the checkbox to Automatically embed Web Widget in your Help Center.