Search…
Web 2mee -- Beta
Sending messages to your website

The Website SDK -- Beta

The SDK consists of a javascript file. You are recommended to link to the version on the 2mee CDN. This will allow you you remain up to date without having to check for updates.

Installation - Beta

For a single page website the full install is shown below. The script is loaded asynchronously to avoid delaying page loaded. SDK commands are then pushed onto a command layer and processed once the script has loaded. The Appear2mee SDK is initialised with a initWithID command which requires an ID to associate the website with the messages that your organisation will post. This code should be place in the <head></head> section of the webpage.
1
<script src="https://exchange.cdnedge.bluemix.net/web/appear2mee-beta.js" async></script>
2
<script>
3
window.Appear2meeLayer = window.Appear2meeLayer || [];
4
function appear2mee() { Appear2meeLayer.push(arguments);}
5
6
var pullMessages = false; // do not check exchange for popup messages
7
appear2mee("initWithID","<Web ID From Exchange Or App>",pullMessages);
8
</script>
Copied!
The change here is to stop polling for new popup messages and of course the beta version appear2mee-beta.js is the name of the SDK script.
1
<script src="https://exchange.cdnedge.bluemix.net/web/appear2mee-beta.js" async></script><script>
Copied!

Inline Messages

Normally messages popup and block other activity. Inline messages are effectively a named video placed in an iframe. To use an inline message a Capsule must be used. A Capsule is a named message on the 2mee Platform. It has the advantage that the video can be replaced without changing the name. For example a "welcome" message can be replaced without changing the web site as the inline message displays the contents of the Capsule. An inline message is placed in html using the code below. The Appear2mee SDK must also be include in the <head> section of the page.
This code defines an iframe in which the message will be displayed. The this argument refers to the iframe (it is this iframe) and the last argument is the name of the HoloCapsule defined in the 2mee Platform.
1
<iframe src="about:blank"
2
onload='appear2mee("inlineMessage",this, "myMessageNameFrom2meeExchange");'>
3
</iframe>
Copied!
In the beta SDK the inlineMessage can be made more interactive using some extra functions and callbacks messages from the player. The inline message has an extra parameter a unique id they the developer defines. This is used to identify which (if you have more than one) inline message is returning messages.
1
<iframe src="about:blank"
2
onload='appear2mee("inlineMessage",this, "myMessageNameFrom2meeExchange","myunique_uuid");'>
3
</iframe>
Copied!

Capsule Information

Information about a capsule can obtained using the appear2mee("capsuleMessageInfo", name, callback) SDK method. The callback function with receive an object and a the capsule name. If the capsule name is null, then a capsule with the capsuleMessageInfo arg name does not exist. The data object contains a link field which has a string with the message action link address. Not all capsules have a "call to action" link, if not link has be set on the 2mee exchange then the link value will be null.
1
// callback from capsuleMessageInfo
2
function capsuleInfo(data,capsuleName) {
3
if (capsuleName == null) { // there is no capsule. It does not exist!
4
document.getElementById('framePosition').style.setProperty('display', 'none');
5
} else {
6
hasLink = data.link;
7
}
8
}
9
10
window.onload = function() {
11
// check capsule exist and if it has an associated link.
12
appear2mee("capsuleMessageInfo",theCapsuleToDisplay,capsuleInfo);
13
...
14
...
15
}
16
Copied!

Inline Message state callbacks.

The state of inline messages can be received by registering a callback function using the appear2mee("setInlineMessageStateFn", callback) method. This will set your callback function to receive stage messages from all the inlineMessages that are active on your page.
The callback function has three arguments, the unique id you assigned to the inline message, the state of that message, at present one of PlayReady, PlayEnd, playStarted, and loading, and a value argument. The value argument is null except in the loading state, where it will give the percentage of the messages current loaded (0.0 -> 100.0).
1
appear2mee("setInlineMessageStateFn", inlineMessageState);
2
3
function inlineMessageState(messageId, state, value) {
4
if (state == "playReady") {
5
console.log("msg:" + messageId + " with state:" + state);
6
return;
7
}
8
if (state == "playEnd") {
9
console.log("msg:" + messageId + " with state:" + state);
10
return;
11
}
12
if (state == "playStarted") {
13
console.log("msg:" + messageId + " with state:" + state);
14
return;
15
}
16
if (state == "loading") { // update loading indicator
17
console.log("msg:" + messageId + " with state:" + state + " and value:" + value );
18
return;
19
}
20
console.log("msg:" + messageId + " with state:" + state);
21
}
Copied!
The state can be used to control how the message iframe is presented.

Inline Message play/stop controls.

An inline message play and stop play can be controlled using SDK methods. The methods require the unique id you assigned to the inline message to determine which inline message to start/stop.
The appear2mee("inlineMessagePlay", "myunique_uuid") method will start play (only if the message is loaded and ready to play).
NOTE: A messages cannot play until the playReady state has been sent. The playReady state can be used to activate play/stop buttons.
1
appear2mee("inlineMessagePlay", "c51c618b-5765-4abf-99a5-de7e59283007");
Copied!
The appear2mee("inlineMessageStop", "myunique_uuid") method will stop play. A call to inlineMessageStart after a stop does not resume the play but start the play from the beginning. This is because messages are short, and restarting is better than having a few seconds of remaining message played. It also has the benefit of simplifying the controls.
1
appear2mee("inlineMessageStop", "c51c618b-5765-4abf-99a5-de7e59283007");
Copied!
NOTE: All modern browsers require user an event (button press) before videos are played. It is not normally possible to call inlineMessagePlay to start a video programatically without the call being attached to a click event listener.

Example

An example using these features is available here.
Example of inlineMessage controls.
The example uses a loading-bar and an SVG image as the loader.
Here the once loading has completed the player is faded in and the loader is faded out. Play starts with tap on play button/player, after two seconds of play a tap on player will open a new browser tab to 2mee.com. After play ends the play button (image) will return after a five second wait, allowing another play to start.
Last modified 1mo ago