 @productdevbook/chatwoot
@productdevbook/chatwoot 

@productdevbook/chatwoot 
Chatwoot is an open-source customer engagement platform that helps companies engage their customers on their website

Chatwoot Vue 3 && Nuxt 3
This module productdevbook team created.
Features
- Zero-config required
- isOpen support
Setup
pnpm install @productdevbook/chatwoot
yarn install @productdevbook/chatwoot
npm install @productdevbook/chatwoot
Vue 3 Setup
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)
Nuxt 3 Setup
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,
  }
})
Composables
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>
Init Default
| 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
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. | 
| 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. | 
Sponsors
💻 Development
- 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
Thanks to @surmon-china, this project loadScript function is heavily inspired by surmon-china.github.io.
License
MIT License © 2022-PRESENT productdevbook