Skip to content

journeyapps/journey-iframe-client

Repository files navigation

journey-iframe-client

npm version CircleCI

A library used inside of an HTML component in a JourneyApps app to enable sending messages to and receiving messages from the JourneyApps Container.

Installation

npm install journey-iframe-client

Basic Usage

Sending messages

// In your HTML component

let client = new JourneyIFrameClient();

let result = await client.post('sum', 19, 23);
console.log(`The answer to life, the universe and everything is ${result}`);

Note: .post calls that take a long time to resolve will cause the JourneyApps Container to bring up a blocking spinner. To make a .post call without bringing up a blocking spinner, use .postNonBlocking

// In your view's JS

component.html().on('sum', function(p1, p2) {
  return p1 + p2;
});

Note: .on handlers can be initialized anywhere in your view's JS, as long as it happens before messages are posted to them. If you need the handler ready from the view's initialization, initialize them in the view's init() function.

Receiving messages

// In your HTML component

let client = new JourneyIFrameClient();

let tasks;

client.on('sendTasksToClient', function(value) {
  tasks = value;
});
// In your view's JS

function sendTasksToClient() {
  component.html().post('sendTasksToClient', getTasksToSend());
}

Known limitation: .post cannot be called from your view's init() function, since the HTML component has not been initialized yet.

Methods

post(cmd: string, param1?: any, ..., paramN?: any) : Promise<any>
postNonBlocking(cmd: string, param1?: any, ..., paramN?: any) : Promise<any>
on(cmd: string, (param1?: any, ..., paramN?: any) => any)

Developing

Running tests

We use Jest to test this library.

To run tests:

yarn test

Publishing a new version

yarn version # This sets the new version in package.json and creates a tag
git push origin master --tags # CircleCI will take care of the rest