alt text

Chatwoot Vue 3 && Nuxt 3

此模組由 productdevbook 團隊建立。

ChatWoot 整合適用於 Vue 和 Nuxt。

功能

零配置需求
支援 isOpen

設定

pnpm install @productdevbook/chatwoot

yarn install @productdevbook/chatwoot

npm install @productdevbook/chatwoot

Vue 3 設定

▶️ 線上遊樂場

新增 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 設定

▶️ 線上遊樂場

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

新增 app.vue 或新增至任何您想要的地方。

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

初始化預設值

選項	類型	描述	預設值
websiteToken	`字串`	當您建立聊天小工具時給您的令牌。
baseUrl	`布林值`	您在 Chatwoot 設定中宣告的網站網域	`https://app.chatwoot.com`

useChatWoot

useChatWoot() 接受一些

選項	類型	描述
isModalVisible	`布林值`	此聊天室會顯示其開啟狀態。
toggle	`'open' 或 'close' - 函式`	您可以開啟和關閉聊天室
setUser	`key: 字串, args: ChatwootSetUserProps - 函式`	您可以將使用者資訊傳送到 Chatwoot 面板。
setCustomAttributes	`attributes: { [key: string]: string } - 函式`	您可以將自訂屬性傳送到 Chatwoot 面板。
setConversationCustomAttributes	`attributes: { [key: string]: string } - 函式`	您可以將對話自訂屬性傳送到 Chatwoot 面板。
deleteCustomAttribute	`key: 字串 - 函式`	您可以刪除 Chatwoot 面板的自訂屬性。
setLocale	`local: 字串 - 函式`	變更小工具的地區設定
setLabel	`label: 字串 - 函式`	您可以將標籤傳送到 Chatwoot 面板。
removeLabel	`label: 字串 - 函式`	您可以刪除 Chatwoot 面板的標籤。
reset	`函式`	您可以重設所有設定。
toggleBubbleVisibility	`'hide' 或 'show' - 函式`	您可以設定對話泡泡的隱藏狀態。
popoutChatWindow		您可以將對話開啟為快顯視窗。