NPM

Use the flexible dynamic embedding to take further control

To use the dynamic embedding method follow this guide and the various operating system-specific behaviours.

Get the SDK

First, you'll need to configure your development environment to gain access to the SDK. You'll need the credentials included in your "Welcome pack" to achieve this. See also Download & Initialise the SDK

If you're an existing customer and can't find your Welcome Pack, please raise a ticket via [email protected] or speak to your Account Manager.

JavaScript

All Interaction SDK packages are scoped as @monterosa. Execute the following commands to install the required packages:

npm install @monterosa/sdk-core
npm install @monterosa/sdk-launcher-kit
npm install @monterosa/sdk-interact-kit

Important: The JavaScript SDK can only be run in a browser environment and is not intended to be used with Node.js.

You will also need to include all Stable polyfills for environments that don't support the features required by Monterosa / Interaction SDK.

JavaScript (deprecated)

Once you have access to the SDK, you'll have to configure it during the startup of your application, so it is able to access your project. For that, you'll need a static host and a project id, which can be retrieved in Studio.

JavaScript

import { configure } from '@monterosa/sdk-core';

// E.g. this could be the root component of your ReactJS application
// or in the first file you import with a <link> HTML tag
configure({
  host: '<static host>',
  projectId: '<project id>'
});

JavaScript (deprecated)

Launch an App/Experience

All Projects are associated with an App, also known as an Experience.

You can check Monterosa / Interaction Cloud core concepts and read about platform terminology if you need more information.

You will need to obtain an Experience Object — a programmatic interface to the Monterosa / Interaction Cloud Experience you're launching — and then place it in your views:

JavaScript

import { 
  getExperience,
  embed,
} from '@monterosa/sdk-launcher-kit';

const experience = getExperience();

await embed(experience, 'container-id');

JavaScript (deprecated)

Then, simply place the Experience Object you've just created on the screen and it will initiate automatically.

In the Javascript SDK, the app will start loading as soon as embedded.

Additionally you can launch a specific Event within your app using the following snippet.

JavaScript

import { 
  getExperience,
  embed,
} from '@monterosa/sdk-launcher-kit';

const eventId = '<event id>';
const experience = getExperience({ 
  eventId,
  // Other ExperienceConfiguration values can be added, 
  // such as autoresizesHeight, hidesHeadersAndFooters, etc...
});

await embed(experience, 'container-id');

JavaScript (deprecated)

How to launch multiple Apps/Experiences

In some cases you may find it useful to embed multiple apps within your application. For example, if you have multiple games or shows you're covering and want each to have a vote associated with them, each set up to look differently in their own Project.

The SDK supports multiple apps by allowing you to configure multiple SDK instances as long as you provide a unique name to identify them.

JavaScript

import { configure } from '@monterosa/sdk-core';
import {
  getExperience,
  embed,
} from '@monterosa/sdk-launcher-kit';

const sdk1 = configure({
  host: '<host 1>',
  projectId: '<project 1>',
}, '<name 1>');

const sdk2 = configure({
  host: '<host 2>',
  projectId: '<project 2>',
}, '<name 2>');

const experience1 = getExperience(sdk1);
const experience2 = getExperience(sdk2);

await embed(experience1, '<container 1>');
await embed(experience2, '<container 2>');

JavaScript (deprecated)

Note that when launching multiple experiences, it is necessary to configure Identify Kit for each individual experience.

See the section here

How to configure Identify Kit for multiple apps

If you're embedding more than one app you'll need to set the credentials of each using the snippit below:

JavaScript

import { configure } from '@monterosa/sdk-core';
import { 
  setCredentials,
  getIdentify,
  getUserData,
} from '@monterosa/sdk-identify-kit';

const sdk1 = configure({ host: '<host 1>', projectId: '<project 1>' });
const sdk2 = configure({ host: '<host 2>', projectId: '<project 2>' });

const identify1 = getIdentify(sdk1);
const identify2 = getIdentify(sdk2);

await setCredentials(identify1, { token: '<token 1>' });
await setCredentials(identify2, { token: '<token 2>' });

const user1 = await getUserData(identify1);
const user2 = await getUserData(identify2);

JavaScript (deprecated)

Disposing of an Experience

Once the user is done with an Experience, you'll want to make sure that the resources used by the SDK are freed up. For instance, when they swap from one to another, or if they navigate back in your navigation hierarchy,

To do so, take the following steps:

• Remove the ExperienceView from the parent view or DOM element

• Ensure you don't have any reference to it in memory

Once you do that, the garbage collector or reference counter of your language of choice will take care of disposing of the memory used.