Onlo Mobile SDK for Flutter

Before you start

• Flutter 3.27+ and Dart 3.6+
• iOS 15+ or Android API 24+
• Android builds also need compile SDK 35 and Java 17

Quick start

Start anonymously even if your app has accounts. This proves the package, public key, network path, Messenger UI, and Inbox delivery before identity or push adds more moving parts.

1. Step 1

   Create a Flutter Mobile SDK key

   In Onlo, open WebChat → Install → Mobile app, choose Flutter, and select Generate key. Copy the public SDK key. It identifies this integration and is safe in app configuration; it is not the customer identity secret.

   Expected resultOnlo shows an active Flutter SDK key and the released package version.

2. Step 2

   Install the released package

   Add the package exactly once. Wrapper apps must not install the iOS or Android core separately.

   Install Flutter SDK 0.3.2dart

   Copy

   # pubspec.yaml
   dependencies:
     onlo_flutter: ^0.3.2
   
   $ flutter pub get

   Expected resultThe Flutter project resolves the Onlo import and builds.

3. Step 3

   Initialize, start an anonymous session, and open Messenger

   Initialize once during app startup. Start the customer session before the Support control calls present. Replace the example key with the public key copied from Onlo.

   Flutter · first working integrationdart

   Copy

   import 'package:onlo_flutter/onlo_flutter.dart'; // Flutter SDK 0.3.2
   
   Future<void> connectOnlo() async {
     await Onlo.initialize(sdkKey: 'onlo_public_sdk_key_from_dashboard');
     await Onlo.loginUnidentifiedUser();
   }
   
   Future<void> openSupport() => Onlo.present();

   Expected resultTap Support and the native Onlo Messenger opens with a message composer.

4. Step 4

   Prove the complete message path

   On the phone, send “Where is order #5832?”. Open Onlo Inbox and reply “Your order shipped this morning.” Return to WebChat → Install → Mobile app and refresh the SDK status.

   Expected resultThe conversation appears in Inbox, the reply appears in Messenger, and the target shows Connected with a recent Last seen time.

Identity verification

Do this only if customers already sign in to your app. Identity keeps conversations attached to the same customer across devices and app reinstalls. Anonymous apps can skip this section.

1. Step 1

   Generate the identity secret in Onlo

   Open WebChat → Install → Mobile app → Flutter → Identity verification and select Generate secret. Copy it directly into your backend secret manager. Never put this secret in the app, source code, build configuration, logs, or analytics.

   Expected resultOnly your authenticated backend can read the identity secret.

2. Step 2

   Mint a short-lived customer JWT on your backend

   Authenticate the app request first. Sign HS256 with the Onlo identity secret, use onlo-messenger as the audience, use your stable customer ID as sub, and expire the token within five minutes.

   Node.js backend · create userJwttypescript

   Return userJwt to the authenticated customer. Never return ONLO_MOBILE_IDENTITY_SECRET.

   Copy

   import {SignJWT} from 'jose';
   
   // Run on your backend after authenticating the app customer.
   const secret = new TextEncoder().encode(
     process.env.ONLO_MOBILE_IDENTITY_SECRET,
   );
   
   const userJwt = await new SignJWT({
     name: 'Alex Morgan',
     email: 'alex@example.com',
     customAttributes: {plan: 'pro'},
   })
     .setProtectedHeader({alg: 'HS256'})
     .setSubject('customer_12345')
     .setAudience('onlo-messenger')
     .setIssuedAt()
     .setExpirationTime('5m')
     .sign(secret);

   Expected resultThe app receives a fresh userJwt for customer_12345, not the signing secret.

3. Step 3

   Identify the customer and clear Onlo on logout

   Pass the fresh JWT straight to Onlo after your app signs in. Before your app switches accounts or finishes logout, wait for Onlo logout to complete.

   Flutter · login and logoutdart

   Copy

   Future<void> connectSignedInCustomer(String userJwt) =>
       Onlo.loginIdentifiedUser(userJwt: userJwt);
   
   Future<void> disconnectCustomer() => Onlo.logout();

   Expected resultOnlo Inbox shows Alex Morgan instead of an anonymous installation, and the next app account cannot inherit that conversation.

Push notifications

Push is optional. Add it after chat works so customers receive reply alerts while the app is in the background or terminated. Onlo should not show a system alert while the customer is already reading that conversation.

Before this section, configure each native runtime you ship: a Firebase project for Android and an Apple Developer APNs setup for iOS. Your Flutter push plugin must expose the raw provider token.

1. Step 1

   Configure the native push provider

   For Android, configure Firebase and a messaging plugin. For iOS, add the Push Notifications capability and register for APNs. The plugin must return the raw APNs token on iOS or the FCM registration token on Android.

   Expected resultYour Flutter push plugin returns a token for the current native runtime.

2. Step 2

   Give Onlo the provider credentials

   In Onlo, open WebChat → Install → Mobile app → Flutter → Push notifications. Upload Firebase service-account JSON for Android and/or an APNs .p8 key with its IDs and environment for iOS. Provider credentials belong only in Onlo—not Dart, the app bundle, or Git.

   Expected resultOnlo shows FCM ready, APNs ready, or both for the runtimes you ship.

3. Step 3

   Tell Onlo where this device can receive notifications

   Ask for notification permission from a clear customer action. After the Onlo customer session is ready, forward the current provider token and every later token rotation. Forward Onlo payloads when the customer taps a notification.

   Flutter · token and notification tapdart

   Copy

   import 'dart:io';
   import 'package:onlo_flutter/onlo_flutter.dart';
   
   // Your push plugin requests permission and supplies this device token.
   await Onlo.setPushToken(
     provider: Platform.isIOS ? OnloPushProvider.apns : OnloPushProvider.fcm,
     token: deviceToken,
   );
   
   // Forward an Onlo notification when the customer taps it.
   await Onlo.handlePushNotification(payload);

   Expected resultThe current device appears under registered installations in the Onlo push status.

4. Step 4

   Test the provider, then test a real reply

   First use Send to selected installation. Then send a customer message, background or close the app, and reply from Inbox. Test the real reply path because the provider test and conversation delivery are separate server paths.

   Expected resultThe selected-device test arrives, the real Inbox reply arrives while the app is backgrounded or closed, and tapping it opens the intended conversation.

Error codes

Use the stable code to decide what the app should do. Show customers a plain Support-unavailable message; record only the code, SDK version, platform, time, and request ID. Never log customer JWTs, push tokens, messages, Firebase credentials, or APNs keys.

Versions

These snippets target the latest public release, 0.3.2. Upgrade the package before debugging a client-version error. Onlo publishes a migration guide only when a release changes an installation step or public API.

The plugin resolves the native Onlo core for each host. Measure archived iOS and Android release builds; do not add either native core separately.

• Flutter 3.27+
• Dart 3.6+
• iOS 15+ or Android API 24+
• Android compile SDK 35 and Java 17