You can work with Beamer in a matter of seconds just by adding our embed script in your code. In this guide, you’ll learn how to integrate Beamer to your site or app using the default and the custom version of our product. If you are not code-savvy we also have an easy to use WordPress plugin, and a tutorial dedicated to Squarespace, Simvoly and other WYSIWYG web builder users.

How to add Beamer to your site or app?

Method 1 (the quick and easy way)

This method will add Beamer to your site or app as a floating button in one of the corners of the screen.

  1. Go to your Beamer account. If you don’t have one you can create it for free here.
  2. Go to your avatar at the bottom left corner of the screen and select the Embed code (code) option in the menu.
    Embed code menu screenshot
  3. Copy the Basic embed script and paste it before the end of the <body> tag in your HTML code.
    Basic embed script screenshot 
    <script>
	var beamer_config = {
		product_id : "THIS SHOULD BE YOUR OWN PRODUCT ID",
		button_position: 'bottom-right'
	};
</script>
<script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js"></script>
  4. You can change the position of the button by changing the parameter button_position (default: ‘bottom-right’). The other accepted values are: ‘bottom-right’, ‘top-left’, ‘top-right’, ‘bottom-right’ and ‘bottom-left’. 
    button_position: 'bottom-right'
  5. Voilà!Beamer default button with alert example
  6. Remember you can change the position of your the button with the top, left, right and bottom parameters.

Method 2 (add a custom button or menu item)

Remember: If the alert bubble is not in the right position you can move it using the top, right, left and bottom parameters.

This method will attach Beamer to a link or other element of your choosing in your DOM.
  1. Follow all the steps in method 1.
  2. Select or create an element and assign it the class.beamerTrigger. Any element with that class will call the Beamer widget whenever users click and will display the red bubble alert whenever there are unread updates (see the example below). 
    <div class="beamerTrigger">What's new</div>

Beamer menu alert example

Method 3 (maximum customization)

Warning: A basic knowledge of HTML is required. If you use WordPress and you prefer an out of the box solution we also offer an easy to use plugin that you can download and learn to use here.

This method will give you maximum control over the way to display your Beamer trigger button.
  1. Go to your Beamer account. If you don’t have one you can create it for free here.
  2. Go to your avatar at the bottom left corner of the screen and select the Embed code (code) option in the menu. Then scroll to Advanced embed options.
    Advanced embed options screenshot
  3. Copy the Advanced embed script and change the parameters manually. For more information on each parameter and their accepted values go to our Documentation 
    <script>
	var beamer_config = {
		product_id : "THIS WILL BE YOUR OWN PRODUCT ID", //DO NOT CHANGE
		selector : ".beamerTrigger",
		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"></script>
  4. Select or create an element to trigger the Beamer widget. Use that element’s id or unique class for the selector parameter. (Important: If the selector is a class and not an id you have to write it starting with a dot. e.g. for class launchBeamer, your selector would be .launchBeamer). You can add multiple elements separated by commas.
  5. You can modify the position of the alert bubble with the parameters top and right. 
    top: 0,
right: 0

Extra options

Remember that you may add custom filters and callbacks to your embed code manually. For a comprehensive list of parameters and their accepted values go to our Documentation Page.

Not code savvy? Do you use a Web Builder?

If you use a WYSIWYG web builder maybe you’re a little confused on how to add Beamer to your site using methos 2 or 3. Don’t be afraid. Here you have a guide in general terms on how to add the Advanced Beamer embed script to a non-specific Web Builder. If you use Squarespace or Simvoly we have more detailed guides you can follow. If you work with WordPress, we also have a very easy to use WordPress plugin.

  1. Follow all the steps in method 1.
  2. Select or create an element in your menu (Menu Manager or Menu Editor) and use #beamerTrigger as the target URL.
  3. That’s it. As easy as that.Beamer custom menu trigger example