Gist
Search…
Web
Gist gives you access to a library of ready built micro-experiences that can be easily dropped into your application without writing a line of code.

Installation

You can either install our NPM package or by using the script directly.
1
npm install --save @gistproduct/web
Copied!
1
import Gist from '@gistproduct/web';
Copied!

CDN

1
<script src="https://code.gist.build/web/2.5.0/gist.min.js"></script>
Copied!

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 receive broadcasts. This setting defaults to false.
    Logging is optional.
1
Gist.setup({ organizationId: "your-organization-id", useGuestSession: false, logging: true });
Copied!

User Token

If your app is relying on Gist’s webhook 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, for example, login or registration.
1
Gist.setUserToken("unique-user-token");
Copied!
An optional expiry date parameter can be sent.
To clear the user token:
1
Gist.clearUserToken()
Copied!

Current Route

Since messages can be targeted to show on specific pages, Gist uses window.location to figure out where the user is at, this can be overridden by calling the setCurrentRoute.
1
Gist.setCurrentRoute("users/home");
Copied!

Broadcasts

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

Subscribing

1
Gist.subscribeToTopic("announcements")
Copied!

Unsubscribing

1
Gist.unsubscribeFromTopic("announcements")
Copied!

Clear All Topics

1
Gist.clearTopics()
Copied!

Manually Triggering In-App Messages

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

Embed Message

1
Gist.embedMessage({ messageId: "message-id" }, "element-id");
Copied!
1
Returns: Instance Id
Copied!

Show Modal Message

Position supports the following values: center, top, bottom
1
Gist.showMessage({ messageId: "message-id", position: "top" });
Copied!
1
Returns: Instance Id
Copied!

Dismiss Message

1
Gist.dismissMessage("instance-id")
Copied!

Message Properties

When creating the message object, custom properties can be added to a message. Strings, objects, and arrays can be referenced within a message.
1
{ messageId: "message-id", properties: { name: "Paul" } }
Copied!

Event Handling

The library exposes several events that 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.
1
Gist.events.on('messageShown', message => {
2
console.log(`onMessageShown: ${message.messageId}`);
3
});
4
5
Gist.events.on('messageDismissed', message => {
6
console.log(`onMessageDismissed: ${message.messageId}`);
7
});
8
9
Gist.events.on('messageError', message => {
10
console.log(`onMessageError: ${message.messageId}`);
11
});
12
13
Gist.events.on('messageAction', params => {
14
console.log(`onMessageAction, Action: ${params.action} on route: ${params.message.currentRoute}`);
15
});
Copied!
Last modified 24d ago