StreamBoost JS Plugin

This page explains how to use the StreamBoost components as HTML custom elements.

Importing the component

Button

Import the js module from our cdn in your webpage:

<script
  type="module"
  src="https://files.quanteec.com/streamboost/latest/streamboost-plugin-button.js"
></script>

The Button is now available as a custom HTML element <streamboost-button/>.

Panel

Import the js module from our cdn in your webpage:

<script
  type="module"
  src="https://files.quanteec.com/streamboost/latest/streamboost-plugin-panel.js"
></script>

The Panel is now available as a custom HTML element <streamboost-panel/>.

Usage

Button

• Minimal configuration:

<streamboost-button user-id="<user-id>"></streamboost-button>

• All custom attributes:

<streamboost-button
  backdrop-blur="false"
  backdrop-mode="fullscreen"
  button-size="28.5"
  button-style="border: 2px dashed #116af8;"
  color="#116af8"
  dashboard-cards="Shared,Peers,Power,Water"
  default-is-streamboost-on="true"
  default-section="dashboard"
  panel-anchor="top left"
  panel-max-height="500"
  sponsor-id="quanteec"
  sponsor-image="https://quanteec.com/images/Quanteec_Logo.svg"
  sponsor-url="https://quanteec.com"
  user-id="<user-id>"
></streamboost-button>

Panel

• Minimal configuration:

<button id="custom-streamboost-button">Open StreamBoost Panel</button>
<streamboost-panel
  id="streamboost-panel"
  user-id="<user-id>"
></streamboost-panel>
<script>
  const button = document.getElementById("custom-streamboost-button");
  const panel = document.getElementById("streamboost-panel");

  button.addEventListener("click", () => panel.setAttribute("is-open", "true"));
</script>

Attributes

Mandatory attributes

Attribute	Description
user-id	A unique id to identify the viewer.
id (panel only)	A unique HTML id attribute so the panel can close itself.
is-open (panel only)	A boolean to open or close the panel.

Panel configuration attributes

Attribute	Description
dashboard-cards	A comma-separated list of card names for the dashboard. Default is "Peers, Shared, Energy, Speed". Allowed card names are: CO2, Energy, Peers, Power, Ranking, Shared, Speed, Water.
default-is-open (button only)	A boolean to open the panel by default when the page load.
default-is-streamboost-on	A boolean to enable/disable the boost by default (the user can still change the vale afterward).
default-section	"dashboard" or "status" to force the default open section.

Sponsor attributes

Attribute	Description
sponsor-id	A unique id to identify the advertising campaign. It is required to activate the sponsoring functionality.
sponsor-image	A link to an ad banner with a 4/1 ratio.
sponsor-url	A link to make the image clickable.

Styling attributes

Attribute	Description
backdrop-blur	A boolean to enable/disable the blurry background when the panel is open. Default is true.
backdrop-mode	"fullscreen" or "contained", wether the backdrop covers only it's parent or the all the screen. Default is "fullscreen".
button-size (button only)	A number that will be the button width and height in px. Default is 30.
button-style (button only)	An inline css style to customize the button.
color	A custom color for the panel.
panel-anchor (button only)	The position of the panel relatively to the button. Allowed values are: "center", "bottom left", "bottom right", "top left", "top right". Default is "center". Centering is made relatively to the backdrop-mode value.
panel-max-height	A number used as the maximal height of the panel in pixels, default is 350.
position-bottom, position-left, position-right, position-top (panel only)	The panel can be manually positionned using the following attributes. They take a <length> value. A valid pair (listed in the panel-anchor description) is needed. The panel is centered by default.

Events

You can listen to these events:

• streamboost-open when the panel is opened.
• streamboost-close when the panel is closed.
• streamboost-claim-available (panel only) when the claim becomes available.
• streamboost-claim-unavailable (panel only) when the claim becomes unavailable.