After enabling messaging at the account level, you can turn on messaging for the Web Widget, configure its appearance and other settings, via Admin Center, then embed the widget on your website or help center..
If you have multiple brands, you can select one or more on which to deploy the Web Widget. If a brand already has an existing Web Widget (Classic), you can use those widget settings as the basis for the messaging Web Widget If you have a new account, or if a brand is not currently using a Web Widget (Classic), you can create a messaging Web Widget from scratch.
This article includes the following topics:
You can also activate messaging on an Android or iOS app.
Turning on messaging for a Web Widget
If you’re turning on messaging for a Web Widget on a brand without a previously enabled Web Widget (Classic), you’ll need to create a widget, as described in the procedure below. Because messaging is activated per-brand, you’ll need to perform these steps for each brand that will offer messaging to your customers.
If you are converting an existing Web Widget (Classic), see Moving from Web Widget (Classic) to the Web Widget.To activate messaging Web Widget
- In Admin Center, click the Channels icon (
) in the sidebar, then select Messaging and social > Messaging. - Click the Add Channel button, then select Web Widget.
- On the Add Web Widget page, configure the following sections, and click Next when each is completed:
- Set up the basics: Enter a channel name, then use the dropdown to select a brand. Only brands without an existing Web Widget or Web Widget (Classic) appear in the list.
- Style the appearance: Enter a hexadecimal number or use the picker to select the Primary color, which is used in the Web Widget launcher and header. Upload an optional logo, and enter the title that will appear in the header.
- Install on your site: Choose where to install the Web Widget. See The Installation tab for more information on adding the Web Widget to your website or help center.
- Click Finish. The Edit Web Widget page opens, where you can continue configuring the Web Widget, or leave it as-is. For more information on the options here, see Customizing and configuring the Web Widget.
If you disable messaging for a brand, the Web Widget is converted to Web Widget (Classic).
Moving from Web Widget (Classic) to the Web Widget
After enabling messaging at the account level, any brand that was previously using Web Widget (Classic) will continue to use that widget until you perform the procedure described below.
When you enable messaging in a Web Widget for a brand that is already using Web Widget (Classic), you're essentially switching off the Web Widget (Classic) and migrating to the new Web Widget. Many of your Web Widget (Classic) configuration settings are automatically migrated to the new widget settings, including:
- Widget position: The widget and launcher will appear wherever you've placed it on your help center or webpage
- Theme color: The color setting for the launcher, contact button, and header are applied to the Web Widget frame.
- Web Widget button text: During migration, this becomes the launcher text. As in Web Widget IClassic), it is the text that appears in the launcher button.
- Web Widget snippet: The new Web Widget and Web Widget (Classic) use the same snippet so there’s no need to update it in order for messaging to work.
- Help center enablement: If you've enabled the Web Widget (Classic) in a help center, the Web Widget replaces it.: The widget and launcher will appear wherever you've placed it on your Help Center or web page .
There is some Web Widget (Classic) functionality that is not yet available in the messaging Web Widget:
- Talk is not enabled. You can still receive calls through the Agent Workspace.
- Existing Javascript API code may not be supported. We do recommend that you test any API code not documented as supported by the messaging Web Widget and let us know of any issues.
To convert Web Widget (Classic) the messaging Web Widget
- In Admin Center, click the Channels icon () in the sidebar, then select Messaging and social > Messaging. Your active channels appear.
- Click the brand you want to convert to the messaging Web Widget.
- On the brand's Edit Web Widget page, check Turn on messaging for this Web Widget.
- Update the Web Widget customizations or, if you want to do this later, click Save.
- Repeat these steps for each active brand you want to use with messaging.
Customizing and configuring the Web Widget
As with Web Widget (Classic), the new Web Widget includes multiple components that you can customize to best represent your business. Make sure you have enabled the Web Widget before starting the customization process.
To configure the Web Widget
- In Admin Center, click the Channels icon () in the sidebar, then select Messaging and social > Messaging.
- Hover your cursor over the brand you want to update, click the options icon (
), then click Edit. - Click the tab with the components you want to customize. Follow the links below for more detailed information on the options for that tab:
- Basics (Web Widget name and flow)
- Style (Web Widget appearance)
- Preferences (conversation history settings)
- Installation (code snippet and help center embed)
The Basics tab
The Basics tab includes an editable Channel name field, and a link to the channel's Flow Builder configuration page.
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 more unique.
To update the Channel name
- In the Channel name field, delete the text you want to change.
- Enter the new name for the channel, then click the Save button.
The Style tab
The Style tab includes the appearance-related components of the Web Widget.
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. The default color is migrated from the brand's classic Web 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. 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.
Scroll down to the Launcher section, where you can update the following:
- 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.
- Text (optional), text that appears next to the launcher button.
- Show on mobile, select to display the text in a mobile SDK.
The Preferences tab
The Preferences tab is where you can set your Conversation history options. See About Conversation history.
The Installation tab
To add the Web Widget to your website
- Click the Installation tab, then click the Copy icon (
) at the bottom of the code snippet frame. - 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.
- 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.
About Conversation history
If you choose to enable the Conversation history 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.
Comments
0 comments
Please sign in to leave a comment.