Developer Docs

Embed widget

Installation guide


Using Beamer in your website is as simple as copying the default embed snippet from the Embed section in your Control Panel, and pasting it inside the <body> element of your website.

For your own site’s performance, you should paste this snippet at the very bottom of the <body>, so that the rest of your content is loaded first.

The embed snippet is composed of two parts:

  • Declaration of the beamer_config object, which contains your configuration parameters for Beamer.
  • Import of beamer-embed.js

Although we recommend pasting the script as shown in the Embed section (changing only the configuration parameters as you need), keep in mind that you can separate these two parts and declare the beamer_config object elsewhere in your site’s code. However, the declaration of the configuration object must always take place before importing the beamer-embed.js script.


Currently in development.



String. This code identifies your product in Beamer. The value shown in the Embed section already corresponds to your product, so it should not be changed. Required


String. HTML id for the DOM element to be used as a trigger to show the panel. Required, unless alert is set to false.


Number. Top position offset for the notification bubble. Optional (default: 0)


Number. Bottom position offset for the notification bubble. Optional (default: 0)


String. Retrieve only posts that have a translation in this language. Optional (default: EN)


String. Retrieve only posts with a segment filter that matches or includes this value (example: if a post has segment filters equal to ‘admin’ or ‘admin, user’, and this value equals ‘admin’, said post will be retrieved; otherwise, if this value equals ‘manager’, the post will not be retrieved). This parameter can include several filters separated by commas, which don’t need to follow any specific order (example: if the value for this parameter equals ‘admin,manager’, all posts with segment filters equal to either ‘admin’, ‘manager’ or both will be retrieved). Optional


Boolean. If true, the Beamer plugin won’t be initialized automatically: in this case, it will only be initialized once the static method Beamer.init() is called. If false, the plugin will be initialized automatically, binding the selector element accordingly. Optional (default: false)


Boolean. If true, the selector element will open the panel when clicked. If false, the selector parameter will be ignored, and the panel will only be opened programmatically via the static methods Beamer.show() and Beamer.hide() (however, these methods can be invoked regardless of alert‘s value). Optional (default: true)


Function. Function to be called once the plugin is initialized (automatically if lazy is false, or after calling Beamer.init() if lazy is true). The callback function can receive a single parameter with the number of new posts available (this number is the same shown over the selector element, when used). Optional


String. First name of the user currently browsing your site, to be shown in your accounts statistics. Optional


String. Last name of the user currently browsing your site, to be shown in your accounts statistics. Optional


String. Email of the user currently browsing your site, to be shown in your accounts statistics. Optional

Control Panel


In the Home section, you can see all of your product’s posts, ordered by publication date (the latest being above). From here, you can create new posts with the big red plus button on the top right corner of the page, or edit existing posts with the pencil icon on the top right corner of each post’s frame. With the trash icon, you can delete any of these posts.



In the User tab, you can configure your account’s personal information, such as email, password and position in your team.


In the Product tab, you can configure your product’s basic information, such as name, description and homepage URL.

You can also define a domain restriction for Beamer: If you insert a URL in this field, your Beamer plugin (more specifically, any Beamer plugin using your product’s code) will only work in the defined domain. By default, this field is blank, which means Beamer will work in any page with your embed snippet.

Finally, you can define whether you want your product’s post (as shown in the panel visible to users) to be indexed by search engines or not. By default, indexation is enabled.


Within the Team tab, you can invite new users to collaborate with your product’s posts, and modify their access roles as necessary.


In the Roles tab, all the roles for your team are listed. For each of these, you can enable or disable permissions associated with all the different actions a user in your Beamer account can perform, such as creating and publishing posts, accessing the appearance settings, modifying your account’s billing information, and more.

Once you modify a certain role’s permissions, this modification will apply to all users that have been granted that role.

The four basic roles have a set of permissions enabled by default, where the Manager role is the one with the most permissions, while the Read only role has no permissions enabled.

Keep in mind there is a fifth role that cannot be modified: the Administrator role, which has all permissions enabled. The original creator of the account is granted this role by default, but new users can be set as administrators as well.


Within the Appearance tab, you can modify the basic appearance of Beamer’s panel as shown in your site, such as background colors and font size. On the left, a quick preview is shown and updated in real time to visualize these modifications as you make them.

Custom CSS

For more advanced modifications, you can override Beamer’s predefined styles by adding CSS code in the Custom CSS tab. We recommend not to use this method unless you need to modify the panel’s appearance beyond what can be done in the Appearance tab. Keep in mind that some changes can be done to the panel in the future (more specifically, changes to the HTML content in it), which can cause issues with whatever custom CSS code you add here.



In the Languages tab within this section, you can select the default languages for which you will be creating translations when creating new posts. For example, if your target audience speaks English, Spanish, Portuguese and French, you’ll want to have these selected so that the next time you create a post, the tabs for each of these translations will already pop up for you to fill in. You can also order the languages, the first one being the default, so that when you create a post without a translation to a certain language, the language shown will fallback to said default.


In the Translations tab, you can modify the different default labels shown to users in the panel, such as your posts’ category names, and translate each of them to the languages selected in the previous tab.


Within the Embed section, you can copy the default embed snippet to insert Beamer in your site just by pasting it. In this snippet, you’ll notice some comments indicating all the parameters available for you to customize the plugin.

For more information on this, refer to the Embed snippet docs.

Beamer preview

When you click on the Beamer preview option in the menu, you’ll get to preview the panel just like your users will see it in your site.

Keep in mind that this is a preview mainly to get a sense of how it will look like (that is design-wise), and not necessarily of its’ content. This preview is how the panel would look like if you inserted the default embed snippet exactly as it is in the Embed section, without any of the parameters that you may use when inserting it in your site. So, for example, there will be no filter parameter applied in this preview. Therefore, the posts shown in this panel may or may not be the same all your users when they open the panel in your site, depending on your configuration.


In the Billing section, you can first take a look at the available billing plans for your Beamer account, with all the features included and their price. Once you select a plan, you can insert or modify the information of the credit card with which you’ll be paying for the service.

Currently, we support payments from most credit cards and banks. However, if you experience any issues when trying to update your billing information, please contact us through our support chat to get quick assistance.


In the Analytics section, you can get an insight on how you are reaching your users with Beamer. Browsing through the tabs, you can get to know how many total visitors, unique visitors, total views, unique views and clicks your posts had between two dates.

This data is summarized in a line chart on top to get a quick view, but you can get more precise information on your visitors in the table below this chart, where you can see each visitor’s first and last view, their geographical origin, their browser, the number of impressions, and more. You can also sort and search the table by any of its columns, and modify the time range you’re interested in.


In the Feedback section, you can get an insight on the feedback comments received in all your posts.

Post creation



On top of the editor you’ll see one or more tabs labeled with the default languages selected in the Languages section of the Control Panel. When clicking on each of this, you’ll be able to write and edit the title and content of the post for each of these languages separately. If you want to clear all text within one of these tabs, simply click the Clear button at the bottom of the editor.Keep in mind that if you leave one or more of these tabs empty, the post will not have a translation associated to the corresponding language, and users with said language will not see this post. This can be used as a way to segment your content.

Publication date

Below the translation tabs you’ll find a date input, with a default value of the current day: this will be the publication date of your post. If left unchanged, your post will be pushed instantly (as long as you Save and publish it). If set to a later date, the post will only show up to users from that date onwards.


On the right, a dropdown menu will let you select this post’s category. By default, the category of a post within Beamer’s panel is shown at the top left corner, right before the publication date, with a coloured label.

Apart from a set of pre-defined common categories, you can define a custom category for your posts by selecting Other in the dropdown menu.


This will be the title of your post, shown on top of it, below the category and publication date.


This will be the body of your post. Within the content editor you can write plain text or give it some format just like you would in your average text editor. But you can also add a lot more content: Clicking the big + button shown right next to your cursor will open the embed menu.

Inside the embed menu, clicking on the camera icon will let you upload images and gifs right into the text editor. Clicking on the video button right next to it will let you embed not only videos (from YouTube, Vimeo and more), but also content from Twitter, Instagram or Facebook, by just pasting the URL right into the editor. After pasting the URL, simply press enter to load the content in the editor.


Below the content editor you’ll find two inputs prompting you to insert your link’s URL and text. If you fill these inputs, a link will be shown below the body of your post, redirecting to the inserted URL and showing the inserted text. For example, this can be useful if you want to redirect your users to another section of your website in relation to the post they’ve just read.

Segment filters

This value is directly related to the filter parameter for the embed script. If you want a post to only be visible to some of your users, you can use these.

For example, let’s say you only want a post to show up to your ‘administrator’ users: First step would be to make sure that, when loading your website for an administrator user, you initialize Beamer’s embed script with some value in the filter parameter. In this case, you’d pass in the string ‘administrator’. After this, you’d only need to write that same value (‘administrator’) inside the Segment filters input in your post editor, whenever you want a post to only be visible to administrators.

Keep in mind that you can use more than one segment filter in your posts, simply by separating each value with a semicolon (‘;’) character, in the same way you can do it for the filter parameter for the embed script.

Prioritary posts

If the Mark as priority option is checked, the post will be saved with. The next time a user loads your website (and with it, Beamer), if that user has access to this priority post, the Beamer panel will open automatically to show this post. This behavior will only take place the first time, so once a user has seen the post, the panel will not open again automatically (unless a newer priority post is created);


Hidden comments

With hidden comments, you can allow your users to send you feedback by commenting on a post. These comments are ‘hidden’ since users won’t be able to see others’ comments, while you will be able to see them all.

When creating a post, check the Hidden comments option to enable the comment input below the post shown to users in the Beamer panel.


With reactions, users have a quick and simple way to provide feedback to your posts. With three emoji-shaped buttons, your users can send a ‘good’, ‘neutral’ or ‘bad’ reaction to a post. This can provide you some quick insight from more users that may not be willing to go as far as actually writing a comment.

When creating a post, check the Reactions option to enable the buttons below the post shown to users in the Beamer panel.

Visualize feedback

For feedback-enabled posts, you can get a closer look on your users’ comments and reactions by clicking on the stats shown below the post within the Home section.