Introducing Crisp Chat: Enhance Your Flutter Apps with Real-time Customer Support

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:

COPY

dependencies:
  flutter:
    sdk: flutter
  crisp_chat: ^2.0.2

Setup Instructions:

1. 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:

COPY

    <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>

2. Android Setup:

   Grant internet permission and adjust minimum SDK versions in AndroidManifest.xml and build.gradle :

   • Add Internet permission on AndroidManifest.xml in your android/app/src/main/AndroidManifest.xml file.

     COPY

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

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

     COPY

       compileSdkVersion 34
     

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

     COPY

       minSdkVersion 21
     

Usage Example:

COPY

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: "[email protected]",
        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 on pub.dev for more details and documentation.

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