Web - 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.
​NPM Package​
1
npm install --save @gistproduct/web
Copied!
1
import Gist from '@gistproduct/web';
Copied!
CDN
1
<script src="https://code.gist.build/web/2.9.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!