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.


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


<script src=""></script>


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.
Gist.setup({ organizationId: "your-organization-id", useGuestSession: false, logging: true });

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.
An optional expiry date parameter can be sent.
To clear the user token:

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.


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





Clear All Topics


Manually Triggering In-App Messages

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

Embed Message

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

Show Modal Message

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

Dismiss Message


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.
{ messageId: "message-id", properties: { name: "Paul" } }

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.'messageShown', message => {
console.log(`onMessageShown: ${message.messageId}`);
});'messageDismissed', message => {
console.log(`onMessageDismissed: ${message.messageId}`);
});'messageError', message => {
console.log(`onMessageError: ${message.messageId}`);
});'messageAction', params => {
console.log(`onMessageAction, Action: ${params.action} on route: ${params.message.currentRoute}`);