papercups_flutter

Description:

papercups flutter

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).canvasColorcopied 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.leftcopied 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.lightcopied 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 clipboardcopied 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.lightcopied 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 clipboardDepending 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 clipboardDepending 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.bodyMediumcopied 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.bodyMediumcopied 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.bodyMediumcopied 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.bodyMediumcopied 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 #