How to install Beamer on your website or app?

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

1. Go to Embed code in your Beamer dashboard by hovering over your profile.

2. 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: false hides the default floating button.

• alert: false stops 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.

Opening Feedback and Roadmap from your own trigger

Beamer.show() opens the Changelog only. To open the other surfaces, call them directly:

Beamer.show()              // opens the Changelog
Beamer.showIdeas(true)     // opens Feedback
Beamer.showRoadmap(true)   // opens the Roadmap

Enabling Feedback and Roadmap in your settings makes them available. It does not change what Beamer.show() opens. If you are triggering Beamer from your own button, a menu item, or another tool's UI, call the method for the surface you want.

Disabling the Changelog is also surface-specific. Turning the Changelog off under Settings > Widget > Buttons & Triggers hides the Changelog on both the widget and the standalone page. Feedback and Roadmap stay available and can still be opened with the methods above, as long as their own visibility is still switched on.

One thing to know before you do it: disabling the Changelog turns off all Changelog features, not just whether it is visible.

The full list of methods is in the Beamer Developer Documentation.

Installing on a specific platform or framework

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.

Content Security Policy (CSP) and allowlisting

If your site uses a Content Security Policy, or a firewall or proxy that blocks unknown domains, allow these domains so the widget can load:

• app.getbeamer.com

• backend.getbeamer.com

• push.getbeamer.com

• realtime.getbeamer.com

• errors.getbeamer.com

• logs.getbeamer.com

They cover loading the widget, API requests, real-time updates and error logging.

The widget always calls these getbeamer.com domains directly. It can't be served through a reverse proxy, and a CNAME doesn't work with it. Only the standalone page can use your own domain. See Using a custom domain for standalone pages.

If your policy doesn't allow inline scripts or styles, use the API install with a secure iframe instead. It doesn't rely on inline scripting or styling. It does need some development work on your side. See How to install Beamer using our API?

It's installed but nothing is showing

See Troubleshooting: the Beamer widget isn't appearing on my site.