Getting Started

Search…
Getting Started
Everything you need to know about Gist.
This guide will walk you through the basic setup of Gist, how to install the library, and send a personalized message to a customer.
Adding the Gist library
Web
iOS
Android
React Native
Flutter
The Gist library can be added either via an NPM package or by using the script directly.
​
NPM Package
npm install --save @gistproduct/web
Import the dependency into your file
import Gist from '@gistproduct/web';
​
CDN
<script src="https://code.gist.build/web/2.10.0/gist.min.js"></script>
Add the Gist pod into your Podfile
pod 'Gist', '~> 2.1.0'
Add the Gist library to your app's build.gradle
implementation 'build:gist:2.+'
​
repositories {
    maven {
        url 'https://maven.gist.build'
    }
}
Add the Gist library via NPM
npm install @gistproduct/react-native
​
Open the build.gradle file located inside the android directory and add the Gist maven repository.        
allprojects {
    repositories {
        ...
        maven { url 'https://maven.gist.build' }
    }
}
​
Link the Gist pod with react native project
npx pod-install
Add the Gist library
dependencies:
  flutter:
    sdk: flutter
​
  gist_flutter: ^1.1.1
​
On Android
Open the Project build.gradle file and update your kotlin version
ext.kotlin_version = '1.5.30'
Open the App build.gradle file and update the minimum SDK version
minSdkVersion 19
Note: If a version is higher then the one specified here, you can leave it as is.
​
On iOS
Open the project's .xcworkspace file, select the project and make sure the deployment target is 10 or higher.
​
Setting up Gist
Copy your Organization Id from Integrations​
Web
iOS
Android
React Native
Flutter
Gist.setup({ organizationId: "your-organization-id" });
Gist.shared.setup(organizationId: "your-organization-id")
GistSdk.getInstance().init(this, "your-organization-id")
Gist.setup("your-organization-id");
Gist.setup("your-organization-id");
Identifying your customers
Link your unique customer identifier to Gist
Web
iOS
Android
React Native
Flutter
Gist.setUserToken("unique-user-token");
Gist.shared.setUserToken("unique-user-token")
GistSdk.getInstance().setUserToken("unique-user-token")
Gist.setUserToken("unique-user-token");
Gist.setUserToken("unique-user-token");
Previewing a message
The message editor enables you to preview messages directly in your product. To make the message feel more personal, we're going to include the customer's name.
Added $properties.name to the markdown component
In the preview screen, we add an example name property, choose the modal position, and input our unique user token (your unique user identifier)
Congratulations! You managed to integrate the Gist library and send your first message. If you're interested in integrating Gist with your router to show messages on specific screens, subscribe to topics so that you can send broadcasts, and more. Every library has its own documentation:
​Web​
​iOS​
​Android​
​React Native​
​Flutter​
Ways to send messages
Gist supports both direct user messages and broadcasts, this means that you can either send personalized messages directly to a specific user or reach an audience within your user base.
If you're looking to send personalized in-app messages or reach an audience using data from your CRM our webhook can help you achieve that.
To reach audiences with no additional integration, Gist offers a feature called Broadcasts. This enables you to schedule and send in-app messages from our app.
Support
If you have any questions or need help setting up Gist you can reach us using live chat or through email.
In-line Messages
Last modified 1mo ago
Copy link
Outline
Adding the Gist library
Setting up Gist
Identifying your customers
Previewing a message
Ways to send messages
Support