Beacon DevTools

DevTools for Help Scout's Beacon Embed

Table of contents

• Installation
• Usage
  • Development
  • In Browser
• Demo
• Props
  • beaconIds example
• Check out Beacon

Installation

npm install --save-dev @helpscout/beacon-devtools

Usage

Development

import React from 'react'
import BeaconDevTools from '@helpscout/beacon-devtools'

class MyApp extends React.Component {
  render() {
    return (
      <div>
        ...
        <BeaconDevTools />
      </div>
    )
  }
}

In Browser

To add Beacon DevTools to your page, copy/paste the following snippet into your HTML:

<script
  crossorigin
  src="https://unpkg.com/@helpscout/beacon-devtools/dist/beacon-devtools.umd.js"
></script>

Alternatively, you can add this snippet:

<script>
  ;(function() {
    var u =
      'https://unpkg.com/@helpscout/beacon-devtools/dist/beacon-devtools.umd.js'
    var s = document.createElement('script')
    s.type = 'text/javascript'
    s.charset = 'utf-8'
    s.src = u
    document.body.appendChild(s)
  })()
</script>

Demo

Check out the demo on Netlify!

Props

<BeaconDevTools />

| Prop | Type | Default | Description | | ---------- | --------------- | ------- | --------------------------------------------------- | | isAutoOpen | boolean | false | Automatically opens Beacon on load. | | beaconIds | Array<Object> | [] | A collection of Beacon IDs to load into a select. |

beaconIds example

const beaconIds = [
  { id: '...', label: 'My Test Beacon 1' },
  { id: '...', label: 'Production Beacon' },
  { id: '...', label: 'Marketing Beacon' },
]

// ...

<BeaconDevTools beaconIds={beaconId} />

Check out Beacon

Beacon is way more than chat.

Say farewell to overwhelming chat volume, staffing nightmares, and frustrated customers abandoned in chat windows. Ready to make your website more helpful?

👉 Check it out