How do I customize the Web Widget in my Help Center using APIs?

Question

How do I customize the Web Widget in my Help Center using APIs?

Answer 

If you have the Web Widget embedded in your Help Center and you want to customize the settings of your Web Widget using the Web Widget API, you can do so by modifying your Help Center theme's header.hbs template file.

To add your custom Web Widget settings, follow these steps:

1. In Guide, click the Customize design icon ().
2. Click the theme you want to edit to open it.
3. Click the options menu, then select Edit Code.
4. In the Templates section, click header.hbs to modify the code.
5. Place the desired code below the first <header class="header"> line, and above the final header line.

For example, if you want to change the positioning of your Web Widget in your 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 header.hbs file:

 ​
For more information on making customizations to the Web Widget and your Help Center, see the articles:

• Advanced customization of the Web Widget
• Customizing your Help Center theme (Guide Professional and Enterprise)