This module productdevbook team created.
- Zero-config required
- isOpen support
pnpm install @productdevbook/chatwoot yarn install @productdevbook/chatwoot npm install @productdevbook/chatwoot add Main.ts
import { createChatWoot } from '@productdevbook/chatwoot/vue' const chatwoot = createChatWoot({ init: { websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB' }, settings: { locale: 'en', position: 'left', launcherTitle: 'Hello Chat' }, partytown: false, }) app.use(chatwoot)export default defineNuxtConfig({ modules: [ '@productdevbook/chatwoot' ], chatwoot: { init: { websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB' }, settings: { locale: 'en', position: 'left', launcherTitle: 'Hello Chat', // ... and more settings }, // If this is loaded you can make it true, https://github.com/nuxt-modules/partytown partytown: false, } })Add app.vue or add wherever you want.
<script setup lang="ts"> const { isModalVisible, toggle, toggleBubbleVisibility, popoutChatWindow } = useChatWoot() </script> <template> <div class="flex space-x-3"> <div>{{ isModalVisible }}</div> <button @click="toggle('open')"> open </button> <button @click="toggle('close')"> close </button> <div class="flex space-x-3"> <button @click="toggleBubbleVisibility('hide')"> hide </button> <button @click="toggleBubbleVisibility('show')"> show </button> <button @click="popoutChatWindow()"> open popup </button> </div> </div> </template>| Option | Type | Description | Default |
|---|---|---|---|
| websiteToken | string | The token given to you when you create a chat widget. | |
| baseUrl | bool | Your site's domain, as declared by you in Chatwoot's settings | https://app.chatwoot.com |
useChatWoot() accepts some
| Option | Type | Description |
|---|---|---|
| isModalVisible | boolean | This chat will show you its open status. |
| toggle | 'open' or 'close' - Function | You can open and close the chat |
| setUser | key: string, args: ChatwootSetUserProps - Function | You can send user information to chatwoot panel. |
| setCustomAttributes | attributes: { [key: string]: string } - Function | You can send custom attributes to chatwoot panel. |
| setConversationCustomAttributes | attributes: { [key: string]: string } - Function | You can send conversation custom attributes to chatwoot panel. |
| deleteCustomAttribute | key: string - Function | You can delete custom attributes to chatwoot panel. |
| setLocale | local: string - Function | Change widget locale |
| setLabel | label: string - Function | You can send label to chatwoot panel. |
| removeLabel | label: string - Function | You can delete label to chatwoot panel. |
| reset | Function | You can reset all settings. |
| toggleBubbleVisibility | 'hide' or 'show' - Function | You can set the speech bubble's hide state. |
| popoutChatWindow | You can open the conversation as a popup. |
- Clone this repository
- Enable Corepack using
corepack enable(usenpm i -g corepackfor Node.js < 16.10) - Install dependencies using
pnpm install - Stub module with
pnpm dev:prepare - Run
pnpm devto start playground in development mode
Thanks to @surmon-china, this project loadScript function is heavily inspired by surmon-china.github.io.
MIT License © 2022-PRESENT productdevbook