Skip to content

Commit 6098684

Browse files
authored
feat(in_app_messaging): add custom Flutter display for campaigns
1 parent 5d73bd8 commit 6098684

19 files changed

Lines changed: 2707 additions & 323 deletions

File tree

‎docs/in-app-messaging/_customize-messages.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,28 @@ The action's format depends on which message layout you choose. Modals get
3131
action buttons with customizable button text content, text color, and background
3232
color. Images and top banners, on the other hand, become interactive and invoke
3333
the specified action when tapped.
34+
35+
## Render campaigns with Flutter widgets
36+
37+
By default, In-App Messaging draws native templates (banner, modal, card,
38+
image-only). To render campaigns with your own Flutter UI instead, opt in to
39+
custom display, listen for the campaign payload, and report impression, click,
40+
and dismiss back to the SDK:
41+
42+
```dart
43+
FirebaseInAppMessaging.instance.onMessageDisplay.listen((message) async {
44+
await message.impress();
45+
// Draw your own widgets using message.title, body, imageUrl, actions, data.
46+
// The plugin does not open action URLs — your app should.
47+
await message.click(message.primaryAction ?? message.action!);
48+
await message.dismiss();
49+
});
50+
51+
await FirebaseInAppMessaging.instance.setCustomDisplayEnabled(true);
52+
```
53+
54+
Until `setCustomDisplayEnabled(true)` is called, native templates keep working.
55+
Listening to `onMessageDisplay` alone does not replace native UI.
56+
57+
If you also listen to `onMessageClicked` / `onMessageImpression`, those
58+
lifecycle streams still fire when your Flutter UI reports click and impress.

‎docs/in-app-messaging/_modify-message-behavior.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,8 @@ In your campaigns, you can specify custom data in a series of key/value pairs.
4848
When users interact with messages, this data is available for you to, for example,
4949
display a promo code.
5050

51-
To do so, you will have to use the platform-native APIs.
52-
See the documentation for [iOS](/docs/in-app-messaging/modify-message-behavior?platform=ios#use_campaign_custom_metadata)
53-
and [Android](/docs/in-app-messaging/modify-message-behavior?platform=android#use_campaign_custom_metadata).
51+
When you opt in to [custom Flutter display](/docs/in-app-messaging/customize-messages?platform=flutter),
52+
those key/value pairs are available on `InAppMessage.data`.
5453

5554

5655
## Temporarily disable in-app messages

‎packages/firebase_in_app_messaging/firebase_in_app_messaging/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,24 @@ FirebaseInAppMessaging.instance.onMessageClicked.listen((event) {
2828
`onMessageImpression`, `onMessageDismissed` and `onMessageDisplayError` report
2929
the rest of the message lifecycle.
3030

31+
### Custom Flutter display
32+
33+
To render campaigns with your own widgets instead of the native templates:
34+
35+
```dart
36+
FirebaseInAppMessaging.instance.onMessageDisplay.listen((message) async {
37+
await message.impress();
38+
// Draw your own UI, then:
39+
// await message.click(message.action!);
40+
// await message.dismiss();
41+
});
42+
43+
await FirebaseInAppMessaging.instance.setCustomDisplayEnabled(true);
44+
```
45+
46+
The plugin does not open action URLs. You must report impress / click / dismiss
47+
so campaign analytics keep working.
48+
3149
## Issues and feedback
3250

3351
Please file FlutterFire specific issues, bugs, or feature requests in our [issue tracker](https://github.com/firebase/flutterfire/issues/new).

0 commit comments

Comments
 (0)