Chatwoot Vue 3 && Nuxt 3

Warning

This project is no longer maintained.

@productdevbook/chatwoot is discontinued. Please migrate to ahize — a zero-dependency, tree-shakeable, SSR-safe TypeScript wrapper that unifies 18 live-chat providers (including Chatwoot) behind a single API, with first-class Vue and Nuxt adapters.

• Chatwoot adapter: ahize/chatwoot
• Vue: ahize/vue
• Nuxt: ahize/nuxt

Existing versions on npm will remain available but are frozen. No further releases, fixes, or issue responses are planned. Feel free to fork if you want to continue the work.

This module productdevbook team created.

ChatWoot integration for Vue and Nuxt.

Features

• Zero-config required
• isOpen support

Setup

pnpm install @productdevbook/chatwoot

yarn install @productdevbook/chatwoot

npm install @productdevbook/chatwoot

Vue 3 Setup

• ▶️  Online playground

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

• ▶️  Online playground

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.
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.

Sponsors

💻 Development

• Clone this repository
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Install dependencies using pnpm install
• Stub module with pnpm dev:prepare
• Run pnpm dev to 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