crisp_chat 0.0.4

A flutter plugin package for using crisp chat natively on Android & iOS.

Crisp Chat

A flutter plugin package for using crisp chat natively on Android & iOS.

Chat with website visitors, integrate your favorite tools, and deliver a great customer experience. - Crisp. The Crisp Chat is a package that provides a simple way to open chat window using native channel. Connect with Crisp Chat, register a user to chat (or not) and render a chat widget. Tested on Android and iOS.

Note: If anyone want to contribute on this project is most welcome. If you have any idea or suggestion, please feel free to contact me.

Features

• Null-safety enable
• Easy to use
• Customizable
• User configuration with company and geoLocation
• Supports for iOS & Android

Installation

First, add crisp_chat as a dependency in your pubspec.yaml file.

To use the Flutter Crisp Chat, simply import the crisp_chat package:

Run this on your project terminal:

flutter pub add crisp_chat

or manually configure pubspec.yml file

dependencies:
  flutter:
    sdk: flutter
  crisp_chat: ^0.0.4

iOS

Add two rows to the ios/Runner/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:

<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

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

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

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

compileSdkVersion 33

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

minSdkVersion 21

Usage

To open ChatView for crisp, use the openCrispChat method of the FlutterCrispChat class:

First Imported Package:

import 'package:crisp_chat/crisp_chat.dart';

Then:

 final String websiteID = 'YOUR_WEBSITE_KEY';
 late CrispConfig config;

   @override
  void initState() {
    super.initState();
    config = CrispConfig(
      websiteID: websiteID,
    );
  }

@override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home: Scaffold(
       appBar: AppBar(
         title: const Text('Crisp Chat'),
       ),
       body: Center(
         child: ElevatedButton(
           onPressed: () async {
             await FlutterCrispChat.openCrispChat(
               config: config,
             );
           },
           child: const Text('Open Crisp Chat'),
         ),
       ),
     ),
   );
 } 

This is a simple Flutter app that demonstrates how to use the FlutterCrispChat plugin to open a chat window using the Crisp chat service. The app has a single button that, when pressed, will launch the chat window.

The main function runs the app, which consists of a single MyApp widget. This widget is stateful and creates an instance of the FlutterCrispChat plugin.

The build function creates a MaterialApp with a Scaffold that contains an AppBar and an ElevatedButton. The button's onPressed method calls the openCrispChat method of the FlutterCrispChat plugin with the website ID passed as a parameter.

To use this code, you will need to provide your own Crisp website ID. You can do this by replacing YOUR_WEBSITE_KEY with your own website ID. Once you have done this, you can run the app and press the "Open Crisp Chat" button to launch the chat window.

Screenshot (GIF)

Android (GIF)	iOS (GIF)
Android (Image)	iOS (Image)

Additional information

• Flutter Crisp Chat (pub.dev)
• Flutter Crisp Chat (GitHub)

Project Maintainer ❤️

Md. Al-Amin

✨VALUABLE CONTRIBUTORS✨

Happy Coding 👨‍💻

License

This project is licensed under the MIT License - see the LICENSE file for details.