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 assistance, follow this step-by-step guide or guides specifically for WordPress, Squarespace, and Simvoly.

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

For your own site’s performance, you should paste this snippet at the very bottom of the ‍<body> ‍so 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

Use our WordPress plugin to install Beamer on your WordPress page. Download the plugin and refer to the installation guide for instructions on getting started.

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 that appears in the top bar of your Beamer Dashboard.

Parameter list

Basic parameters
product_id (string), selector (string)

Display parameters
display (string),display_position (string), top (number), right (number), bottom (number), left (number), embed (boolean), button (boolean), button_position (string), icon (string), bounce (boolean), notification_prompt (string), notification_prompt_delay (number), nps_delay (number), ignore_boosted_announcements (boolean)

Filter parameters
language (string), filter (string), force_filter (string), filter_by_url (boolean), mobile (boolean), lazy (boolean), alert (boolean), force_button (boolean), counter (boolean), first_visit_unread (number), standalone (boolean), post_request (boolean), delay (number)

Function parameters
callback (function), onclick (function), onopen (function), onclose (function), onerror (function), onNpsShow (function), onNpsHide (function), onNpsScore (function), onNpsFeedback (function), forceShowNPS (function), onInputFocus (function), onInputBlur (function)

User parameters
user_firstname (string), user_lastname (string), user_email (string), user_id (string), multi_user (boolean), user_created_at (numnber\|string)

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 you don’t want the element (matched by selector) to open your Beamer feed when clicked, but still want the alert counter to be rendered over the element, you can add the attribute data-beamer-click="false" to your HTML element:

<div class="beamerButton" data-beamer-click="false">What's new</div>

The attribute data-beamer-click="false" will make the element look the same (with the alert counter rendered whenever there are any unread posts), but clicking on this element will make no effect by default. This is useful if you want to take full control of what your element does when clicked.

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’ (default: ‘right’). Optional

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.

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

Possible values are ‘top’, ‘top-left’, ‘top-right’, ‘right’, ‘right-bottom’, ‘right-top’, ‘bottom’, ‘bottom-left’, ‘bottom-right’, ‘left’, ‘left-bottom’ and ‘left-top’.

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

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

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

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

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 (Pro and up)
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 (default: false) – Optional

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

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’ (default: ‘bottom-right’) – Optional

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’ (default: ‘bell_full’) – Optional

bounce
Boolean. If false, the notification bubble will not be animated with the default ‘bounce’ effect (default: true) – Optional

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

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

filter

String. Retrieve posts with segment filters that match or include this value (example: if a post has segment filters equal to ‘admin’ or ‘admin;user’, and this value equals ‘admin’, the 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). All posts without segment filters will be retrieved regardless (max length: 3,000 characters) – Optional

force_filter
Only retrieve posts which contain this segment filter. This parameter can include several filters separated by semicolons (‘;’), which don’t need to follow any specific order. If sending several filters, only posts that contain all of them will be retrieved – Optional

filter_by_url

Boolean. Retrieve posts with a segment URL that matches the one the user is currently in (example: if a post has a segment URL value of ‘https://app.getbeamer.com/home’, the post will only be visible if the user opening the panel is currently in that URL). If this parameter is true, the window’s current URL will be matched against the segment URLs of the posts that have one. If false, the current URL will be ignored (no posts with segment URLs will be retrieved) (default: false) – Optional

force_filter
Only retrieve posts which contain this segment filter. This parameter can include several filters separated by semicolons (‘;’), which don’t need to follow any specific order. If sending several filters, only posts that contain all of them will be retrieved – Optional

filter_by_url

Boolean. Retrieve posts with a segment URL that matches the one the user is currently in (example: if a post has a segment URL value of ‘https://app.getbeamer.com/home’, the post will only be visible if the user opening the panel is currently in that URL). If this parameter is true, the window’s current URL will be matched against the segment URLs of the posts that have one. If false, the current URL will be ignored (no posts with segment URLs will be retrieved) (default: false) – Optional

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

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 (default: false) – Optional

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) (default: true) – Optional

force_button
Boolean. If true, the selector parameter is ignored and the default button is rendered in your site. If false, the selector parameter is used to define the button in your site (default: false) – Optional

counter
Boolean. If true, the alert counter is rendered over the button element (whenever there are new unread posts). If false, the alert counter is not rendered (clicking on the element will still open the embedded feed) (default: true) – Optional

first_visit_unread
Number. Number of unread posts to show in the alert counter when a user visits your site for the first time (default: 1) – Optional

standalone
Boolean. If true, clicking on the button element or calling Beamer.show() will open your standalone feed in a new tab (instead of opening the embedded feed). If false, the embedded feed is opened (default behavior) (default: false) – Optional

post_request (Enterprise only)
Boolean. If true, the initialization request is done with the POST method. If false, the request is done with the GET method (default: false) – Optional

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

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) [onclick(url, openInNewWindow)] – Optional

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

onerror
Function. Function to be called when the initialization request fails. This request is fired automatically when initializing the script (or after Beamer.init() is called, if using lazy initialization) – 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

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

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

multi_user

Boolean. Only applicable if using the user_id parameter, in a scenario in which two or more different users might enter your site from the same physical device and browser. If true, Beamer will count unread posts separately for each distinct user_id entering your site from the same device and browser. If false, unread posts are counted as if the device and browser are associated to a single real user (even if the user_id changes) (default: false) – Optional

nps_delay
Number. Delay (in milliseconds) before initializing NPS (default: 0) – Optional

ignore_boosted_announcements
Boolean. If true, all boosted announcements (top-bar, popup, snippet and tooltip) will not be display. If false, all will be displayed as usual (default: false) – Optional

user_created_at

Number | String. User creation date, used to define whether to show the NPS prompt for a user according to the initial delay setting. Can be sent as a UNIX timestamp in milliseconds (e.g. user_created_at: 1612550000000) or as a string in ISO-8601 format (e.g. user_created_at: ‘2021-12-31T00:00:00Z’). By default, Beamer will use the first seen date for the user (default: none) – Optional

onNpsShow
Function. A callback function that is invoked right before the NPS widget is displayed. If the function returns false, the widget will not be displayed. If the function returns true or does not return anything, the widget will be displayed as usual – Optional

Example:

widget.onNpsShow = function() {
    // Perform some logic before the widget is shown
    if (shouldShowWidget()) {
        return true; // Display the widget
    } else {
        return false; // Do not display the widget
    }
};

onNpsHide
Function. This function is triggered when the NPS widget is hidden and receives a JSON object containing the user’s response. This response includes the NPS score and any feedback provided by the user. – Optional

onNpsScore
Function. This function is invoked immediately after the user selects their NPS score. It receives a JSON object containing the user’s response, which includes the NPS score and empty feedback. – Optional

onNpsFeedback
Function. This function is invoked immediately after the user submits their feedback. It receives a JSON object containing the user’s response, which includes the NPS score and any feedback provided. – Optional

Parameters of the JSON object:

response (Object): A JSON object that contains the user's response:
. score (Number)
. feedback (String)

forceShowNPS
Function. A method that forces the NPS widget to be displayed, regardless of any other conditions. This method can be used to ensure that the NPS widget is shown to the user, overriding any other logic that might prevent its display. – Optional

onInputFocus
Function. This function is triggered when a post comment input field within the widget gains focus. It can be used to perform actions or handle events when the user focuses on an input field. – Optional

onInputBlur
Function. This function is triggered when a post comment input field within the widget loses focus. It can be used to perform actions or handle events when the user moves away from an input field. – Optional

Methods

These methods are meant for advanced use only and may need to be used in combination with some of the parameters described above.

Beamer.init()
Initializes Beamer in your site (only necessary when using the parameter lazy: true to prevent automatic initialization).

Beamer.show()
Shows the embedded feed in your site.

Beamer.showIdeas(showForm)
Shows the embedded feed in your site with the Ideas tab opened. Optionally, sending showForm as true will also have the Ideas form be opened and focused automatically in the feed.

Beamer.showRoadmap(showForm)
Shows the embedded feed in your site with the Roadmap tab opened. Optionally, sending showForm as true will also have the Ideas form be opened and focused automatically in the feed.

Beamer.hide()
Hides the embedded feed in your site.

Beamer.update(parameters)

Updates the configuration parameters for Beamer. The method receives a JSON object containing any of the parameters to update (following the same format as the beamer_config object that defines the initial parameters).

The object passed to this method only needs to contain the parameters to update. Any other parameters that were defined in beamer_config (but not sent to this method) will keep the same value.

Important
The beamer_config object should always be defined before any calls to Beamer.update(), and must contain as a bare minimum the product_id parameter (as specified in your Embed section)

Beamer.destroy()
Removes Beamer from your site, including all elements and bindings inserted by the script.

Cookies

Always present

The following cookies are always created or updated by the embed script at some point, when using the default configuration.

_BEAMER_FIRST_VISIT_{product ID}
Stores the date of this user’s first visit to the site – Duration: 300 days

_BEAMER_USER_ID_{product ID}
Stores an internal ID for this user – Duration: 300 days

_BEAMER_LAST_UPDATE_{product ID}
Stores the timestamp for the last time the number of unread posts was updated for this user – Duration: 300 days

_BEAMER_LAST_UPDATE_{product ID}
Stores the timestamp for the last time the number of unread posts was updated for this user – Duration: 300 days

_BEAMER_FILTER_BY_URL_{product ID}
Stores whether to apply URL filtering on the feed – Duration: 20 minutes

_BEAMER_DATE_{product ID}
Stores the latest date in which the feed was opened – Duration: 300 days

_BEAMER_BOOSTED_ANNOUNCEMENT_DATE_{product ID}
Stores the latest date in which a boosted announcement was displayed – Duration: 300 days

Conditional

The following cookies may or may not be present, depending on your Beamer settings and the parameters sent to the embed script.

_BEAMER_LAST_POST_SHOWN_{product ID}
Stores the ID of the last post shown as a teaser – Duration: 300 days

_BEAMER_SOUND_PLAYED_{product ID}
Stores whether the notification sound was played since the last time the feed was opened – Duration: 7 days

_BEAMER_LAST_PUSH_PROMPT_INTERACTION_{product ID}
Stores the date of this user’s latest interaction with the prompt requesting permission to send push notifications – Duration: 300 days

_BEAMER_NPS_LAST_SHOWN_{product ID}
Stores the latest date in which the NPS prompt was shown to this user – Duration: 300 days

JSESSIONID
Keeps track of the user’s session within your Beamer feed (this cookie is stored only under getbeamer.com‘s subdomains).

Note
All these cookies are additionally stored in the browser’s localStorage (if available) as a fallback.

Did we miss your question?
Ask us directly in our live support chat, by clicking the button in the bottom-right corner of the screen.

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

General

In the General 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.

The Feed & Panel section allows you to modify several settings that affect the feed as shown to your users. Some of these configurations can be overridden by the embedded script parameters if you are using them (for example, the default button position will be overridden by the button_position parameter, if used).

User

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

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:

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. The default language is only used when the user's browser language is not among the languages configured in Beamer.

If a user has their browser set to Spanish and Spanish is one of the languages configured in Beamer, they will only see posts that have been translated into Spanish.

Example:

If a user's browser is set to French, but the account only has English (default) and Spanish available, the user will see posts in English (the default language).
If a user's browser is set to Spanish, they will see posts in Spanish only.
If a post does not have a Spanish translation, it will not be displayed to that user.

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.

Expiration date

Next to the ‘publication date’ input, you’ll find a secondary (optional) input to set an expiration date for the post. If a date is set, the published post will stop being visible from that date onwards.

Pinned post

Enable the ‘Pin to top of feed’ option to show this post at the top of your feed. Doing so will cause any posts previously pinned will be un-pinned.

Keep in mind that all other conditions, such as publication and expiration dates, segment filters and segment URLs, will be applied to the pinned post as well.

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.

Enabling the ‘Open links in new tab’ option when creating the post will cause the main link (and any other links within the content of the post) to be opened in a new tab or window in the browser. Disabling the option will cause the links to be opened in the same tab.

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.

Segment URLs

This value is directly related to the filter_by_url parameter for the embed script. If you want a post to only be visible from certain URLs, you can use this option.

For example, let’s say you only want a post to show up when the user is in ‘https://app.getbeamer.com/home’: First step would be to make sure that the filter_by_url parameter is set to true for the embedded script. Then, add the URL ‘https://app.getbeamer.com/home’ in the ‘Segment URLs’ input when creating or editing the post.

Keep in mind that you can use more than one segment URLs in your posts, simply by separating each with a semicolon (‘;’) character.

Push notification

Enabling the ‘Send push notification’ option will cause a web push notification to be sent to all your subscribed users once the post becomes published.

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.

Social media sharing

When creating a post, check the Social media sharing option to enable a ‘share’ button in your posts, which allows your users to quickly share the post on Facebook, Twitter and other platforms.

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 out our API documentation here.

Webhooks

Webhooks allow you to create custom integrations between Beamer and your own app or service.

When setting up a new webhook, you’ll select the type of event which you want to receive and set the endpoint where you want to receive them. Once saved, Beamer will start sending new events of that type to the specified endpoint.

Events

Webhooks can be created for any of these events:

New post (triggered when publishing a new post)
New comment (triggered when a user sends a new comment)
New reaction (triggered when a user sends a new reaction)
New NPS score (triggered when a user saves a new NPS score)

Requests and validation

New events are sent to your specified endpoint as a POST request, with a JSON-formatted body containing the data for the latest events.

All webhooks contain an automatically generated secret (you can check and copy this secret by clicking on any of your existing webhooks). Every POST request sent to your endpoint will contain this secret within the Beamer-Webhook-Secret header.

We highly recommend checking the content of this header on every request you receive and making sure it matches the secret for your webhook, as a way to validate its authenticity.

Payload

All POST requests sent to your endpoints will contain a JSON-formatted body. This body will always include a JSON array, which will contain at least one event.

Keep in mind these requests can include more than one event in its payload, so make sure to capture them all! Events sent in one request will not be sent in future requests.

Below you’ll find example payloads for each type of event.

New post

[
  {
    "id": "1234",
    "date": "2021-02-01T00:00:00",
    "published": "true",
    "category": "New",
    "feedbackEnabled": "true",
    "reactionsEnabled": "true",
    "showInWidget": "true",
    "showInStandalone": "true",
    "postUrl": "https://app.getbeamer.com/beamer/en/how-to-write-engaging-release-notes-",
    "language": "EN",
    "title": "Title of the post",
    "contentHtml": "<p class="\"\"">Content for this post!</p>
", "content": "Content for this post!", "linkUrl": "https://www.getbeamer.com/", "linkText": "Click here!"
 }
]

New comment

[
  {
    "postTitle": "Title of the post",
    "date": "2021-02-01T11:58:56Z",
    "text": "Just writing a random comment here!",
    "userId": "1010101",
    "userFirstName": "Jane",
    "userLastName": "Doe",
    "userEmail": "jdoe@example.com",
    "url": "https://app.getbeamer.com/feedback...",
    "userCustomAttributes": {
      "company": "Example Co.",
      "plan": "Premium"
    }
  }
]

New reaction

[
  {
    "postTitle": "Title of the post",
    "date": "2021-02-01T11:58:57Z",
    "reaction": "positive",
    "userId": "1010101",
    "userFirstName": "Jane",
    "userLastName": "Doe",
    "userEmail": "jdoe@example.com",
    "url": "https://app.getbeamer.com/reactions?...",
    "userCustomAttributes": {
      "company": "Example Co.",
      "plan": "Premium"
    }
  }
]

New NPS score

[
  {
    "date": "2021-02-01T12:02:43Z",
    "score": 10,
    "feedback": "This product is simply awesome!",
    "userId": "1010101",
    "userFirstName": "Jane",
    "userLastName": "Doe",
    "userEmail": "jdoe@example.com",
    "url": "https://app.getbeamer.com/nps#feedback?...",
    "refUrl": "https://example.com/home",
    "userCustomAttributes": {
      "company": "Example Co.",
      "plan": "Premium"
    }
  }
]

Segmentation (Pro and up)

Create custom segment filters (like industry, product, role, location, language, behavior or others) to target specific members of your audience. Pass your segments to the Beamer script in the filter parameter. You’ll have to keep track of your segments and users on your own, or you can use our Advanced Segmentation feature to keep track for you.

Advanced segmentation (Enterprise only)

Advanced segmentation allows you to send targeted messages to specific groups of users. But the real power of advanced segmentation comes from the ability to create segments directly in your Beamer dashboard from your own user base using AND/OR logic to combine and specify the target audience.

Learn more in this guide

Custom CSS

Custom CSS is a special feature available for our Pro and Enterprise users. With custom CSS you can add your own CSS code to change the appearance of your Beamer widget to fit your site perfectly. The custom CSS will overwrite Beamer’s default styles on the widget.

Learn more in this guide

Support

Tutorials

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 install Beamer through Google Tag Manager

How to use Beamer with Simvoly web builder

Do you have questions?
You can contact us through our live support chat by clicking the button at the bottom-right corner of the screen.

Developers