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
- InAdmin Center, click
Channelsin the sidebar, then selectMessaging and social > Messaging.A basic Web Widget named
亚博is created by default and appears in the Channels list. - Click the default widget in the Channels list.
- UnderStart with the basics, if you support multiple brands, select aBrand, then confirm or change theChannel name.
- ClickNext.
- UnderInstall on your site, copy the code snippet to paste in your website now, orclick 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 toadd the widget to a help center, you can do so after completing the onboarding tasks in this procedure.
- ClickNext.
- UnderMake it your own, configure these settings:
- Select aPrimary colorwith the color picker or enter a hexadecimal number. This color is used in the Web Widget launcher and header.
- 在ter aTitlethat will appear in the header.
- Upload an optionalLogo.
- ClickNext. To see an example of how your end users will view the widget, clickTest it now. ClickDonewhen you're ready to move on.
- The widget'sedit pageappears. From here, you cancontinue configuring the widget settings, or leave it as-is.
- ClickSave.
If installed during the setup process described above, the widget is immediately functional on your website using the default messaging response. Otherwise, you caninstall 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 supportmultiple 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
- InAdmin Center, clickChannelsin the sidebar, then selectMessaging and social > Messaging.
- Click theAdd Channelbutton, then selectWeb Widget.
- InStart with the basics, select or change the Channel name, then use the drop-down to select aBrand. Only brands that do not currently have an active Web Widget appear in the Brand drop-down list.
- ClickNext.
- InInstall on your site, copy the code snippet to paste in your website orclick 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 toinstall later.
- ClickNext.
- InMake it your own, configure these settings:
- Select aPrimary colorwith the color picker or enter a hexadecimal number. This color is used in the Web Widget launcher and header.
- 在ter aTitlethat will appear in the header.
- Upload an optionalLogo.
- ClickNext. TheEdit Web Widget pageopens. You cancontinue configuring the widget settingshere, or leave it as-is.
- ClickSave 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使用业务小时创建单独的自动化d responses based on your agents' schedules, orupgrading 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.
17 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
HiGabriela,
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.
HiTyler 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)
Pleasesign into leave a comment.