image

How to Use Beamer as a Wordpress Plugin?

image

Mariano Xerez.

Sep 3, 2024

[hub]

  1. How to install Beamer as a Wordpress plugin?
  2. How to add Beamer as a menu item?
  3. How to customize your plugin?
  4. How to show or hide your Beamer widget?
  5. Other options.

[/hub]

Beamer's Official Wordpress Plugin.

If you use Wordpress for your blogging needs or as a CMS and you don't have coding skills or time, don't worry. You can still install Beamer in a few easy steps. In this guide, you'll learn how to connect your Wordpress Site with your Beamer account in no time.[notice type="info"]After installing our plugin you should check out this tutorial explaining how to automatically publish WordPress posts on Beamer.[/notice][notice type="warning"]Warning: Before we start you'll need a Beamer account, a Wordpress installation and Administrator privileges on that site. If you don't have one, get a Beamer account here[/notice]

[anchor id="plugin"]How to install Beamer as a Wordpress plugin?

Method 1: quick and easy implementation (recommended)

  1. Go to your Wordpress Admin Dashboard and go to Plugins > Add New.
  2. Search for Beamer, select, install and activate it.
Beamer WP plugin page
  1. Go to Settings > Beamer Settings and add the required fields including your product ID from your Beamer Account. If you don't have one, get it here for free.Important: Your product ID is the code that appears in the top bar of your Beamer Dashboard
beamer WP plugin settings

Method 2: manual

  1. Download the Beamer Wordpress Plugin [button target=blank url="https://wordpress.org/plugins/beamer/"]Download the plugin from Wordpress.org[/button]
  2. Go to your Wordpress Admin Dashboard and go to Plugins > Add New.
WP plugins page
  1. Click Upload Plugin at the top of the page. Next to the title.
  2. Select the file beamer.zip and click Install Now.
WP add plugin example
WP add plugin from computer example
  1. Once the plugin is installed click Activate Plugin.
WP activate uploaded plugin example
  1. Go to Settings > Beamer Settings and add the required fields including your product ID from your Beamer Account. If you don't have one, get it here for free.[notice]Important: Your product ID is the code that appears in the top bar of your Beamer Dashboard[/notice]
Beamer WP plugin general settings example
  1. Presto! Enjoy using Beamer.
Beamer default button example
  1. Remember you can change the position of the button either with the Button Position parameter or by adding a value to the top, left, right or bottom parameter in Settings > Beamer Settings.

[anchor id="menu"]How to add Beamer as a menu item?

Method 1: quick and easy implementation (recommended)

If you want to add Beamer as a menu item instead of a floating button, follow these steps:

  1. Go to Appearance > Menus and select the Menu you want to edit in the top drop-down.
  2. Select Beamer from the list of menu item categories. Click on Beamer Trigger and then on Add to Menu.
  3. If the menu item doesn't appear by default please click on Screen Options at the top of the screen and make sure Beamer is enabled.
  4. You can change the name of the menu item if you like.
  5. Don't forget to save your changes before closing the page. And voilà.
WP menu settings example

Method 2: selecting an existing item by CSS class

This method is very similar to the first but lets you use an element already present in your Menu using a custom CSS Class:

  1. Go to Appearance > Menus and create a Menu Item as a Custom Link or choose one that already exists. Leave a [code]#[/code] in place of the URL (that will avoid linking to anywhere else).
WP menu settings example custom
  1. Open that menu item tab and search for the field CSS Classes. If you don't see it you can activate it clicking on Screen Options in the top right corner of the page.
WP plugin show options examples
  1. Go to the CSS Classes field and write [code]beamerTrigger[/code] as the class. Beamer will detect that element's class and will transform it into a trigger like the image below. Enjoy.
Beamer WP menu alert example

[anchor id="customization"]How to customize your plugin?

  1. Go to Settings > Beamer Settings.
  2. You can change the position of the alert bubble adding a value to top and right.
  3. You may want to change the position of the floating button with button position or change the position of the Beamer panel with the display parameter.
Beamer WP advanced settings example

[anchor id="widget"]How to show or hide your Beamer widget?

You can select in which pages to display the widget by using filters. To do so go your Wordpress dashboard, and then to Settings > Beamer Settings. Scroll down to the Filter Options section.

  1. Use the selector to pick a mode. If you pick not, the widget will be shown on all pages with the exception of the specified by the filters. If you pick only, the widget will be shown only in the specified pages.
  2. Select your filters. You can pick among many options or combine them to get even more specific results.
  3. Use the checkboxes to select filters like home page, front page, posts, pages, archives and mobile.
  4. You can also write your own custom post types or specify posts by ID.
  5. Once you have finished selecting your filters don't forget to save your settings.
Beamer WP filter settings example

[anchor id="more"]Other options.

Maybe you are a little code-savvy and you just want a quick way to add your Beamer script to your Wordpress site but you don't know where to put it. You could use plugins like Scripts n Styles or Header and Footer scripts. You'll find our tutorial here.[notice type="info"]If you need more information on the inner workings of the Beamer script, go ahead to our Documentation page.[/notice]

Mariano Xerez.

Lead Designer

Mariano is a multimedia designer and all-around nerd born in Chile but currently based in Buenos Aires, Argentina. He loves to write CSS, producing videos, playing RPGs, and designing book covers. SaaS marketer based in Vancouver, BC :bandera-ca:. She is passionate about transforming customers into champions and ridding the world of boring product updates.

This article is about Customer Engagement + customer feedback + Product Management + User Engagement + User Feedback

blog image

“Beamer is the perfect tool for SaaS companies to engage users and reduce churn. Beamer has helped us achieve huge improvements in click through rates, reductions in churn and increased upselling.”

Benny Waelput

Go-to-Market Marketeer

logos