Installing Beamer means adding one snippet to your site. This article covers the standard install and points you to the guide for your specific setup.
Get your embed snippet
.png)
Go to Embed code in your Beamer dashboard by hovering over your profile.
Copy the snippet shown there. It already contains your Product ID.
The snippet has two parts: a beamer_config object holding your configuration, and the import of beamer-embed.js.
Add it to your site
Paste the snippet inside the <body> of your page, at the very bottom, so the rest of your content loads first.
You can split the two parts and declare beamer_config elsewhere in your code if that suits your setup better — but beamer_config must always be declared before beamer-embed.js loads. If it isn't, Beamer won't pick up your configuration.
That's the whole standard install. Reload your site and the Beamer widget appears.
Attach Beamer to your own button or menu item
If you'd rather trigger Beamer from an existing element instead of the default button, give that element the class beamerTrigger. Any element with that class opens the Beamer widget on click and shows the unread bubble. See How to add Beamer as a menu item using our script?
Adding your own button does not remove the default one. The floating Beamer button keeps rendering unless you switch it off, so you'll end up with two ways to open the widget on the same page. To hide the default button, set button: false in beamer_config:
var beamer_config = {
product_id: "YOUR PRODUCT ID",
selector: "yourButtonId",
button: false
};Your own button keeps working. button: false only affects the default floating one.
Opening Beamer from another tool's interface
If you're opening Beamer from somewhere you don't fully control — a resource center, a help menu, another product's widget — you're not binding a button at all, you're calling Beamer directly. That needs one more parameter:
button: falsehides the default floating button.alert: falsestops Beamer binding any element and hides the unread badge. Use this only when nothing on your page should open the widget on click.Beamer.show()opens the widget whenever your own code calls it.
var beamer_config = {
product_id: "YOUR PRODUCT ID",
button: false,
alert: false
};
// then, from your own trigger:
Beamer.show();Don't set alert: false if you're using your own button. It removes the binding that makes your button work. It belongs only in the programmatic case above.
If Beamer shouldn't load at all until the user acts, add lazy: true and call Beamer.init() first. See Enable the auto-open widget for your posts. For every available parameter, see Beamer Developer Documentation.
Installing on a specific platform or framework
Setup | Guide |
|---|---|
WordPress | |
Vanilla React | |
Vite + React | |
Next.js | |
Not a web app, or no third-party scripts allowed |
Configuration parameters
The snippet accepts parameters for display position, segmentation, language, lazy loading, and user data. For the full list and what each one does, see Beamer Developer Documentation.
It's installed but nothing is showing
See Troubleshooting: the Beamer widget isn't appearing on my site.