Introducing Crisp Chat: Enhance Your Flutter Apps with Real-time Customer Support
Tags: flutter, dart
Published: 2024-06-26 10:18:07

## Boost User Satisfaction with Easy-to-Implement, Native Chat Functionality on Android & iOS

Are you looking to integrate seamless customer support directly into your Flutter applications? Look no further than Crisp Chat, a powerful Flutter plugin designed to bring Crisp's renowned live chat functionality right into your mobile apps on both Android and iOS platforms.

### Why Crisp Chat?

Crisp Chat offers a straightforward way to engage with your app users in real-time, allowing you to:

- **Connect with Website Visitors:** Engage directly with your users, answer queries, and provide support instantly.
- **Integrate Favorite Tools:** Seamlessly integrate Crisp with your existing tools for enhanced workflow.
- **Deliver Exceptional Customer Experience:** Offer personalized support, troubleshoot issues, and build lasting customer relationships.

### Key Features

- **Null Safety Enabled:** Utilize the latest Flutter capabilities for enhanced stability and performance.
- **Easy to Use:** Integrate Crisp Chat with minimal setup and intuitive API.
- **Customizable:** Tailor the chat experience to match your app's branding and user interface.
- **User Configuration:** Configure users with company details and geolocation for targeted interactions.
- **Cross-platform Support:** Fully tested and compatible with both Android and iOS platforms.

### Installation Guide

To get started, add Crisp Chat as a dependency in your `pubspec.yaml` file:

```yaml
dependencies:
  flutter:
    sdk: flutter
  crisp_chat: ^2.0.2
```

### Setup Instructions:

#### iOS Setup:
Add privacy usage descriptions for camera, photo library, and microphone in `Info.plist`:

- Key: Privacy - Camera Usage Description and a usage description.
- Key: Privacy - Photo Library Additions Usage Description and a usage description.
- Key: Privacy - Microphone Usage Description and a usage description.

If editing `Info.plist` as text, add:

```xml
<key>NSCameraUsageDescription</key>
<string>your usage description here</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>your usage description here</string>
<key>NSMicrophoneUsageDescription</key>
<string>your usage description here</string>
```

#### Android Setup:
Grant internet permission and adjust minimum SDK versions in `AndroidManifest.xml` and `build.gradle`:

- Add Internet permission in `AndroidManifest.xml` in your `android/app/src/main/AndroidManifest.xml` file:

```xml
<uses-permission android:name="android.permission.INTERNET"/>
```

- Change the minimum Compile SDK version to 34 (or higher) in your `android/app/build.gradle` file:

```groovy
compileSdkVersion 34
```

- Change the minimum Android SDK version to 21 (or higher) in your `android/app/build.gradle` file:

```groovy
minSdkVersion 21
```

## Usage Example:

```dart
import 'package:flutter/material.dart';
import 'package:crisp_chat/crisp_chat.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final String websiteID = "YOUR_WEBSITE_ID";
  late CrispConfig config;

  @override
  void initState() {
    super.initState();
    config = CrispConfig(
      websiteID: websiteID,
      tokenId: "Token Id",
      sessionSegment: 'test_segment',
      user: User(
        avatar: "https://storage.googleapis.com/cms-storage-bucket/6a07d8a62f4308d2b854.svg",
        email: "user@user.com",
        nickName: "Nick Name",
        phone: "5555555555",
        company: Company(
          companyDescription: "Company Description",
          name: "Company Name",
          url: "https://flutter.dev12",
          employment: Employment(
            role: "Role",
            title: "Tile",
          ),
          geoLocation: GeoLocation(
            city: "City",
            country: "Country",
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Crisp Chat'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () async {
                  await FlutterCrispChat.openCrispChat(config: config);
                },
                child: const Text('Open Crisp Chat'),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  await FlutterCrispChat.resetCrispChatSession();
                },
                child: const Text('Reset Chat Session'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

Get Started Today!
Ready to elevate your customer support experience? Get your Crisp Website ID from the Crisp Dashboard and start integrating Crisp Chat into your Flutter apps today!

Visit [Crisp Chat Plugin](https://pub.dev/packages/crisp_chat) on pub.dev for more details and documentation.

🚀 Enhance user engagement and support efficiency with Crisp Chat in your Flutter apps!