Help Scout Beacon Demo Page

This page will help you add the Help Scout Beacon (the helpful contact form widget) on a page and create links for it.

Adding the widget to a page

To add the widget to a post, edit the post and look for the following option
Additional fields for posts and pages -> Add Help Scout beacon

When you select that, an additional field will show that’ll allow you to include page specific information with the customer message.

Creating links to control it

You can open, close, and toggle the widget with links on the page. To do so, you’ll need to add certain values to the class attribute of the link. You should also set the link to a hash “#”, since we need a value but we don’t care what that value is. Below are examples.

This will open the beacon

This will close the beacon

This will toggle (open/close) the beacon

The code for the links above

<a href=”#” class=”hs-beacon-open”>This will open the beacon</a>

<a href=”#” class=”hs-beacon-close”>This will close the beacon</a>

<a href=”#” class=”hs-beacon-toggle”>This will toggle (open/close) the beacon</a>