Working with messaging in the Web SDK (beta)

This article includes the following topics:

• About messaging in the Web SDK
• Moving from classic Web Widget to the Web SDK
• Creating a new Web SDK
• Customizing and configuring the Web SDK
• About Conversation history

About messaging in the Web SDK

In the new messaging experience, the Web Widget is now called the Web SDK. After enabling messaging, you can configure the Web SDK’s appearance and other settings via Admin Center, then embed Zendesk on your website. Whenever you see Web Widget (Classic) within Admin Center, that’s referring to the existing Web Widget experience that’s live today. If you have multiple brands, you can choose use the SDK with, to try out the new experience with minimal impact on your visitors:

• If a brand has an existing Web Widget, you can convert it to the new Web SDK.
• If a brand is not currently using a Web Widget, you can create a Web SDK from scratch.

The Web SDK is, like the classic widget, a support channel. It's purpose hasn't changed – it's still an embedded way to connect with your customers, just with more streamlined and automated functionality.

Moving from classic Web Widget to the Web SDK

When you enable messaging in the Web SDK for a brand with an existing Web Widget, you're essentially switching off the classic Web Widget and migrating to the new messaging widget. Many of your classic widget configuration settings are automatically migrated to the new Web SDK settings, including:

• Widget position: The widget and launcher will appear wherever you've placed it on your Help Center or web page
• Theme color: The color setting for the launcher, contact button, and header are applied to the Web SDK frame.
• Web Widget button text:During migration, this becomes the Launcher text. As in the Web Widget, it is the text that appears in the launcher button.
• Web Widget snippet: Web SDK 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 in a Help Center, the Web SDK replaces it.

There is some Web Widget functionality that is not available in the Web SDK currently:

• Talk is not enabled in the Web SDK. You can still receive calls through the Agent Workspace.
• Existing Javascript API code is not supported in the messaging beta release. Client-side API support but will be available for GA. However, if you decide to disable messaging, the API code will remain intact and continue to work in the Classic widget. We do recommend that you test any API code not documented as supported by the Web SDK and let us know of any issues.

Creating a new Web SDK

If you want to add the Web SDK to a brand that does not already include an active Web Widget, the process is slightly different. You’ll need to create a Web SDK channel and assign it to the brand before you can customize and configure it, as described below.

To create a new Web SDK

1. In Admin Center, click the the Channels icon () in the left sidebar.
2. Click the Add Channel button, then select Web SDK.
3. On the Add Web SDK page, configure each of the sections:
   • 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 SDK appear in the list.
   • Style the appearance: Click the Primary, Message, and Action colors, then enter a hexadecimal number or use the picker to select your colors.
   • Install on your site: Choose where to install the Web SDK. See The Installation tab for more information on adding the SDK on your website or Help Center.
4. Click Finish. The Edit Web SDK page opens, where you can continue configuring the Web SDK, or leave it as-is.

If you disable messaging for a brand, the Web SDK is converted into the classic Web Widget.

Customizing and configuring the Web SDK

As with the classic Web Widget, the Web SDK includes multiple components that you can customize to best represent your business. Make sure you have enabled the Web SDK before starting the customization process.

To configure the Web SDK

1. In Admin Center, click the the Channels icon () in the left sidebar.
2. Hover your cursor over the brand you want to update, click the options icon (), then click Edit.
3. 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 (channel name and flow)
   • Style (Web SDK 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 SDK's Flow Builder configuration page.

The Channel 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

1. In the Channel name field, delete the text you want to change.
2. Enter the new name for the SDK, then click the Save button.

The Style tab

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

In the Frame section, you can update the following:

• Primary color , the main color of the launcher button and SDK 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 SDK frame. Click Upload image, then browse to the image you want to add.
• Title, text which appears at the top of the SDK 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, 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.

The Preferences tab

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

The Installation tab

The Installation tab is where you add the Web SDK to your website or Help Center.

Note: If you have already added the brand's classic Web Widget to your website or Help Center, you don't need to do take any action. The Web SDK replaces the classic widget when Zendesk messaging is enabled.

To add the Web SDK 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 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. Make sure your firewall is configured to allow the web widget to appear.

To add the Web SDK to your Help Center

• Click the Installation tab, then click the checkbox to Automatically embed Web SDK 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 SDK or social messaging channel where conversations with your business have already taken place, the full text of those conversations remains visible to them.