vue-papercups

A Papercups chat widget component for Vue 3.

Installation

Install using NPM.

$ npm install --save vue-papercups

Add the vue-papercups component globally to your Vue 3 app.

// main.js
import VuePapercups from "vue-papercups";

app.use(VuePapercups);

Use in your component templates.

// App.vue

<vue-papercups account-id="your-papercups-account-id" />

Props

These are the props you can pass into your <vue-papercups /> component:

Prop	Type	Value	Default
accountId	string	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...
emailInputPlaceholder	string	The placeholder text in the optional email input	Enter your email
newMessagesNotificationText	string	The notification text when new messages arrive and the chat window is closed	View new messages
primaryColor	string	The theme color of your chat widget	1890ff
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	object	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
iframeUrlOverride	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
requireEmailUpfront	boolean	If you want to require unidentified customers to provide their email before they can message you	false
defaultIsOpen	boolean	If you want the chat widget to open as soon as it loads	false
customIconUrl	string	A link to a custom icon image URL	N/A

Events

Event	Type	Value	Default
chatLoaded	() => void	Callback fired when chat is loaded	N/A
chatOpened	() => void	Callback fired when chat is opened	N/A
chatClosed	() => void	Callback fired when chat is closed	N/A
messageSent	(message: Message) => void	Callback fired when message is sent	N/A
messageReceived	(message: Message) => void	Callback fired when message is received	N/A
scriptLoaded	(message: Message) => void	Callback fired when Papercups widget script loads	N/A
scriptError	(message: Message) => void	Callback fired on Papercups widget script load error	N/A

For example:

// App.vue
<vue-papercups
  account-id="your-papercups-account-id"
  @chatLoaded="yourCallbackMethod"
/>

Global API

Use the global $papercups object to interact with the chat widget or get its current config in your Vue components.

// open chat
this.$papercups.open();

// close chat
this.$papercups.close();

// toggle chat
this.$papercups.toggle();

// show widget
this.$papercups.show();

// hide widget
this.$papercups.hide();

// create widget - call destroy first to avoid loading the widget script multiple times
this.$papercups.create();

// destroy widget
this.$papercups.destroy();

// get current config
const config = this.$papercups.config();

Used in

Tracknack

Relevant links

Papercups

Papercups chat widget repository

License

MIT © Viesturs Marnauza

Twitter