Question
How can I customize the Web Widget (Classic) in my help center using APIs?
Answer
If the Web Widget (Classic) is embedded in the help center, customize its settings using the Web Widget (Classic) API by modifying the help center document_head.hbs template file.
To add the custom Web Widget (Classic) settings
- In Guide, click the Customize design icon (
). - Click the theme you want to edit to open it.
- Click the options menu, then select Edit Code.
- In the Templates section, click document_head.hbs to modify the code.
- Place the desired code below the first
<header class="header">line, and above the final header line.
For example, to change the positioning of the Web Widget (Classic) in the help center, use this API setting:
<script type="text/javascript">
window.zESettings = {
webWidget: {
offset: { horizontal: '100px', vertical: '150px' }
}
};
</script>This is what this should look like in the document_head.hbs file:
For more information on making customizations to the Web Widget (Classic) and the help center, see the articles:
5 comments
Casey Keefe
Hi Zendesk - In partnership with our Premier team, we have identified that something in our theme (Mink) is preventing the customization of Web Widget. This was determined by plugging the code into the ZD Copenhagen theme where the customizations were able to be applied.
Question now is - does anyone have any suggestions on what JS in the theme might be preventing the API calls to the Web Widget? You can view our current Help Center here. Thanks!
0
Casey Keefe
Thank you Gab
Upon further investigation and working with our ZD engineers, it looks like some of these customizations are no longer available now that we have ZD Messaging deployed on the backend (but not yet enabled on the frontend).
0
Gab
Yes, that's definitely possible! There are a wide variety of ways to customize the look and feel of the Web Widget (Classic). Some are built in functionality, and even more options appear when you start working with custom code and the API.
Here are some resources to get you started:
0
Casey Keefe
Hi Zendesk - I am attempting to customize Web Widget for a Brand under our main account (in order to differentiate the Brand), but unfortunately none of the window.zESettings API calls are working for me. At this time, I am trying to change the name of the Title in the Widget as well as the bot icon (please see screen). The Main Zendesk account is currently running Web Widget. The Brand's Web Widget appears the same, with the exception of the yellow theme color:
Is it possible to customize the Brand's Widget? Thanks!
0
Shawn
Hello,
Is this the only method to use use the APIs in the Help Center Web Widget? Looks like editorial access to header.hbs requires Pro or Enterprise level plans. Ideally from a UI and controls prospective it would seem to make more sense that admins should be able to do this via the 'Setup' tab under Channel/Widget since there is an interactive input field here but no way to save changes. Putting in a feature request for this.
Thanks
1
Sign in to leave a comment.