Web

Installation

<script src="https://code.gist.build/web/1.3.0/gist.min.js"></script>

Setup

Gist can be initialized anywhere within your app.

• The organizationId property can be retrieved from the Gist dashboard.

• When useGuestSession is set to true, the guest user will be able to recieve broadcasts. This setting defaults to false.

• Logging is optional.

Gist.setup({ organizationId: "your-organization-id", useGuestSession: false, logging: true });

User Token

If your app is relying on Gist’s web hook service to trigger in-app messages, a user token must be set. This user token should be generated by your services and set at any point during runtime, ex: login or registration.

Gist.setUserToken("unique-user-token");

An optional expiry date parameter can be sent.

To clear the user token:

Gist.clearUserToken()

Broadcasts

Broadcasts enable you to receive messages based on topics the client is subscribed to.

Subscribing

Gist.subscribeToTopic("announcements")

Unsubscribing

Gist.unsubscribeFromTopic("announcements")

Clear All Topics

Gist.clearTopics()

Manually Triggering In-App Messages

Gist gives you the option to programmatically trigger in-app messaging flows within your app.

Show Message

Gist.showMessage({ messageId: "message-id" });

Adding Message Properties

Gist.showMessage({ messageId: "message-id", properties: { name: "Paul" } });

Dismiss Message

Gist.dismissMessage()

Event Handling

The library exposes a number of events which you can hook into, this gives you the option to know when a message is shown, dismissed or when an action occurs within the message.

Gist.events.on('messageShown', message => {
  console.log(`onMessageShown: ${message.messageId}`);
});
​
Gist.events.on('messageDismissed', message => {
  console.log(`onMessageDismissed: ${message.messageId}`);
});
​
Gist.events.on('messageError', message => {
  console.log(`onMessageError: ${message.messageId}`);
});
​
Gist.events.on('messageAction', params => {
  console.log(`onMessageAction, Action: ${params.action} on route: ${params.currentRoute}`);
});