# 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

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

Login Screenshot

then navigate to the credentials page from the Management tab on the home screen.

Navigate to Credentials Page Screenshot

From the Lite Widget Integration - Web App click on the copy buttons beside the Web App Id box to copy the credential

Credentials Page Screenshot

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 or a simulated mobile device from the browser. An example of what the ICC widget looks like can be seen below.

BCaster ICC Widget Image

# 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>
1

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>
1
2
3

# 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@0.0.18/dist/bcaster-lite-widget.js"></script>
<script>
  const appId = '7ddc01afa5f5e4d10d80eff0d173a8d1e0a3';
  const widget = new BCasterLiteWidget({ appId });
  widget.mount();
</script>
1
2
3
4
5
6
7

# 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@0.0.18/dist/bcaster-lite-widget.js"></script>
<script>
  const appId = '7ddc01afa5f5e4d10d80eff0d173a8d1e0a3';
  const widget = new BCasterLiteWidget({ appId, userDefinedWidget: true });
  widget.mount();
</script>
1
2
3
4
5
6
7
8
9
10

# 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 appId = '7ddc01afa5f5e4d10d80eff0d173a8d1e0a3';
const widget = new BCasterLiteWidget({ appId });
widget.mount();
1
2
3
4
5

or

 





/* Using a custom defined widget */
const BCasterLiteWidget = require('@bcaster/bcaster-lite-widget')
const appId = '7ddc01afa5f5e4d10d80eff0d173a8d1e0a3';
const widget = new BCasterLiteWidget({ appId, userDefinedWidget: true });
widget.mount();
1
2
3
4
5

# 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 appId = '7ddc01afa5f5e4d10d80eff0d173a8d1e0a3';
const widget = new BCasterLiteWidget({ appId });
widget.mount();
1
2
3
4
5
6

or

 






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

const appId = '7ddc01afa5f5e4d10d80eff0d173a8d1e0a3';
const widget = new BCasterLiteWidget({ appId, userDefinedWidget: true });
widget.mount();
1
2
3
4
5
6

# 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: '21823638492719937299768436748628',
  lang: 'en',
  tag: 'webapp',
  accepts: 'image',
  userDefinedWidget: false,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 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.