How do I customize the Web Widget (Classic) in my help center using APIs?

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:

Screen_Shot_2022-01-10_at_10.40.51_AM.png
For more information on making customizations to the Web Widget (Classic) and the help center, see the articles: