Help Scout | Add “Beacon” To WordPress Website Using HFCM Plugin

In this article we are going to show how to use the "Header Footer Code Manager" plugin to add the Help Scout Beacon to all of the pages of your Wordpress website.

AFFILIATE DISCLOSURE: The links used on this page may be “affiliate links”, which means that we receive a commission if the link is clicked and action is taken. We only recommend products or services that are high quality, tested and approved. Our commission comes at no extra cost to you. Click HERE to read our full FTC disclosure.

Play Video

INTRODUCTION

In this article we are going to show how to use the “Header Footer Code Manager” plugin to add the Help Scout Beacon to all of the pages of your WordPress website.

WHAT IS THE HELP SCOUT BEACON?

After you install your Beacon Website Widget on your WordPress website, it will create a “Help” icon in the corner of your website that people can use when they need support.

You can setup the Beacon to help your customers get support in 3 different ways…

INSTANT ANSWERS
Activate your “Knowledge Base Articles” on the Beacon so that customers can find answers immediately, before they have to contact you.

SUPPORT FORM
The support form allows your customers to submit support messages that are delivered right to your Mailbox.

LIVE CHAT
When the “Live Chat” function is activated, you will be able to talk with your customers in real time. If you aren’t online, a support message will be sent instead.

HOW TO INSTALL THE BEACON TO YOUR SITE

There are 3 steps to complete:

  1. GET BEACON CODE FROM YOUR HELP SCOUT ACCOUNT
  2. INSTALL THE HFCM PLUGIN TO YOUR WORDPRESS SITE
  3. PASTE THE BEACON CODE IN A NEW HFCM SNIPPET

Let’s get started…

1. GET BEACON CODE FROM HELP SCOUT

HOW TO GET THE BEACON CODE:

  1. Click HERE to log into your Help Scout account.
  2. Click on “Manage” from the top navigation menu.
  3. Click on “Beacons” from the drop-down.
  4. Select your Beacon (there’s probably only one at this point).
  5. On the left click on “Installation“.
  6. You will see “Install Beacon for Web” and the HTML code.
  7. Click “Copy” button to copy the entire snippet of code.

2. INSTALL THE HFCM PLUGIN TO YOUR WORDPRESS SITE

Log into your WordPress dashboard.

  1. Click “Plugins” from the left-hand WordPress navigation menu.
  2. Click “Add new plugin”.
  3. Search the WordPress plugin directory for “Header Footer Code Manager” (created by 99robots).
  4. Click “Install” button, and then “Activate” button.

3. PASTE THE BEACON CODE INSIDE HFCM SNIPPET

  1. Point to “HFCM” from the left-hand WordPress navigation menu, then click “Add New Snippet” link.
  2. Give the Snippet a Name (ie. “Help Scout Beacon Code”).
  3. Snippet Type: HTML
  4. Site Display: Site Wide
  5. Exclude Pages: Choose any website page where you do NOT want to show the Beacon icon (ie. legal ages, etc.).
  6. Location: Header
  7. Device Display: Show on all devices
  8. Status: Make sure it’s “Active“.
  9. In the “Snippet / Code” area, paste in the Beacon code that you copied from your Help Scout account (see “STEP 2: GET BEACON CODE FROM HELP SCOUT ACCOUNT”).
  10. Click “Update” button to save the snippet.

To see all of your Snippets, click on the “HFCM” link from the left-hand menu. You will see the Help Scout snippet on your list. Click the “Edit” link of you need to make changes to your Help Scout snippet. Click “Delete” to remove the entire snippet from your website.

CONCLUSION

Using the Help Scout Beacon is just on of the ways you can collect support requests from your customers.

When you want to provide superior support for your customers, get started with Help Scout for free, plus get a $50 discount when you use our link.