@nativescript/firebase-in-app-messaging
Version:
NativeScript Firebase - In App Messaging
130 lines (90 loc) • 5.65 kB
Markdown
# @nativescript/firebase-in-app-messaging
## Contents
- [Intro](#intro)
- [Set up your app for Firebase](#set-up-your-app-for-firebase)
- [Add the Firebase In-App Messaging SDK to your app](#add-the-firebase-in-app-messaging-sdk-to-your-app)
- [Firebase In-App Messaging limitations](#firebase-in-app-messaging-limitations)
- [Create message campaigns](#create-message-campaigns)
- [Control messages display](#control-messages-display)
- [Trigger contextual messages](#trigger-contextual-messages)
- [API](#api)
- [InAppMessaging class](#inappmessaging-class)
- [app](#app)
- [isAutomaticDataCollectionEnabled](#isautomaticdatacollectionenabled)
- [isMessagesDisplaySuppressed](#ismessagesdisplaysuppressed)
- [triggerEvent()](#triggerevent)
- [License](#license)
## Intro
This plugin allows you to use the [Firebase In-App Messaging SDK](https://firebase.google.com/docs/in-app-messaging) in your NativeScript app.
[](https://www.youtube.com/watch?v=5MRKpvKV2pg)
## Set up your app for Firebase
You need to set up your app for Firebase before you can use the Firebase in-app messaging. To set up and initialize Firebase for your NativeScript app, follow the instructions on the documentation of the [@nativescript/firebase-core](../firebase-core/) plugin.
## Add the Firebase In-App Messaging SDK to your app
To add the Firebase In-App Messaging SDK to your app follow these steps:
1. Install the `@nativescript/firebase-in-app-messaging` plugin by running the following command in the root directory of your project.
```cli
npm install @nativescript/firebase-in-app-messaging
```
2. Add the SDK by importing the `@nativescript/firebase-in-app-messaging` module in your app's main file (e.g. `app.ts` or `main.ts`).
```ts
import '@nativescript/firebase-in-app-messaging';
```
## Firebase In-App Messaging limitations
According to a github issue https://github.com/firebase/firebase-ios-sdk/issues/4768, Firebase In-App Messaging allows only 1 campaign per day on app foreground or app launch. This limit is to prevent you from accidentally overwhelming your users with non-contextually appropriate messages. However, if you use contextual triggers (for example Analytics events or programmatically triggered in-app-messaging campaigns), there is no daily rate limit.
## Create message campaigns
To create a message campaign, go to the `In-App Messaging` page in the [Firebase Console](https://console.firebase.google.com/u/0/project/_/inappmessaging) and follow the instructions there. You can create campaigns and customize elements such as Image, Banner, Modal & Cards to appear on predefined events (e.g. purchase).
Any published campaigns from the Firebase Console are automatically handled and displayed on your user's device.
## Control messages display
To control whether to display messages or not, set the `isMessagesDisplaySuppressed` property of the `InAppMessaging` instance to `true` or `false`. The `InAppMessaging` instance is returneb calling the `inAppMessaging()` on the FirebaseApp instance. By default, `isMessagesDisplaySuppressed` is set to `false` which means messages will be displayed.
```ts
import { firebase } from '@nativescript/firebase-core';
import '@nativescript/firebase-in-app-messaging';
async function bootstrap() {
firebase().inAppMessaging().isMessagesDisplaySuppressed = true;
}
async function onSetup(user) {
await setupUser(user);
// Allow user to receive messages now setup is complete
firebase().inAppMessaging().isMessagesDisplaySuppressed = false;
}
```
> **Note:** The suppressed state is not persisted between restarts, so ensure it is called as early as possible ideally in the app bootstrapping file(`app.ts` or `main.ts`).
## Trigger contextual messages
To trigger contextual messages, call the `triggerEvent()` method of the `InAppMessaging` instance with the event name as a parameter. This triggers the display of any messages that are configured on the Firebase Console.
```ts
import { firebase } from '@nativescript/firebase-core';
firebase().inAppMessaging().triggerEvent('purchase');
```
## API
### InAppMessaging class
#### app
```ts
inAppMessagingApp = firebase().inAppMessaging().app;
```
The `app` property returns the `FirebaseApp` instance that the current `InAppMessaging` instance is associated with.
---
#### isAutomaticDataCollectionEnabled
```ts
firebase().inAppMessaging().isAutomaticDataCollectionEnabled = true;
```
For the description of this property, see [isAutomaticDataCollectionEnabled](https://firebase.google.com/docs/reference/android/com/google/firebase/inappmessaging/FirebaseInAppMessaging#isAutomaticDataCollectionEnabled()) on the Firebase documentation.
---
#### isMessagesDisplaySuppressed
```ts
firebase().inAppMessaging().isMessagesDisplaySuppressed = true;
// or
firebase().inAppMessaging().isMessagesDisplaySuppressed = false;
```
For the description of this property, see [areMessagesSuppressed](https://firebase.google.com/docs/reference/android/com/google/firebase/inappmessaging/FirebaseInAppMessaging#areMessagesSuppressed()) on the Firebase documentation.
---
#### triggerEvent()
```ts
firebase().inAppMessaging().triggerEvent(eventId);
```
| Parameter | Type | Description |
| --- | --- | --- |
| `eventId` | `string` | The name of the event to trigger.
For the description of this method, see [triggerEvent](https://firebase.google.com/docs/reference/android/com/google/firebase/inappmessaging/FirebaseInAppMessaging#triggerEvent(java.lang.String)) on the Firebase documentation.
---
## License
Apache License Version 2.0