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.
We are proud to announce that our WordPress plugin is now available!
Although we are still waiting for the approval process to be done before the plugin becomes available in the WordPress Plugin Directory, you can already install our plugin. Just follow this quick guide to get Beamer going on your WordPress page!
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. Optional
The simplest way to use the selector parameter is to pass in the element ID of the HTML element that you want to use as a button to open up the panel, and over which the notification bubble will be rendered.
For example, if you have a menu on your site, and one of the options in it has HTML code like this:
<div id="beamerButton">What's new</div>
You can simply use the selector parameter like selector: ‘beamerButton’, and that’s it! Clicking on that element will open the panel.
It is not necessary to put in any element ID for Beamer to work on your site. If you don’t add any element ID by default Beamer will show a notification icon in the bottom-right corner of your page (preview in your account in the Appearance tab in Settings).
If you want to have a custom menu item for your users to open Beamer you need to add that to your website, assign the menu item an ID to identify it and then send that ID to Beamer’s script via this parameter. If using WordPress, ID will be assigned automatically.
But remember that is optional – you are free to not put any element ID and Beamer will automatically add a nice looking icon for you.
Apart from passing in a single id, you may want to select your button by its HTML class, select more than one button or a combination of both!
If you want to select an element by its class, simply add an initial dot ( . ) to your selector. So for example, if you have a menu on your site, and one of your options has HTML code like this:
<div class="beamerButton">What's new</div>
You can use the selector parameter like selector: ‘.beamerButton’.
Keep in mind that if more than one elements share the same class you are selecting, all of them will be initialized as buttons and will open the panel.
If you want to use multiple selectors to select more than one button, separate them with commas ( , ).
To combine IDs and classes in your multiple selector, add an initial hash ( # ) before each id. Your selector parameter would look something like this: selector: ‘#beamerId, .beamerClass’.
String. Side on which the Beamer panel will be shown on your site. Possible values are ‘left’ and ‘right’. Optional (default: ‘right’).
Number. The top position offset for the notification bubble. Optional (default: 0)
Number. The right position offset for the notification bubble. Optional (default: 0)
Number. The bottom position offset for the notification bubble. Optional (default: 0)
Number. The left position offset for the notification bubble. Optional (default: 0)
String. Position for the notification button (which opens the Beamer panel) that shows up when the selector parameter is not set. Valid positions are ‘top-left’, ‘top-right’, ‘bottom-right’ and ‘bottom-left’ Optional (default: ‘bottom-right’)
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 semicolons (‘;’), 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
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 on 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 on 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 of 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 on 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.
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 reorder the languages, the first one being the default language, so that when you create a post without a translation to a certain language, the language shown will fallback to said default.
When a post is shown to your user, this is the way Beamer will select the translation to show:
- If the language parameter is set in the embed script, the post will show that language’s translation, if available.
- If no language parameter is set, Beamer will detect the user’s browser language and show the matching translation for it, if available.
- If no translation is available for this user’s language, the translation to the default language will be shown
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.
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 for all your users when they open the panel on 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.
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 with the corresponding language, and users with said language will not see this post. This can be used as a way to segment your content.
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 drop-down 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 colored label.
Apart from a set of pre-defined common categories, you can define a custom category for your posts by selecting Other in the drop-down 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.
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.
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);
User Engagement and Feedback
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.
For feedback-enabled posts, you can get a closer look at your users’ comments and reactions by clicking on the stats shown below the post within the Home section.
We just launched a beta version of our API and Zapier integration. Hooray! We are looking for users to help us test and improve it. Be part of it!
If you need help installing Beamer, follow one of our how-to guides:
- How to install Beamer on your website or app
- How to use Beamer as a WordPress Plugin?
- How to add Beamer to Squarespace
- How to use Beamer with Simvoly web builder
We have a topic focused Help Center with the most common questions we receive.