Embed Widget

Installation guide

Websites

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.

If you need help follow this easy step-by-step guide (we also have guides specially for WordPress, Squarespace and Simvoly users).

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.

<script>
	var beamer_config = {
		product_id : "YOUR PRODUCT ID",
		selector : "YOUR SELECTOR",
		display : "right",
		top: 0,
		right: 0,
		button_position: 'bottom-right',
		language: 'EN',
		filter: 'admin',
		lazy: false,
		alert : true,
		callback : your_callback_function,
		//---------------Visitor Information---------------
		user_firstname : "firstname",
		user_lastname : "lastname",
		user_email : "email"
	};
</script>
<script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js" defer="defer"></script>

WordPress

We are proud to announce that our WordPress plugin is now available! If you need more information just follow this quick guide to get Beamer going on your WordPress page!

Download the plugin

Parameters

product_id

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

Important: The product ID is the unique identification code that appears in the top bar of your Beamer Dashboard

selector

String. HTML id for the DOM element to be used as a trigger to show the panel. Optional

Basic use

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.

Advanced use

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’.

If no selector is passed the default button will be shown instead.

display

String. Display option for the embedded feed. Possible values are ‘left’, ‘right’, ‘popup’ and ‘in-app’.
For the default sidebar display, possible values are ‘left’ and ‘right’. This will be the side of the screen on which the sidebar will be shown.
 
Using ‘popup’, the feed will show up in a floating, rounded container automatically positioned depending on where the selector element is placed.
 
Using ‘in-app’, the feed will show up in a smaller floating container positioned automatically next to the selector element. This feed will show a shortened version of the posts when first opened, where the full content of a post is shown with an animated transition if its short version is clicked on. This display option can be used in combination with the display_position parameter. Optional (default: ‘right’).

display_position

String. (Only applies when using display: ‘in-app’) Fixed position for the in-app display, relative to the selector element.
 
Possible values are ‘top’, ‘top-left’, ‘top-right’, ‘right’, ‘right-bottom’, ‘right-top’, ‘bottom’, ‘bottom-left’, ‘bottom-right’, ‘left’, ‘left-bottom’ and ‘left-top’. Optional (default: the feed will be positioned next to the selector element, on the side where the most space is available).

top

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

right

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

bottom

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

left

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

Important: The parameters top, right, bottom and left will offset the position of the alert counter. If no selector is passed the offset will be applied to the default button including the alert counter.

embed

Boolean. If true, Beamer’s feed will be embedded and displayed inside the element selected by the selector parameter. The feed will resize to fit its container. Optional (default: false)

button

Boolean. If false, the default button will not be shown, even if no selector parameter is specified. Optional (default: true)

button_position

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’)

icon

String. Alternative icon to display in the notification button. Valid icons are ‘bell_full’, ‘bell_lines’‘flame’‘flame_alt’‘alert_bubble’, ‘alert_circle’‘bullhorn’ and ‘thumbtack’ Optional (default: ‘bell_full’)

notification_prompt

String. Override the method selected in Settings to prompt users for permission to send them web push notifications. Valid options are ‘popup’ and ‘sidebar’. Optional

notification_prompt_delay

Number. Delay (in milliseconds) before showing the web push notifications prompt. Optional (default: 0)

language

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

filter

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

mobile

Boolean. If false, Beamer will not show up on mobile devices. Optional (default: true)

lazy

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)

alert

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)

delay

Number. Delay (in milliseconds) before initializing Beamer. Optional (default: 0)

callback

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

onclick

Function. Function to be called when a user clicks a link in one of your posts. The function receives two parameters: The URL (string) of the link clicked, and a flag indicating if the link was opened in a new window (boolean; true if the link is opened in a new window, false if it’s opened in the same window). If this function returns false, the click event is cancelled (and the link is not opened). If no onclick value is specified, the default function will log a ‘click’ event on Google Analytics (where available). Optional [onclick(url, openInNewWindow)]

onopen

Function. Function to be called when the Beamer panel is being opened. If this function returns false, the open event is cancelled and the panel remains closed. If no onopen value is specified, the default function will log an ‘open’ event on Google Analytics (where available). Optional

onclose

Function. Function to be called when the Beamer panel is being closed. If this function returns false, the close event is cancelled and the panel remains open. If no onclose value is specified, the default function will log a ‘close’ event on Google Analytics (where available). Optional

user_firstname

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

user_lastname

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

user_email

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

user_id

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

Control Panel

Home

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.

Settings

User

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

Product

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.

Team

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

Below this, you’ll find the Roles subsection, where 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.

Languages

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:

  1. If the language parameter is set in the embed script, the post will show that language’s translation, if available.
  2. If no language parameter is set, Beamer will detect the user’s browser language and show the matching translation for it, if available.
  3. If no translation is available for this user’s language, the translation to the default language will be shown

Below this, you’ll find the Translations subsection, where 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.

Appearance

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 subsection. 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.

Billing

In the Billing tab, 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.

Embed

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.

Integrations

Within the Integrations section, you’ll be able to easily integrate Beamer with many other external services – without any coding!

Analytics

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.

Feedback

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

Privacy

In the Privacy section, you can search and delete (permanently) all the stored data associated to a user from your site.

Accounts

At the bottom-left corner of the dashboard, you’ll see your current account’s product name. Clicking on it will open up the multi-accounts submenu, where you’ll be able to create new accounts (associated to the same email), which you’ll then be able to access from that same menu.

If you had already created another account with a different email and want to merge them into one single account, you use the merge accounts option.

Post creation

Content

Translations

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.

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.

Category

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.

Title

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

Content

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.

Link

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.

Auto open sidebar

If the Auto open sidebar option is checked, the next time a user loads your website, the Beamer panel will open automatically to show this post as long as the user has access to this post (not excluded by filters). 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 post with the auto open sidebar option is created);

User Engagement and Feedback

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.

Reactions

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 at your users’ comments and reactions by clicking on the stats shown below the post within the Home section.

API

We just launched a beta version of our API and Zapier integration. Hooray! Check our API documentation here.

Support

Tutorials

If you need help installing Beamer, follow one of our how-to guides:

Help

We have a topic focused Help Center with the most common questions we receive.

Any doubts? You can contact us through our live support chat by clicking the button at the bottom-right corner of the screen.