Learning Guide: Beacon Plugins

In this topic, you will learn about Beacon plugins; what they are, why you would use them, and an introduction to how to implement them.

Introduction

OTT plugins allow you to customize your web apps in ways that are not available through the normal page creation process in Beacon Studio. Here are a few examples:

Custom buttons

Add custom buttons. In this case the buttons provide functionality to download the playing video and see the location of the filming.

custom buttons

Custom content areas

Add text to special <div>s set aside for extra content.

Side panel

This short video shows a OTT plugin that was created to display a panel that can be opened and closed by a viewer.

Custom pages

Create new pages with HTML content of your choice.

The plugin functionality is controlled with JavaScript and CSS. This means that to implement OTT plugins some experience with JavaScript and CSS is required.

Implementation startup

The plugin code is read in by your Beacon web app. In Beacon Classic, you point to one JavaScript file and one CSS file that are loaded at app startup. Here is a screenshot where the data is entered in Beacon Classic:

cms web customization

The files must be located at a publicly addressable URL and be named as follows:

  • The JavaScript file must be called index.js
  • The optional CSS file must be called index.css

Available elements

The following table shows all OTT plugin elements with a brief description of the purpose/functionality:

Element Functionality
Page events and data Listen for page events like page loading, unloading and changing
User events and data Listen for user events like sign in, register and sign out
Side panel events and data Open and close the side panel and listen for events of side panel behavior
Custom buttons events and data Add and remove buttons and listen for click events
Custom sections Place custom content in custom <div>s
Custom pages Create a custom page in the Beacon Studio then populate with dynamically built HTML of your choice

Implementation architecture

As mentioned earlier, OTT Plugins are implemented with JavaScript and CSS. Obviously, there are many ways to structure your JavaScript code. For instance:

  • You could simply put all your code the single index.js file mentioned earlier.
  • Brightcove's consulting team did an implementation of the plugins using React, a JavaScript library for building user interfaces.

For the documents on this site, it was decided that the one file approach would lead to poor coding practices. React was maybe more than what was needed when the exact JavaScript skill sets of Beacon Studio customers is not known. This led to the decision to use JavaScript modules for implementation and examples in this documentation.

The Using JavaScript Modules for OTT Plugins document explains the basic programming model around OTT Plugins, and how JavaScript modules can be used for code implementation.

Of course, you are free to organize your JavaScript code in any way you wish.

Additional documentation and resources

The following documents and GitHub repo are additional resources covering OTT plugins: