papercups_flutter 3.1.1

Native Flutter implementation of the papercups.io chat widget.

Compatible with all platforms: Windows, Android, Linux, MacOS, and iOS

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: PapercupsProps(
    accountId: "xxxxxxxx-xxxxxxx-xxxx-xxxxxx", //Your account id goes here.
  ),
),
    

copied to clipboard

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

Configuration

Available PapercupsWidget arguments

Parameter	Type	Value	Default
props	PapercupsProps	Required. This is where all of the config for the chat is contained.	N/A
dateLocale	String	Locale for the date, use the locales from the intl package.	"en-US"
timeagoLocale	dynamic	Check timeago messages for the available classes.	N/A

Available PapercupsProps parameters

Prop	Type	Value	Default
accountId	String	Required. Your Papercups account token.	N/A
baseUrl	String	The base URL of your API if you're self-hosting Papercups. Ensure you do not include the protocol (https) of a trailing dash (/).	"app.papercups.io"
customer	PapercupsCustomerMetadata	Identifying information for the customer, including name, email, externalId, and otherMetadata (for any custom fields).	N/A
closeIcon	Widget	The close button displayed in the header section.	N/A
closeAction	VoidCallback	The function to handle closing the widget. If not null, close button will be shown.	N/A
scrollEnabled	bool	Whether or not to allow scrolling.	true
floatingSendMessage	bool	Wether to have the message box floating.	false
requireEmailUpfront	bool	If you want to require unidentified customers to provide their email before they can message you. Not recommended for apps.	false
sendIcon	Widget	Message send icon in the chat text field.	N/A
onMessageBubbleTap	void Function(PapercupsMessage)	Function to handle message bubble tap action.	N/A
style	PapercupsStyle	Class used to customize the widget appearance.	PapercupsStyle()
translations	PapercupsIntl	If you want to override the default EN translations displayed by the widget.	PapercupsIntl()

Available PapercupsCustomerMetadata parameters

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, dynamic>	Extra metadata to pass such as OS info, app version, etc.	N/A

Available PapercupsStyle parameters

Parameters	Type	Value	Default
primaryColor	Color	The theme color of the chat widget.	Papercups blue: Color(0xFF1890FF) copied to clipboard
primaryGradient	Gradient	Gradient to specify, should be used instead of primaryColor. DO NOT USE BOTH!	N/A
backgroundColor	Color	Color used in the background of the entire widget.	Theme.of(context).canvasColor copied to clipboard
titleStyle	TextStyle	The text style of the title at the top of the chat widget.	TextStyle( color: textColor, // Using computeLuminance fontSize: 21, fontWeight: FontWeight.w600, ) copied to clipboard
titleAlign	TextAlign	The widget title alignment.	TextAlign.left copied to clipboard
subtitleStyle	TextStyle	The chat widget sub title text style.	TextStyle( color: props.style.titleStyle?.color?.withOpacity(0.8), ) copied to clipboard
headerHeight	double	The chat widget header height.	N/A
headerPadding	EdgeInsetsGeometry	The chat widget header padding.	EdgeInsets.only( top: 16, right: 20, left: 20, bottom: 12, ) copied to clipboard
noConnectionIcon	Widget	The widget displayed in the chat when there's no Internet connection.	Icon( Icons.wifi_off_rounded, size: 100, color: Colors.grey, ) copied to clipboard
noConnectionTextStyle	TextStyle	The text style of the text displayed in the chat widget when there's no Internet connection.	Theme.of(context).textTheme.headlineSmall?.copyWith(color: code.grey) copied to clipboard
requireEmailUpfrontInputDecoration	InputDecoration	The input decoration of the require email text field.	InputDecoration( border: UnderlineInputBorder( borderSide: BorderSide( color: Theme.of(context).dividerColor, width: 0.5, style: BorderStyle.solid, ), ), enabledBorder: UnderlineInputBorder( borderSide: BorderSide( color: Theme.of(context).dividerColor, width: 0.5, style: BorderStyle.solid, ), ), focusedBorder: UnderlineInputBorder( borderSide: BorderSide( color: Theme.of(context).dividerColor, width: 0.5, style: BorderStyle.solid, ), ), hintText: widget.props.translations.enterEmailPlaceholder, hintStyle: widget.props.style.requireEmailUpfrontInputHintStyle, ), copied to clipboard
requireEmailUpfrontKeyboardAppearance	Brightness	The keyboard brightness of the require email text field.	Brightness.light copied to clipboard
requireEmailUpfrontInputHintStyle	TextStyle	The text style of the require email text field hint.	TextStyle(fontSize: 14) copied to clipboard
requireEmailUpfrontInputTextStyle	TextStyle	The text style of the require email text field.	N/A
floatingSendMessageBoxDecoration	BoxDecoration	The box decoration of the message text field when floatingSendMessage prop is true.	BoxDecoration( borderRadius: BorderRadius.circular(10), boxShadow: [ BoxShadow( blurRadius: 10, color: Theme.of(context).brightness == Brightness.light ? Colors.grey.withOpacity(0.4) : Colors.black.withOpacity(0.8), ), ], ) copied to clipboard copied to clipboard
sendMessageBoxDecoration	BoxDecoration	The box decoration of the message text field.	BoxDecoration( color: Theme.of(context).cardColor, border: widget.showDivider ? Border( top: BorderSide(color: Theme.of(context).dividerColor), ) : null, boxShadow: [ BoxShadow( blurRadius: 30, color: Theme.of(context).shadowColor.withOpacity(0.1), ) ], ) copied to clipboard
sendMessageKeyboardAppearance	Brightness	The keyboard brightness of the send message text field.	Brightness.light copied to clipboard
sendMessagePlaceholderInputDecoration	InputDecoration	The input decoration of the message text field.	InputDecoration( border: InputBorder.none, hintText: widget.props.translations.newMessagePlaceholder, hintStyle: widget.props.style.sendMessagePlaceholderTextStyle, ) copied to clipboard
sendMessagePlaceholderTextStyle	TextStyle	The text style of the message text field input hint text.	TextStyle(fontSize: 14) copied to clipboard
sendMessageInputTextStyle	TextStyle	The text style of the message text field input.	N/A
botBubbleBoxDecoration	BoxDecoration	The box decoration of the bot chat bubbles.	BoxDecoration( color: Theme.of(context).brightness == Brightness.light ? brighten(Theme.of(context).disabledColor, 80) : const Color(0xff282828, ), borderRadius: BorderRadius.circular(4), ) copied to clipboard
botBubbleTextStyle	TextStyle	The text style of the bot chat bubbles.	TextStyle( color: Theme.of(context).textTheme.bodyLarge?.color, ) copied to clipboard
botAttachmentBoxDecoration	BoxDecoration	The box decoration of the bot attachment (images, files) chat bubbles.	BoxDecoration( borderRadius: BorderRadius.circular(5), color: Theme.of(context).brightness == Brightness.light ? brighten(Theme.of(context).disabledColor, 70) : Color(0xff282828, ), ) copied to clipboard
botAttachmentTextStyle	TextStyle	The text style of the bot attachments file name.	TextStyle( color: Theme.of(context).textTheme.bodyLarge?.color, ) copied to clipboard
botBubbleUsernameTextStyle	TextStyle	The text style of bot user name displayed below its chat bubbles.	TextStyle( color: Theme.of(context).textTheme.bodyLarge?.color?.withOpacity(0.5), fontSize: 14, ) copied to clipboard
userBubbleBoxDecoration	BoxDecoration	The box decoration of the user chat bubbles.	BoxDecoration( color: widget.props.style.primaryColor, gradient: widget.props.style.primaryGradient, borderRadius: BorderRadius.circular(4), ) copied to clipboard
userBubbleTextStyle	TextStyle	The text style of the user chat bubbles.	TextStyle(color: widget.textColor) copied to clipboard Depending on the luminance of the provided primaryColor, textColor can be either Colors.black or Colors.white.
userAttachmentBoxDecoration	BoxDecoration	The box decoration of the user attachment (images, files) chat bubbles.	BoxDecoration( borderRadius: BorderRadius.circular(5), color: darken(widget.props.style.primaryColor!, 20), ) copied to clipboard
userAttachmentTextStyle	TextStyle	The text style of the user attachments file name.	TextStyle(color: widget.textColor) copied to clipboard Depending on the luminance of the provided primaryColor, textColor can be either Colors.black or Colors.white.
userBubbleSentAtTextStyle	TextStyle	The text style of the "Sent x ago" (or "Sending...") text displayed below the latest user chat bubble.	TextStyle(color: Colors.grey) copied to clipboard
chatBubbleTimeTextStyle	TextStyle	The text style of the time stamp displayed (on tap) next to the any chat bubble.	TextStyle( color: Theme.of(context).textTheme.bodyLarge?.color?.withAlpha(100), fontSize: 10, ) copied to clipboard
chatBubbleFullDateTextStyle	TextStyle	The text style of the date displayed centered in the chat before the chat bubbles of a given day.	TextStyle(color: Colors.grey) copied to clipboard
chatUploadingAlertTextStyle	TextStyle	The text style of the alert shown when an attachment is being uploaded.	Theme.of(context).textTheme.bodyMedium copied to clipboard
chatUploadingAlertBackgroundColor	Color	The background color of the alert shown when an attachment is being uploaded.	BottomAppBarTheme.of(context).color! copied to clipboard
chatUploadErrorAlertTextStyle	TextStyle	The text style of the error alert shown when an attachment failed to upload.	Theme.of(context).textTheme.bodyMedium copied to clipboard
chatUploadErrorAlertBackgroundColor	Color	The background color of the error alert shown when an attachment failed to upload.	BottomAppBarTheme.of(context).color! copied to clipboard
chatNoConnectionAlertTextStyle	TextStyle	The text style of the alert shown when the chat is displayed but no Internet connection is available.	Theme.of(context).textTheme.bodyMedium copied to clipboard
chatNoConnectionAlertBackgroundColor	Color	The background color of the alert shown when the chat is displayed but no Internet connection is available.	BottomAppBarTheme.of(context).color! copied to clipboard
chatCopiedTextAlertTextStyle	TextStyle	The text style of the alert shown when a chat bubble gets long pressed and its text copied.	Theme.of(context).textTheme.bodyMedium copied to clipboard
chatCopiedTextAlertBackgroundColor	Color	The background color of the alert shown when a chat bubble gets long pressed and its text copied.	BottomAppBarTheme.of(context).color! copied to clipboard

Available PapercupsIntl parameters

Parameters	Type	Value	Default
attachmentNamePlaceholder	String	Text displayed when an attachment doesn't have a file name	"No Name"
attachmentUploadErrorText	String	Error message displayed when an attachment could not be uploaded	"Failed to upload attachment"
attachmentUploadedText	String	Text displayed when an attachment has been uploaded	"Attachment uploaded"
attachmentUploadingText	String	Text displayed when an attachment is been uploaded	"Uploading..."
companyName	String	Company name to show on greeting	"Bot"
enterEmailPlaceholder	String	This is the placeholder text in the email input section	"Enter your email"
fileText	String	Text displayed on the tile where the user decides to upload a file	"File"
greeting	String	An optional initial message to greet your customers with	N/A
historyFetchErrorText	String	Error message displayed when the customer history couldn't be fetched	"There was an issue retrieving your details. Please try again!"
imageText	String	Text displayed on the tile where the user decides to upload an image	"Image"
loadingText	String	Text displayed when the chat is loading	"Loading..."
newMessagePlaceholder	String	The placeholder text in the new message input	"Start typing..."
noConnectionText	String	The placeholder text in the new message input	"No Connection"
retryButtonLabel	String	Label used in the retry button when the chat history couldn't be fetched	"Retry"
sendingText	String	Text to show while message is sending	"Sending..."
sentText	String	Text to show when the message is sent	"Sent"
subtitle	String	The subtitle in the header of your chat widget	"How can we help you?"
textCopiedText	String	Text displayed when a text has been copied after long press on a chat bubble	"Text copied to clipboard"
title	String	The title in the header of your chat widget	"Welcome!"
uploadedText	String	Text displayed after the percentage value of an attachment being uploaded	"uploaded"

Supporters