Advanced Beacon Customization

You can easily add Beacon to your website or web based app with the default embed code — all you have to do is copy and paste. That adds the widget to your page, you can adjust the basic look and feel in Beacon settings, translate the text labels, and enable or disable any Beacon features without having to change the installation or know any code.

Do you want to do even more with Beacon? Let's do it! The Beacon JavaScript API allows you to customize your Beacon implementation on the web, and the SDKs for both iOS and Android give your developers tools to add Beacon to your mobile apps.

In this article we will offer some ideas on ways you can use the JavaScript API to customize your Beacon implementation, but these definitely don't cover all you can do! In some of these cases we're able to offer quick code snippets as examples, and you're welcome to copy and paste these snippets into your own website or web app to use.

For further customization, coding out the bits you can't copy from here, or using the SDK in your mobile apps, you'll want to reach out to your own web and app development teams to take things from there (if you're not a coder yourself)!

Use identify to Send Customer Data

The Beacon JavaScript API includes the identify method, a powerful little tool you can use to connect your site or app and send customer information to Help Scout and implement your Beacon using secure mode.

Use identify attributes to create and/or update the Help Scout Customer Profile with the information your site or app knows about your customers. The name , email , company , jobTitle , and avatar attributes are all available to Beacon.

When you include name and email in your identify code, Beacon won't ask for that on the Send a Message screen if you're using the contact form. This keeps your customer from having to answer the information you already know about them.

You can also populate Customer Properties with identify! Create your Customer Property in Help Scout first. The Property ID you create then is the name of the attribute you'll pass in with identify.

Use a Custom Button or Link to open Beacon

You can create a menu item or a custom button that your visitor needs to click to open Beacon in your site or app rather than having it open automatically. For an example of this in action, just head into Help Scout itself and click the question mark icon, then Get Help. You'll see our Beacon open in the bottom corner.

To make this happen in your site or app, it's just a couple of easy steps. In your Beacon settings, change the button style to Hidden.

Then use the link snippet that is calling the Beacon open method below as your link for your button or text that you want to open the Beacon.

<a href="#" onclick="Beacon('open');">LINK TEXT or IMG SRC HERE</a>

Use navigate to Open Beacon to a Specific Screen

Perhaps you would like to have your visitors respond to a call to action and open the Beacon then. That's a snap to do with open and navigate! For example, if you wanted a link to open Beacon to the Send a Message screen directly, you'd just use this code snippet as your link:

<a href="#" onclick="Beacon('open'); Beacon('navigate', '/ask/message')">Send us a Message</a>

When your visitor clicks that link, the Beacon would open right to your Send a Message screen. Check the developer documentation for all of the available routes you can take with navigate.

Turn Off the Beacon Pulse Animation

Beacon has an animation that calls attention to itself the first time it loads for a visitor — that little pulse of color behind the Beacon button. 

We like that it calls attention to itself the first time it loads, but maybe you'd like for your Beacon to load a little more quietly. Sure thing! Just add this snippet after your Beacon installation code to turn it off, or incorporate your own Beacon config call in your code:

<script>Beacon('config', {enableFabAnimation:false} );</script>

Add Actionable Notes With session-data

Any conversation that starts in Beacon — emails sent with Send a Message or chat transcripts — will carry a note with more information about the visitor. This note contains details about the visit, such as their IP address, operating system, the Beacon ID, and more.

You can add more to that note using session-data, then use Workflows to find and take actions on that information too! For example, if you wanted to record the version of your app your visitor is using and the last action they took, your code could send those two pieces of information in.

This would surface in the note in any email conversation or chat transcript that comes in from that Beacon implementation.

To find conversations with those added details, you can use the Search to look for your custom session data. For our example then, you'd search for "Last Action Update Profile" (with the quotes) and you'll find all conversations that include that session data. Use a Workflow condition of If Note Contains with Last Action Update Profile (without the quotes this time!) to take actions on those conversations.

Hide Beacon from Your Website on Mobile Devices

Use Beacon config to hide the Beacon when your site is being viewed on a mobile device.

<script>Beacon('config', {hideFABOnMobile:true} );</script>

If you're using an icon + text to display your Beacon, you can also choose to just hide the text on mobile for a better mobile experience.

<script>Beacon('config', {hideFABLabelOnMobile:true} );</script>

Disable Beacon Notification Sounds

Beacon plays a notification sound whenever a visitor receives a reply to a live chat or a Message appears, but perhaps you'd like it to be a bit quieter. Just add this snippet after your Beacon installation code to turn off all sounds from the Beacon, or incorporate your own Beacon config call in your code.

<script>Beacon('config', { enableSounds: false })</script>