Chatwoot is an open-source customer engagement platform that helps companies engage their customers on their website, Facebook page, Twitter, Whatsapp, SMS, ...

alt text

Chatwoot integration for Vue


Version Downloads License Github Stars Discord

pnpm add @huntersofbook/chatwoot-vue
yarn add @huntersofbook/chatwoot-vue
npm add @huntersofbook/chatwoot-vue

Vue Config

import { createChatWoot } from '@huntersofbook/chatwoot-vue'const chatwoot = createChatWoot({  init: {    websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'  },  settings: {    locale: 'en',    position: 'left',    launcherTitle: 'Hello Chat'  },  partytown: false,})app.use(chatwoot)


Add app.vue or add wherever you want.

<script setup lang="ts">import { useChatWoot } from '@huntersofbook/chatwoot-vue'const {  isModalVisible,  toggle,  toggleBubbleVisibility,  popoutChatWindow,  ...more} = 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

websiteTokenstringThe token given to you when you create a chat widget.
baseUrlboolYour site's domain, as declared by you in Chatwoot's settings


useChatWoot() accepts some

isModalVisiblebooleanThis chat will show you its open status.
toggle'open' or 'close' - Function You can open and close the chat
setUserkey: string, args: ChatwootSetUserProps - FunctionYou can send user information to chatwoot panel.
setCustomAttributesattributes: { [key: string]: string } - FunctionYou can send custom attributes to chatwoot panel.
deleteCustomAttributekey: string - FunctionYou can delete custom attributes to chatwoot panel.
setLocalelocal: string - FunctionChange widget locale
setLabellabel: string - FunctionYou can send label to chatwoot panel.
removeLabellabel: string - FunctionYou can delete label to chatwoot panel.
resetFunctionYou can reset all settings.
toggleBubbleVisibility'hide' or 'show' - FunctionYou can set the speech bubble's hide state.
popoutChatWindowYou can open the conversation as a popup.

💻 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 to @surmon-china, this project loadScript function is heavily inspired by


MIT License © 2022-PRESENT productdevbook