Chatwoot

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

Chatwoot integration for Vue

Setup

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

Vue Config

main.ts
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)

Composables

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

OptionTypeDescriptionDefault
websiteTokenstringThe token given to you when you create a chat widget.
baseUrlboolYour site's domain, as declared by you in Chatwoot's settingshttps://app.chatwoot.com

useChatWoot

useChatWoot() accepts some

OptionTypeDescription
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

Thanks to @surmon-china, this project loadScript function is heavily inspired by surmon-china.github.io.

License

MIT License © 2022-PRESENT productdevbook

sponsor us