Flutter implementation of the papercups.io chat widget, built with a webview and provides customization options.


Keywords
dart, flutter, flutter-webview, flutter-widget, intercom-alternative, live-chat, papercups, papercups-flutter
License
MIT

Documentation

logo pub package likes style: effective dart

Installing

To get started simply add papercups_flutter: and the latest version to your pubspec.yaml. Then run flutter pub get

🎉 Done, It's that simple.

Using the widget

Integration with your app requires just a few lines of code, add the following widget wherever you want your papercups chat window to be:

import 'package:papercups_flutter/papercups_flutter.dart';

PaperCupsWidget(
    props: Props(
    accountId: "xxxxxxxx-xxxxxxx-xxxx-xxxxxx", //Your account id goes here.
    ),
),
    

That should get you up and running in just a few seconds ⚡️.

Configuration

Available PaperCupsWidget arguments

Parameter Type Value Default
iframeUrl string An override of the iframe URL we use to render the chat, if you chose to self-host that as well https://chat-widget.papercups.io
props Props Required, here is where all of the config for the chat is contained N/A
closeAction Function A function to execute on the close button, only visible in mobile versions. If null, close button will not render. N/A
onStartLoading Function A function that will be called when the widget starts loading the website. N/A
onFinishLoading Function A function that will be called when the widget finishes loading the website. May be called multiple times N/A
onError Function A function that will be called if the widget finds an error while loading. N/A

Available Props paramaters

Prop Type Value Default
accountId string Required, your Papercups account token N/A
title string The title in the header of your chat widget Welcome!
subtitle string The subtitle in the header of your chat widget How can we help you?
newMessagePlaceholder string The placeholder text in the new message input Start typing...
primaryColor Color The theme color of your chat widget Theme.of(context).primaryColor without alpha
greeting string An optional initial message to greet your customers with N/A
showAgentAvailability boolean If you want to show whether you (or your agents) are online or not false
agentAvailableText string The text shown when you (or your agents) are online We're online right now!
agentUnavailableText string The text shown when you (and your agents) are offline We're away at the moment.
customer CustomerMetadata Identifying information for the customer, including name, email, external_id, and metadata (for any custom fields) N/A
baseUrl string The base URL of your API if you're self-hosting Papercups https://app.papercups.io
requireEmailUpfront boolean If you want to require unidentified customers to provide their email before they can message you false

Available CustomerMetaData paramaters

Parameters Type Value Default
email string The customer's email N/A
externalId string The customer's external ID N/A
name string The customer's name N/A
otherMetadata Map<String, String> Extra metadata to pass such as OS info. N/A

Known Issues

  • closeAction is not supported on Web at this point in time, this is due to the iframe absorbing all clicks before the button detects them. For more info see https://github.com/flutter/flutter/issues/54027.
  • Some widgets such as clipRRect will not affect the WebView on mobile, and will not change the widget. This works on web though.
  • On mobile, onFinishedLoading() will be called multiple times.