# Add live chat to a Flutter app: Frosvo SDK guide

Source: https://frosvo.com/docs/add-chat-to-flutter-app
Updated: 2026-10-25

Add the Frosvo chat widget to a Flutter app for iOS and Android. Pass your website key, show the chat on a route, and open conversations from push notifications.

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`](/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](/docs/identify-signed-in-customers) 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](/docs/mobile-apps). If you build your own screens, the [developer hub](/developers) has the REST API and real-time events. For other problems, try [troubleshooting](/docs/troubleshooting). The same chat is available for [Android](/docs/add-chat-to-android-app), [iOS](/docs/add-chat-to-ios-app) and [React Native](/docs/add-chat-to-react-native-app).

## Common questions

### Does the Flutter SDK work on both iOS and Android?

Yes. The same package covers iOS and Android. You add it from a local path and it needs the webview_flutter package.

### How do I show the chat?

Put the FrosvoChat widget on a route, for example inside a Scaffold, and pass your website key. The close button pops the route, or calls your onClose.

### Can I change the user while the chat is open?

Yes. Use a FrosvoChatController to change the user or the push token while the chat is open.

### How do push notifications work?

Add a Firebase service account and or an Apple Push key under Settings, Mobile apps, then pass the device token as pushToken with pushPlatform. Tapping a notification can open that conversation.