Add live chat to a Flutter app: Frosvo SDK guide

Customers stuck inside your app should be one tap from help. The Frosvo package for Flutter shows the same chat as your website, with an unread count and push notifications for replies, on iOS and Android. Conversations arrive in your shared inbox.

What do I need before I start?

• A Flutter app for iOS and/or Android.
• A Frosvo account with the website that stands for your app added under Settings → Websites, and its website key copied.
• For push notifications: a Firebase service account and/or an Apple Push key.

How do I add the package?

1. Download the Flutter SDK from Settings → Mobile apps, or from /downloads/frosvo-flutter.zip, and unzip it into your project, for example packages/frosvo_chat.
2. Add it to your pubspec.yaml:

``yaml dependencies: frosvo_chat: path: packages/frosvo_chat ``

How do I show the chat?

```dart import 'package:frosvo_chat/frosvo_chat.dart';

Navigator.of(context).push(MaterialPageRoute( builder: (_) => Scaffold( body: SafeArea( child: FrosvoChat( websiteKey: 'your-website-key', userName: 'Pat Lee', // optional userEmail: 'pat@example.com', // optional userHash: hashFromYourServer, // optional: identity verification pushPlatform: 'fcm', pushToken: fcmToken, // optional conversationId: fromNotification, // optional onUnread: (n) => setState(() => badge = n), ), ), ), )); ```

The name, email and hash are optional. The hash proves who the user is: see show signed-in customers by name for how your server makes it. The close button pops the route, or calls onClose. Use a FrosvoChatController to change the user or the push token while the chat is open. To use another Frosvo server, pass baseUrl.

How do I add push notifications?

1. In Frosvo, open Settings → Mobile apps and add a Firebase service account and/or an Apple Push key.
2. Pass the token (for example FirebaseMessaging.instance.getToken()) as pushToken with pushPlatform: 'fcm', or a raw Apple token with pushPlatform: 'apns'.
3. When a notification is tapped, check isFrosvoNotification(message.data) and open the chat with conversationId: message.data['conversation_id'].

Replies are pushed only when the person has not already read them on screen.

How do I sign someone out?

Pass a FrosvoChatController to the widget and call reset() when someone signs out of your app. The open chat forgets the person, their drafts and this phone's notifications for them, and the next person starts fresh:

``dart final controller = FrosvoChatController(); // FrosvoChat(websiteKey: 'your-website-key', controller: controller) controller.reset(); ``

The controller also has setUser and setPushToken for changing them while the chat is open.

How do I test it?

1. Run the app, open the chat route from your Help button and send a message.
2. Open the Frosvo desk: the message is in the shared inbox, labelled with your website.
3. Reply from the desk. With the app in the background, a push notification should reach the phone; tap it and check the right conversation opens.
4. Sign out of your app, call reset() on the controller and check the next person starts a fresh conversation.

What if it does not work?

• The chat opens blank. Check the website key, the phone's connection, and that webview_flutter is available to your app.
• No push notification arrives. Check the credentials are saved for this website and the token reached pushToken.
• The wrong person's history shows. Pass a FrosvoChatController and call reset() when someone signs out (see below).

For the overview of all four SDKs and push, see chat in your mobile apps. If you build your own screens, the developer hub has the REST API and real-time events. For other problems, try troubleshooting. The same chat is available for Android, iOS and React Native.