Eltropy Conversation Panel Flutter Package

Overview

The eltropy_conversation_panel Flutter package allows you to render the Eltropy Conversation Panel which allows contacts to engage in all channels such as AI Chat, Chat, Video, etc along with Co-browsing and other features into your application. It also provides a standlone EltropyCobrowse class that allows you to focus only on adding our Co-browsing solution on top of your WebViews.

The EltropyConversationPanel Widget render the Conversation Panel via Webviews, while handling any permissions necessary for Android and iOS, including Camera, Microphone and File permissions for video banking, file uploads and workflows.

This package supports custom URLs and custom API endpoints, making it versatile for various integration scenarios, such as custom pages or custom Eltropy domains for APIs.

Installation

Add the following to your pubspec.yaml file:

dependencies:
  eltropy_conversation_panel: ^0.0.2

Then, run:

flutter pub get

Prerequisites

Minimum Dart SDK version

The minimum Dart SDK version required to use this library is: 3.3.4

Android

1. Ensure that the following permissions are added in android/app/src/main/AndroidManifest.xml inside the <manifest> tag:

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

NOTE: Due to the caveat of WebViews in Android, permissions for camera, mic and file access need to be requested ahead of time, before the WebView is loaded up. This is handled by our widget directly.

2. In order to consume this library, you are required to use a minimum SDK version of 24. Add the following to android/app/build.gradle:

android {
    ...
    defaultConfig {
        ...
        minSdkVersion 24 // add this line
    }
}

iOS

Add the following key-value pairs to your ios/Runner/Info.plist within the <dict> tag:

	<key>NSMicrophoneUsageDescription</key>
	<string>If you want to use the microphone, you have to give permission.</string>
	<key>NSCameraUsageDescription</key>
	<string>If you want to use the camera, you have to give permission.</string>

Usage

1. Basic Example

Use the EltropyConversationPanel widget:

import 'package:flutter/material.dart';
import 'package:eltropy_conversation_panel/eltropy_conversation_panel.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Eltropy Conversation Panel")),
        body: EltropyConversationPanel(
          domain: 'example', // Your Eltropy domain here
          env: EltropyEnvs.production, // Change to the desired environment; uat or production
          customUrl: '', // Optional: custom URL if you have a custom webpage. The webpage should either point to the CP URL (or a redirect to it), or to a webpage that embeds our CP with the embed.js script
          customApiUrl: '', // Optional: custom API URL for cobrowse configs
        ),
      ),
    );
  }
}

void main() => runApp(MyApp());

This will embed our standalone Conversation Panel via a WebView, and supports all features out of the box.

In the case that you need to add your custom webpage that embeds our Conversation Panel, you can use the customUrl option to load up the specific webpage. As long as that webpage contains our embed.js snippet, the Co-browsing feature will work just fine, while all other features such as chat and video will continue to work.

2. Custom WebView Implementation with Standalone Co-Browsing

If you prefer to use your own WebView implementation and are only interested in the Co-browsing functionality, you can use the EltropyCobrowse standalone class:

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:eltropy_conversation_panel/eltropy_cobrowse.dart';

class MyCustomWebView extends StatefulWidget {
  @override
  _MyCustomWebViewState createState() => _MyCustomWebViewState();
}

class _MyCustomWebViewState extends State<MyCustomWebView> {
  late WebViewController _controller;
  late EltropyCobrowse _cobrowse;

  @override
  void initState() {
    super.initState();

    _controller = WebViewController();

    _cobrowse = EltropyCobrowse(
      domain: 'example', // Your domain here
      controller: _controller,
    );

    _cobrowse.initializeCobrowseAPI();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Custom WebView")),
      body: WebView(
        initialUrl: 'https://example.com',
        onWebViewCreated: (controller) {
          _controller = controller;
          _cobrowse.setController(_controller);

          // Add EltropyWebviewBridge channel
          _controller.addJavaScriptChannel('EltropyWebviewBridge',
              onMessageReceived: _cobrowse.handleEltropyCobrowseMessage);
        },
      ),
    );
  }
}

void main() => runApp(MyCustomWebView());

You have to ensure to pass the WebviewController to the EltropyCobrowse object either via the constructor or via the EltropyCobrowse.setController() method.

You will be responsible for adding the EltropyWebviewBridge JS channel yourself, but we do provide a method in EltropyCobrowse object handleEltropyCobrowseMessage(JavaScriptMessage message) that can be used to handle the Co-browse related communications.

Other features such as chat and video will continue to be supported, but you would need to handle requesting appropriate permissions for video as well as specific configuration to ensure that videos play smoothly. More information on that can be found here.

3. Using the Redacted Widget during Co-browse:

Data redaction can be used in order to prevent data on the contact's screen from being exposed to the agent.

You can import the Redacted widget through the eltropy_cobrowse.dart file and use it to mask or redact sensitive widgets by wrapping them as the child inside the Redacted widget during a Co-browsing session:

import 'package:flutter/material.dart';
import 'package:eltropy_conversation_panel/eltropy_cobrowse.dart';

class SensitiveWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Redacted(
      child: Text('Sensitive Information'),
    );
  }
}

Note:

• Redaction during co-browsing will black out the widgets on both the agent and contact side.
• Redaction of elements within the WebView is currently not supported.