https://github.com/helpscout/beacon-devtools
🖲 Beacon: DevTools
https://github.com/helpscout/beacon-devtools
beacon devtools javascript open-source react
Last synced: 9 months ago
JSON representation
🖲 Beacon: DevTools
- Host: GitHub
- URL: https://github.com/helpscout/beacon-devtools
- Owner: helpscout
- License: mit
- Created: 2018-12-12T02:33:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-12T18:03:20.000Z (over 2 years ago)
- Last Synced: 2025-10-27T19:49:53.923Z (9 months ago)
- Topics: beacon, devtools, javascript, open-source, react
- Language: JavaScript
- Homepage: https://beacon-devtools.pages.dev/
- Size: 950 KB
- Stars: 10
- Watchers: 7
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Beacon DevTools
> DevTools for Help Scout's Beacon Embed
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Development](#development)
- [In Browser](#in-browser)
- [Demo](#demo)
- [Props](#props)
- [beaconIds example](#beaconids-example)
- [Check out Beacon](#check-out-beacon)
## Installation
```
npm install --save-dev @helpscout/beacon-devtools
```
## Usage
### Development
```jsx
import React from 'react'
import BeaconDevTools from '@helpscout/beacon-devtools'
class MyApp extends React.Component {
render() {
return (
...
)
}
}
```
### In Browser
To add Beacon DevTools to your page, copy/paste the following snippet into your HTML:
```html
```
Alternatively, you can add this snippet:
```html
;(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)
})()
```
## Demo
Check out the demo on [Netlify](https://beacon-devtools.netlify.com/)!
## Props
```jsx
```
| Prop | Type | Default | Description |
| ---------- | --------------- | ------- | --------------------------------------------------- |
| isAutoOpen | `boolean` | `false` | Automatically opens Beacon on load. |
| beaconIds | `Array` | `[]` | A collection of Beacon IDs to load into a `select`. |
### beaconIds example
```jsx
const beaconIds = [
{ id: '...', label: 'My Test Beacon 1' },
{ id: '...', label: 'Production Beacon' },
{ id: '...', label: 'Marketing Beacon' },
]
// ...
```
## 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](https://www.helpscout.net/live-chat/)