By creating a Web Widget, you can offer messaging functionality to your customers through a website or help center. Accounts with multiple brands must enable a Web Widget on each brand they plan to use with messaging.
In this article, we'll describe the steps for creating a Web Widget in each of these scenarios, and provide an overview of the optional configuration settings you can apply to the widget.
This article includes the following topics:
- Creating a Web Widget for your account
- Creating Web Widgets for multiple brands
- Configuring your Web Widget
Creating a Web Widget for your account
To create a messaging Web Widget
-
In Admin Center, click
Channels in the sidebar, then select Messaging and social > Messaging.
A basic Web Widget named
Zendeskis created by default and appears in the Channels list. - Click the default widget in the Channels list.
- Under Start with the basics, if you support multiple brands, select a Brand, then confirm or change the Channel name.
- Click Next.
- Under Install on your site, copy the code snippet to paste in your website now, or click Email code to team member.
If you're not ready to install the widget, you can email the snippet to yourself or a team member to install later. If you're going to add the widget to a help center, you can do so after completing the onboarding tasks in this procedure.
- Click Next.
- Under Make it your own, configure these settings:
- Select a Primary color with the color picker or enter a hexadecimal number. This color is used in the Web Widget launcher and header.
- Enter a Title that will appear in the header.
- Upload an optional Logo.
- Click Next. To see an example of how your end users will view the widget, click Test it now. Click Done when you're ready to move on.
- The widget's edit page appears. From here, you can continue configuring the widget settings , or leave it as-is.
- Click Save.
If installed during the setup process described above, the widget is immediately functional on your website using the default messaging response. Otherwise, you can install the widget on your website, or in a help center, at a later date.
You can continue customizing your Web Widget in the following ways:
Creating Web Widgets for multiple brands
Messaging Web Widgets are enabled per-brand – that is, if you support multiple brands, you'll need to enable and configure a Web Widget for each brand you plan to offer messaging functionality on.
To turn on messaging for an additional brand
- In Admin Center, click Channels in the sidebar, then select Messaging and social > Messaging.
- Click the Add Channel button, then select Web Widget.
- In Start with the basics, select or change the Channel name, then use the drop-down to select a Brand. Only brands that do not currently have an active Web Widget appear in the Brand drop-down list.
- Click Next.
- In Install on your site, copy the code snippet to paste in your website or click Email code to team member.
If you're not ready to install the widget, you can email the snippet to yourself or a team member to install later.
- Click Next.
- In Make it your own, configure these settings:
- Select a Primary color with the color picker or enter a hexadecimal number. This color is used in the Web Widget launcher and header.
- Enter a Title that will appear in the header.
- Upload an optional Logo.
- Click Next. The Edit Web Widget page opens. You can continue configuring the widget settings here, or leave it as-is.
- Click Save Settings.
Repeat these steps for each brand that will be using messaging.
Configuring your Web Widget
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 as described above. More extensive configuration options can be accessed by clicking the tabs on the Edit Web Widget page for each widget.
Use the following links for more information on configurable widget elements:
- Configuring basic information for the Web Widget, such as channel name and linked social messaging channels.
- Configuring the appearance of the Web Widget, including selecting widget colors, adding a logo, and defining the widget launcher.
- Configuring messaging responses for the Web Widget, using business hours to create separate automated responses based on your agents' schedules, or upgrading to a bot responder.
- Authenticating end users and configuring conversation history, for increased security and agent effectiveness.
- Installing the Web Widget in a website or help center, if you haven't already done so.
19 Comments
How do you delete a messaging web widget?
Hi Walter,
By delete, do you mean remove the Web Widget listing from the Channels list in Admin Center? This isn't possible today but it's something that we are considering in the future.
If you want to remove the widget from your website, then you should delete the code snippet from loading on each page. This won't remove the listing from the Channels list though.
Thanks,
- Miranda.
Hey Miranda,
Thanks for the quick response!
Yes, that's what I meant. I was testing and now have a widget in my view that's obsolete but not a huge deal.
Thanks again.
Thanks Walter. Appreciate the feedback. This is something that we are hoping to address in the future (no timeframes that I can provide at this stage though).
- Miranda.
Can you change the height of the messaging web widget? For example, I notice on Zendesk site on mobile, the widget takes about half of the height in portrait. But on our site, the widget takes the entire viewport height.
If you are using the Web Widget, currently the customization is limited to the following:
Configuring the widget frame
Configuring the widget launcher
At this time it is not possible to change the size (height) of the Web Widget.
How can we hide 'Powered by Zendesk" message from the messaging web widget? The message wasn't there until today. Thank you
How do I change the offline message when the messaging bot can't connect to an agent? Right now it says "Hi there! Thanks for reaching out to us. We're offline right now, but we'll respond to your message when we're back online in a few hours" and we want to change it
Hi Gabriela,
If you are referring to the Zendesk logo in the messaging widget, you can uncheck the "Show Zendesk logo" found in the Admin Center > Messaging > Choose a widget > Style tab.
Hi Tyler Heckman,
You can change the All Agents Offline trigger in the chat dashboard.
For the main color of the widget bubble, how can we make the inside chat bubble icon/words be white instead of black?
Also, how do you change the icon or headshot that appears to the left of the agents responses?
Unfortunately, we don't have a native solution, except "Style" web widget option.
Technically, its possible to solve this task via some custom HTML/CSS/JavaScripting.
You should add a new CSS rules like that via your website DOM manipulations:
Have attached an example
Hope for your understanding
Thank you. But what about the icon/headshot to the left of agent responses? Can we customize this?
Yes, you can customize it natively via "Style" settings.
Just choose "Frame" -> "Position" -> "Bottom left"
Hope it helps
Is there a way so that the chat widget when opened that it doesn't cover the entire screen when on Mobile Devices (smartphones)
Hello, is it possible to send organization name and id in user token along user external_id, name and email, so Zendesk could recognise which organisation user belongs?
Example:
export interface ZendeskTokenPayload {external_id: string
email: string
name: string
scope: 'user'
organization: string
organization_id: string
user_fields?: {
role?: string
}
exp?: number
}
I've asked in the dev community about this but thought I might as well post here too. Is there currently any way to do version pinning when implementing the web widget on our site? (if we want to only use a certain version of the code)
Base on our article: Enabling authenticated visitors for messaging with Zendesk SDKs, it does show in the example that you can add the
external_IDHello,
I need some help please. I added the Web Widget to our Help Centre, but when customers send messages and all agents are offline/invisible, the messages are not converted into tickets and the chats from the customer's side remain open.
How can I set please the Web Widget to convert messages into Tickets. We do not wish to have live chat, but we want the web widget. In our other help Centre we had the Classic Web widget and that was doing it. Can you please advise how I can do it on the new plans.
Please sign in to leave a comment.