After enabling messaging, you can configure the appearance of the web messaging channel, as well as other settings, via Admin Center, then embed Zendesk on your website.
If you have multiple brands, you can select one or more on which to deploy the web channel. If a brand has an existing Web Widget, you can convert it to a messaging web channel. If a brand is not currently using a Web Widget, you can create a web messaging channel from scratch.
This article includes the following topics:
You can also activate messaging on an Android or iOS app.
Activating messaging for a website or Help Center
You can activate messaging for your website or Help Center by creating a web messaging channel. Messaging must be activated for each brand that will use the channel. Any brand without messaging activated will continue to use the classic Web Widget if one was previously enabled. If you’re enabling messaging on a brand without a previously enabled Web Widget, you’ll need to create a web messaging channel from scratch.
To enable messaging for a website or Help Center
- In Admin Center, click the Channels icon (
) in the left sidebar. Your active channels appear. - Click the brand you want to activate.
- On the brand's Edit Web SDK page, check Enable messaging for this Web SDK.
- Customize the Web SDK or, if you want to do this later, click Save settings.
- Repeat these steps for each active brand you want to use with a Web channel.
Creating a new web channel
If you want to add a new web messaging channel, you’ll need to create a channel and assign it to the brand before you can customize and configure it.
To create a new web channel
- In Admin Center, click the the Channels icon () in the left sidebar.
- Click the Add Channel button, then select Web.
- 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 messaging channel 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 channel. See The Installation tab for more information on adding the channel to your website or Help Center.
- Click Finish. The Edit Web SDK page opens, where you can continue configuring the web channel, 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 channel
As with the classic Web Widget, the web messaging channel includes multiple components that you can customize to best represent your business. Make sure you have enabled the web channel before starting the customization process.
To configure the web messaging channel
- In Admin Center, click the the Channels icon () in the left sidebar.
- 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 (channel name and flow)
- Style (web channel 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 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
- 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 channel.
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, 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
To add the web messaging channel 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 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 SDK to your Help Center
- Click the Installation tab, then click the checkbox to Automatically embed Web SDK in your Help Center.
Moving from classic Web Widget to the Web messaging channel
When you enable messaging in the web channel 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 channel 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 messaging channel 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 messaging channel replaces it.
There is some Web Widget functionality that is not available in the web messaging channel currently:
- Talk is not enabled in the Web SDK. 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 Web SDK and let us know of any issues.
About Conversation history
If you choose to enable the Conversation history feature for your customers, when an end user returns to the web messaging channel where conversations with your business have already taken place, the full text of those conversations remains visible to them.
24 Comments
I'm super excited about this new feature but I did want to ask: It says to paste the code on the page you want to use the messaging feature on but what if you want people to be able to access it on every page? Also, a true chat system gives you the options to have a " chat" pop up on a specific web page depending on some rules you make so would that be a possible option with the " flows" in messaging?
For example: If I have a customer browsing a page with " universal fitment" items and I want a chat to pop up and help them on that page, is that something I could build with messaging?
Is there any way to hide/show the widget? It appears the original web widget javascript methods (https://developer.zendesk.com/embeddables/docs/widget/core#hide) do not work with this new messaging widget.
Hi Erik Fantasia,
Not as yet but we are working on it. They should be available in the next couple of weeks!
- Miranda.
Previously with chat, the chat would disengage at our closing time, letting people know that we were not available and allowed them to email a request. With the messenger is there a way to do that? We turned it on initially and after our normal chat hours closed, people were still able to try to talk to a human, even though nobody was online in chat. Any way to do updates based on whether or not there is someone to serve them, or (even better) based on what time it is?
Hi @...,
1. If you're using the Zendesk Web Widget today, there's no need to change the script in order to use messaging. You'll just need to enable it within your Admin Center. If you're hoping to use it on every page, then you'll need to have the snippet load on every page of your website.
2. Proactive messages are something that we're currently thinking about. It isn't available within messaging today but it's something on our radar. If you have any specific feedback to pass along, please submit it to our feedback portal for future consideration.
Thanks,
- Miranda.
As Troy Willcox mentioned we don't want this happening either and we do not want to use answer bots for after hours.
Commenting again to bring visibility back: When the agents are offline we do not want the chat option to be there, or have the Icon even show, Is this something we would be able to set up with scheduling?
Hi Megan,
You can create an out-of-office message using Chat triggers to send an automated message when agents are offline. You can see how to set up this here.
Thanks,
Rajat
Hi, how i can change the avatar or the name of the bot, when i use the Web SDK messagin?
This isn't possible at the moment Benjamin Krause. The ability to customize the Answer Bot name of avatar is a feature we're planning to add in the future, however no ETA at this time.
Hi Benjamin Krause - quick follow up. What's currently more important to you: changing the name or changing the avatar? And would you say that this is a blocker for you deploying the web SDK and messaging experience, or just nice to have?
Hi there! I'm working with the new Zendesk Messaging Widget. I don't know how to offer my ticket form now I'm using this feature. Can you help me?
We have a similar bot through Gainsight PX on our product. We're interested in potentially including this in our own products, but I have a few questions:
Follow up on the potential Gainsight PX integration:
Another question now that I'm thinking about it:
Hi Dayana, with the messaging flow there's no option to present the user with a contact form.
Hi Anna Roussanova, I had the same question. We like messaging because it's a better experience with AnswerBot but would still much prefer to direct the customer to a web form, not a chat/messaging conversation. Any plans to add this in the future?
Is there a way to provide any user specific data to the web chat widget? I would like to be able to at a minimum initialize it with the user id or perhaps the email address we have on file.
Any news on ways to hide/show the widget? The original web widget javascript methods (https://developer.zendesk.com/embeddables/docs/widget/core#hide) still do not work with this new messaging widget?? I need to show it only on certain pages in our Angular SPA, so "Add the code to every web page where you want the widget to appear." isn't a solution for us - we need to show/hide it based on current SPA route.
One more question: is it possible to test the switch from classic widget to the new messaging widget without turning it on on production, so we can test and adjust its look and make sure hiding/showing it works as expected, that it doesn't cover any website buttons, etc? Or is that only available with the "sandbox" feature on the most expensive Suite Enterprise (we currently have Suite Professional)? Thank you.
Same question as Ivan Lovrić, what is the status for supporting javascript for messaging? We would like to hide the web channel for certain pages on our website. This was possible with the classic web widget, and unfortunately, this didn't work when enabling messaging.
This means that we cannot go further with messaging, while we are so excited to use this. It makes the application unuseful. I hope that you have a solution soon!
Natasha Heiner and Ivan Lovrić I have the same issue, and I managed to make it show/hide by calling these lines:
Hope it helps!
Igor Anicic by setting cookies?? :confused:
We actually contacted support and they told us showing/hiding the new messenger widget using the new web sdk is not yet possible, just opening/closing it (I assume that means the widget icon is always visible, you can just open/close its popup chat window via JS)...
Ivan Lovrić Maybe the zendesk team can explain it why setting cookies is needed, although I can't find any cookie being added/updated once I run this command.
Give it a try in the browser console and see if you can get some results.
I had exact same issue as you did, needed to hide/show the widget within specific routes, and this was the only thing that actually worked for me.
Here's the link where I got this info.
If you disallow cookies, it will hide the chat. Once you re-enable them, the chat will appear again.
https://developer.zendesk.com/documentation/zendesk-sdks/sdks/web/sdk_api_reference/
I have a similar problem with this new version. After an end user completes the contact wizard (in passing, the option to load data into a wizard is awful), there is no way for the flow to restart again. The only option they told me is to close the browser window and go back in. (When I said that to our client, I almost had to pay him to accept Zendesk as a product to manage his help desk).
Eternally the widget stays in that position. Rain dance through or dance with wolves is the same, I have no way of restarting or restarting the chat (as if you do it here with the Start Over button)
Beyond the lyric as a joke, the reality is that I do not know what to respond to the client, it is clear that closing the tab, restarting your browser or asking you to delete your cookies I cannot tell you (was the answer that they gave me in the Zendesk support ).
Do you know of any other way to force the chat restart after loading the contact form data?
Thank you very much in advance.
Please sign in to leave a comment.