meetingroom365-sdk

SDK for deploying a custom display on the Meeting Room 365 platform.

With just a couple lines of code, you can create a custom app that will load a display configuration, managed in Meeting Room 365, and sync its status in real-time with the admin portal.

Examples

You can view examples on sdk.meetingroom365.com

Installation

Inline (script tag)

<script src="https://cdn.jsdelivr.net/npm/meetingroom365@latest"></script>

NPM

npm i -s meetingroom365

Then, in your project:

import * as Meetingroom365 from 'meetingroom365';

Meetingroom365.init();

Quickstart

<script src="https://cdn.jsdelivr.net/npm/meetingroom365@latest"></script>
<!-- Optional, sends information about hardware device & OS -->
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@latest"></script>
Meetingroom365.init();

Usage

Initialize a Custom App

Basic:

Meetingroom365.init({ ...configuration }, callback<optional>)

Full options:

Meetingroom365.init({
    STATUS_UPDATE_INTERVAL: 15 * 60 * 1000, // Sends a status-state update every 15 minutes to let the admin portal know the display is online
    LOCATION: true, // Sends the device's IP and derrived location (from IP) to the admin portal
    UPDATEDEVICESTATUS: true, // Update device status when updating display status-state

    key: 'manuallysetdisplaykey', // Production apps pass a display key automatically via query parameter
    
    onUpdate: function(displayConfig) {
        // Handle display configuration update from Admin portal
        console.log('Display configuration', displayConfig);
    },
})

Sends library configuration parameters. Not to be confused with a displayConfig object.

Await a Display Configuration:

let displayConfig = await Meetingroom365.init({ ...configuration })

This is useful if you need to read the display configuration to configure your custom display before your app starts.

HTML Examples

You can use this library in either a normal script tag or as a module. See below:

<!--As a Module-->
<script type="module">
    window._debug = true; // Enables debug output for development on Localhost

    // Fetch our display configuration
    let displayConfig = await Meetingroom365.init();

    // Handle the display configuration here if you wish to apply any customizations to the app
    
    console.log('Display Configuration loaded', displayConfig);
</script>
<!--/ As a Module-->

<!--Normal Script tag (with Callbacks)-->
<script>
    // Does the same thing, but is not a module, so is compatible with more devices and browsers
    Meetingroom365.init({}, function (displayConfig) {
        console.log('Display Configuration loaded', displayConfig);
        // Handle display configuration
    });
</script>
<!--/ Normal Script tag (with Callbacks)-->

Update Display Status

You can update the display's status with arbitrary information about your display, which can appear in the Meeting Room 365 admin portal.

Meetingroom365.updateStatus({ ...status })

For example, you can update the { occupied: true } to send a "Room Occupied" status. This could be useful if you're creating a custom Dibs room display.

// Example
Meetingroom365.updateStatus({ occupied: true })

Ready function

A ready function is provided in case you need to wrap your app in a document ready function. This can be helpful if you need to initialize and fetch the initial display configuration after the document is ready.

Meetingroom365.ready(() => {})