BCaster Lite Web Widget

ICC - Intelligient Community Camera

An Embeddable web widget that provides the ability to utilize the BCaster ICC

Getting Started

The BCaster Lite Widget can be installed/imported via

• CDN UNPKG
• CDN JSDELIVR
• NPM

When imported via CDN, it exposes a global BCasterLiteWidget which accepts configuration arguments

Getting Widget Credentials

The BCaster Lite Widget requires the App Id credential. To retrieve this credential, log into your bcaster dashboard with your dashboard login details.

then navigate to the camera tools page from the Sidebar on the home screen. Under the Camera Link under the Integrations side bar, click on the Copy App ID button.

This would copy the given credential to your clipboard. Proceed to paste this into code/text editor via CTRL V or CMD V depending on your operating system.

Caution ⚠️

The BCaster widget is only visible on mobile views. In order to see the widget displayed it is important to make sure the web page is on viewed either from a mobile device. An example of what the ICC widget looks like can be seen below.

Example Usage

To get the BCaster Lite Widget working, copy any of the following code snippet examples that apply, into your web project and replace the appId value with your unique bcaster lite app Id gotten from the BCaster Dashboard Credentials section.

Info ⚠️

In order for the widget to mount, you are required to have an empty div (if using the default widget) or an anchor tag (if providing your own custom widget) with an id bcaster-widget in your html page. The div or anchor tag should be on the page before the mount function is triggered.

We recommend that this snippet below is put before the closing html body (</body>) tag. For full details see the Embedding via CDN example.

Defining the widget mounting element

For the default widget

<div id="bcaster-widget"></div>

or For a user custom widget - ensure the anchor <a></a> tag has a blank href attribute

<a id="bcaster-widget" href="">
  // Custom user html
</a>

Important

Both widget options (default and user defined widgets) are set to be only visible on mobile.

Embedding via CDN

On your webpage, copy and insert the following code snippet below into the body tag and replace the appId value with the appId retrieved from your Dashboard view. We recommend that this snippet is put before the closing html body (</body>) tag.

This is the fastest way to embed the widget and requires just a copy/paste of the snippet below and updating the AppID value. Please kindly note that the widget will only be visible on mobile mode i.e. from a mobile device or a simulated mobile mode on the browser.

Using the default widget

<div id="bcaster-widget"></div>
<script src="https://unpkg.com/@bcaster/bcaster-lite-widget@1.0.0/dist/bcaster-lite-widget.js"></script>
<script>
  const widget = new BCasterLiteWidget({ appId: 'ZvUFc2t7' });
  widget.mount();
</script>

Using your own custom defined widget

<a id="bcaster-widget" href="">
  // Custom user html
  click this link to upload a photo
</a>
<script src="https://unpkg.com/@bcaster/bcaster-lite-widget@1.0.0/dist/bcaster-lite-widget.js"></script>
<script>
  const widget = new BCasterLiteWidget({ appId: 'ZvUFc2t7', userDefinedWidget: true });
  widget.mount();
</script>

Embedding via NPM/Yarn (ES5 and older)

First install the package by running npm install @bcaster/bcaster-lite-widget or yarn add @bcaster/bcaster-lite-widget

/* Using the default widget */
const BCasterLiteWidget = require('@bcaster/bcaster-lite-widget')
const widget = new BCasterLiteWidget({ appId: 'ZvUFc2t7' });
widget.mount();

or

/* Using a custom defined widget */
const BCasterLiteWidget = require('@bcaster/bcaster-lite-widget')
const widget = new BCasterLiteWidget({ appId: 'ZvUFc2t7', userDefinedWidget: true });
widget.mount();

Embedding via NPM/Yarn (TypeScript, ES6 and later)

First install the package by running npm install @bcaster/bcaster-lite-widget or yarn add @bcaster/bcaster-lite-widget

/* Using the default widget */
import BCasterLiteWidget from '@bcaster/bcaster-lite-widget'

const widget = new BCasterLiteWidget({ appId: 'ZvUFc2t7' });
widget.mount();

or

/* Using a custom defined widget */
import BCasterLiteWidget from '@bcaster/bcaster-lite-widget'

const widget = new BCasterLiteWidget({ appId: 'ZvUFc2t7', userDefinedWidget: true });
widget.mount();

Configuration Options

The BCaster Lite Web Widget library exposes a default BCasterLiteWidget Javascript class, which accepts configuration options in the form of a standard Javascript Object. The configuration options signature are as follows

@param {Object} args Configuration values
@param {String} args.appId (Required) The unique App ID - Retrieved from the BCaster Dashboard
@param {String} args.lang (Optional) {Default`en`} Language attribute for localization
@param {String} args.tag (Optional) {Defaults to webapp} Tag defined for media categorization on the Dashboard
@param {String} args.accepts (Optional) {Defaults to image} Depicts the mediaType that should be accepted - Permitted values are one of `video`, `image` or `all`.
@param {Boolean} args.userDefinedWidget (Optional) {Default false} A boolean value to determine if the user would prefer to use thier own widget
 
@example
const widget = new BCasterLiteWidget({
  appId: 'ZvUFc2t7',
  lang: 'en',
  tag: 'webapp',
  accepts: 'image',
  userDefinedWidget: false,
})

Supported Languages

Currently the following language options are supported

• en - English
• fi - Finnish

Supported Media Types - Accepts

• image - Allows images only.
• video - Allows videos only.
• all - Allows both images and videos.

Caveat

Warning!

This web widget programatically triggers a new tab which opens a specific instance of the BCaster Lite Web App that is unique to your appId. If you have restrictions/policy on your website that blocks opening new tabs then please add https://bcaster.com to your allowList.

We open a new tab and connect to your web app instance via https so the possibilities of it being blocked are marginal, however, if it so happens that you have such policy even for secure connections then please do consider the above caveat.

© 2020 BCaster. All rights reserved.