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.
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="https://code.gist.build/web/stable/gist.min.js"></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 });
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.
Gist.setUserToken("unique-user-token");
An optional
expiry date
parameter can be sent.To clear the user token:
Gist.clearUserToken()
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
.Gist.setCurrentRoute("users/home");
Broadcasts enable you to receive messages based on topics the client is subscribed to.
Gist.subscribeToTopic("announcements")
Gist.unsubscribeFromTopic("announcements")
Gist.clearTopics()
Gist gives you the option to programmatically trigger in-app messaging flows.
Gist.embedMessage({ messageId: "message-id" }, "element-id");
Returns: Instance Id
Position supports the following values:
center
, top
, bottom
Gist.showMessage({ messageId: "message-id", position: "top" });
Returns: Instance Id
Gist.dismissMessage("instance-id")
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" } }
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.
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.message.currentRoute}`);
});
Last modified 1yr ago