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 Nuxt

Version Downloads License Github Stars Discord Discord


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

Nuxt Config

export default defineNuxtConfig({  modules: [    '@huntersofbook/chatwoot-nuxt'  ],  chatwoot: {    init: {      websiteToken: 'b6BejyTTuxF4yPt61ZTZHjdB'    },    settings: {      locale: 'en',      position: 'left',      launcherTitle: 'Hello Chat',      // ... and more settings    },    // If this is loaded you can make it true,    partytown: false,  }})


Add app.vue or add wherever you want.

<script setup lang="ts">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