# vue-papercups
> A Vue 3 component for Papercups chat
Latest version **1.1.1** (published 2023-02-16) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-papercups
pnpm add vue-papercups
yarn add vue-papercups
bun add vue-papercups
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.1 |
| Published | 2023-02-16 |
| First published | 2021-01-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Viesturs Marnauza |
| Maintainers | viestursm |
| Keywords | vue, papercups, chat |
## Links
- npm: https://www.npmjs.com/package/vue-papercups
- Repository: https://github.com/vmarnauza/vue-papercups
- Homepage: https://github.com/vmarnauza/vue-papercups#readme
- Issues: https://github.com/vmarnauza/vue-papercups/issues
- npm.io page: https://npm.io/package/vue-papercups
## Alternatives
- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads
## Recent versions
- 1.1.1 (latest) — 2023-02-16
- 1.1.0 — 2023-02-16
- 1.0.6 — 2023-02-16
- 1.0.5 — 2021-07-29
- 1.0.4 — 2021-07-29
- 1.0.3 — 2021-02-05
- 1.0.2 — 2021-01-24
- 1.0.1 — 2021-01-24
- 1.0.0 — 2021-01-24
- 0.0.2 — 2021-01-24
- 0.0.1 — 2021-01-24
## README
# vue-papercups
A Papercups chat widget component for Vue 3.
## Installation
Install using NPM.
```bash
$ npm install --save vue-papercups
```
Add the `vue-papercups` component globally to your Vue 3 app.
```js
// main.js
import VuePapercups from "vue-papercups";
app.use(VuePapercups);
```
Use in your component templates.
```html
// App.vue
```
## Props
These are the props you can pass into your `` 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:
```html
// App.vue
```
## Global API
Use the global `$papercups` object to interact with the chat widget or get its current config in your Vue components.
```js
// 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](https://tracknack.com/)
## Relevant links
[Papercups](https://papercups.io/)
[Papercups chat widget repository](https://github.com/papercups-io/chat-widget)
## License
MIT © Viesturs Marnauza
[Twitter](https://twitter.com/park_narrative)
---
_Source: https://npm.io/package/vue-papercups · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._