Help Scout | How To Create A “Beacon” (Website Help Widget)

In this post we will demonstrate how to create and customize a new Help Scout Beacon, how to configure Contact settings, how to add a Doc Site, how to show your profile image, and how to get the Beacon code for installing on your 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


In this Help Scout video tutorial we’re going to show you how to create a new Help Scout Beacon.

If you don’t have your free Help Scout account already created, please CLICK HERE to use our referral link and you will receive a free trial of Help Scout (no credit card required) and you will also receive a $50 discount on your plan.

After clicking our link, you’ll be on the main Help Scout page. Just click the “Try For Free” button to get started.


The Help Scout beacon creates a little “help” icon in the corner of your website, sales funnel or Shopify store.

When your website visitor clicks on that icon, they can get support from you in three different ways:

First, they can search your Knowledge Base Articles for answers to their questions before they have to contact you.

Second, they can use the Support Form to send you a support message.

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.


Click on “Manage” from the top navigation menu, then select “Beacons” from the drop down menu.

We won’t have any beacons showing up here since we haven’t created one yet.

  1. Create a new Beacon by clicking “Create a Beacon” button.
  2. Name the Beacon. We’re going to call our Beacon “WEBSITE BEACON”.
  3. Choose a color from the drop down options. If you want to match your Beacon color to your website or brand color, you can do so using the hex code field.
  4. Choose a default icon.
  5. Click “Next”.
  6. Leave the settings the way they are and click “Next”.
  7. This screen is where you can copy the HTML code for installing the Beacon. If you want to copy the code, and save it for later, all you have to do is click the “Copy” button.
  8. Click “Continue Editing” button.

Now we’re back on the Customize screen.

That’s it, your Beacon is created.

Next we’re going to customize the Beacon a bit further…


While you are still on the Beacon customize screen, over on the left click on “Contact”.

  1. Here you will see the option to switch on or off the live chat mode. You can switch that on, or leave it off if you don’t want to do Live chat right now.
  2. Scroll down the page to the section called “Contact Form”. This is where you can manage what is on your “Form”.
    Leave the top three settings switched on.
  3. Switch on the “Show Photos” option to have your image displayed on the Beacon. Please note that in order for your image to show up, you need to upload your image in the Profile Settings. Anytime you switch your profile image in Profile Settings, it will change it here inside the Beacon as well.
  4. Scroll down a little bit more to the “Chat” section.
  5. Leave the “Satisfaction Ratings” setting switched on. This will allow you to collect ratings from your website visitor after your chat session has ended.
  6. The next setting is “Email Transcript”. Leave this switched on as well. This will send a transcript of your conversation after the Live chat session is over.
  7. Make sure to click “Save” at the end of the page.


While you are still inside the Beacon settings, over on the left click on “Docs”.

Here we have the ability to enable our Document Site, also called a Knowledge Base Site.

This is where all of our help documents, or support articles are stored for people to search through when they need to find an answer to their questions.

Right now we don’t have any document sites created, so the system won’t allow us to switch this on at the moment.

All we can do is create a new Docs site, and then we can come back and here later and switch this on.


Okay, now let’s go take a look at how to get the Beacon code snippet to put on your website.

Follow these 2 steps while you are still in the Beacon Settings.

  1. Over on the left click on “Installation”.
  2. Click the “Copy” button to copy the code.

You can use the code now, or save it for later when you need to install it on your website at a different time.


Okay, that’s all there is to creating a new Beacon and getting it all ready to provide support to your website visitors.

If you’re still looking to get signed up for Help Scout, be sure to use our link and you will receive a $50 discount on your first bill. This makes your first year of Help Scout only $190 (or less than $16 per month).