Whelp Live Chat for Flutter

Whelp Flutter Live Chat Package is a Flutter library that allows you to integrate a live chat feature into your Flutter applications using the Whelp service.

For native Android and iOS applications, please refer to the Android and iOS documentation.

⚠️ Note

Before you use the package, you must be enrolled to Whelp in order to obtain an APP_ID and API_KEY on which the SDK depends on to function.

🪚 Installation

To use this package, add whelp_flutter_sdk as a dependency in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  whelp_flutter_sdk: ^0.4.2

Then, run flutter pub get in your terminal to install the package.

⚙️ Configuration

In order to be able to use media attachments in the live chat, it's required to add the following permissions to your app's AndroidManifest.xml for Android and Info.plist for iOS:

Android

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

Also, to enable picking media files not only from the gallery but also from the camera, follow the steps below:

1. Add the following provider to your AndroidManifest.xml:

  <provider 
    android:name="com.pichillilorenzo.flutter_inappwebview.InAppWebViewFileProvider" 
    android:authorities="${applicationId}.flutter_inappwebview.fileprovider"
    android:exported="false"
    android:grantUriPermissions="true">            
    <meta-data
      android:name="android.support.FILE_PROVIDER_PATHS"
      android:resource="@xml/provider_paths" />
  </provider>

For more info, visit example app's AndroidManifest.xml file.

2. Request camera permission before you initialize the SDK:

import 'package:permission_handler/permission_handler.dart';

await Permission.camera.request();

Make sure you do the permission handling properly.

iOS

  <key>NSCameraUsageDescription</key>
  <string>Camera permission is required for live chat media attachments.</string>
  <key>NSPhotoLibraryUsageDescription</key>
  <string>Photo library permission is required for live chat media attachments.</string>

Usage

1. Import the necessary libraries:

import 'package:whelp_flutter_sdk/whelp_flutter_sdk.dart';

2. Create a WhelpUser instance with user information for authentication:

final WhelpUser user = WhelpUser(
  email: 'john@doe.com',
  fullName: 'John Doe',
  phoneNumber: '+1234567890',
  language: 'EN',
  identifier: IdentityIdentifier.email,
);

• Here the identifier is based on which the identity and uniquness of the user is determined: if matched, previous chats of the user will be loaded, otherwise a new chat will be created.
• Either of phoneNumber and email can be null. In case both of them are null you might not be able to user's previous chat history on every new launch.

3. Create a WhelpConfig instance with your APP_ID and API_KEY:

final WhelpConfig config = WhelpConfig(
  // Replace the placeholders with your APP_ID and API_KEY
  appId: '{app_id}',
  apiKey: '{api_key}',

  // Can be Firebase Cloud Messaging token or any other unique identifier.
  deviceId: '{fcm_token}',
  disableMoreButton: true,
  disableEmojiPicker: true,
  disableSounds: true,

  // Title displayed under the header
  headerTitle: 'What do you want to talk us about?',

  // Log messages from the SDK (for debugging purposes)
  onLog: (String message) {
    log(message, name: 'WHELP');
  },

  // Status messages displayed on the header
  activeStatus: 'We are online',
  awayStatus: 'We are offline',
);

If you are using an on-premise Whelp instance, you can also specify the baseUrl parameter to WhelpConfig.onPremise:

final WhelpConfig config = WhelpConfig.onPremise(
  // Same parameters as above
  baseUrl: 'https://yourdomain.com',
);

4. Create a WhelpView widget and pass the user and config as parameters and place it in your app's widget tree:

WhelpScaffold(
  appBar: AppBar(
    title: Text('Whelp Live Chat'),
  ),
  user: user,
  config: config,
)

5. Run the app, and the Whelp live chat interface will be displayed.

🕹️ Example

For a more detailed example, check the example directory in this repository.

📄 License

This package is open-source and released under the MIT License.

🙏 Contributing

Please report any issues or feature requests on the GitHub repository. Contributions are welcome.