In-app messages and carousels

CrmOverlay, in your MaterialApp’s builder (Initialise), shows in-app messages over every page, one at a time, once setReady(true) has been called. The facade checks in for messages when a user signs in, when the app comes back to the front, and after each batch of events.

Nothing the overlay shows changes your layout. Your pages keep their size, their top bar and their MediaQuery; messages lie over them.

What each looks like

• A banner slides in over the top of the screen: a strip in one colour from the top, or a floating card under the status bar. A tap beside it reaches your page. The user closes it with its close button or a swipe. It goes away while the keyboard is up, and while a larger message is showing.
• A post opens in a sheet sized to it: iOS’s sheet with a grabber, or Material 3’s with a handle and the predictive back gesture. A long post takes the whole screen; its buttons stay at the foot.
• A survey that is small opens in the same sheet and grows or shrinks with each step. A large survey takes the whole screen. Once it has an answer, Back goes back a step, and leaving asks “Discard your answers?”.
• A carousel is screens the user moves through, which can branch on their answers. It opens as a sheet (the default), a card in the middle of the screen, or the whole screen, as your team chose.

However a user leaves a message (its close button, a swipe, a tap outside, or Back), it counts as dismissed. A button whose link your followable does not allow is not drawn. The phone’s reduce-motion setting turns every animation off.

Carousels

Each button and each answer goes where your team drew it, Back returns through the screens seen, and PurrCRM is told each answer, each button, and the way the user took. A button can ask for a permission (notifications, location) through your askPermission hook; the carousel goes on whatever the answer.

The look follows your theme (the CrmTheme accent, your colour scheme, light and dark), the phone’s text size (up to twice, scrolling rather than clipping) and its reduce-motion setting. To choose the platform’s look, or to show carousels your own way, hand the overlay a presenter:

CrmOverlay(
  navigatorKey: navigatorKey,
  carouselPresenter: const CrmFlutterCarouselPresenter(
    platform: TargetPlatform.iOS,
  ),
  child: child!,
)

A CrmCarouselPresenter of your own is given the message and a CrmCarouselSession to report what the user did.

Showing a message on some screens

Your team can show a message only on some screens (“Show on screens”). Name each screen as it shows, with the same name every time:

crm.screen('wallet');

The package holds such a message until one of its screens is on. An app that names no screen is never sent one.

A message opened by its link

A post, carousel or survey can be opened by a link (<link base>/messages/show/<id>), for example from an email. handleLink shows it over the page (Links), whatever its audience says.

Try them

The example app’s Message lab sends each kind of message to the phone at once over the fake server. Against your own PurrCRM, use Try it on my test phone in any message’s editor.