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,
  }
})

可组合函数

添加 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 面板。
deleteCustomAttribute	`key: 字符串 - 函数`	您可以删除 chatwoot 面板的自定义属性。
setLocale	`local: 字符串 - 函数`	更改窗口部件语言环境
setLabel	`label: 字符串 - 函数`	您可以将标签发送到 chatwoot 面板。
removeLabel	`label: 字符串 - 函数`	您可以删除 chatwoot 面板的标签。
reset	`函数`	您可以重置所有设置。
toggleBubbleVisibility	`'hide' 或 'show' - 函数`	您可以设置语音气泡的隐藏状态。
popoutChatWindow		您可以将对话作为弹出窗口打开。

赞助商

💻 开发

克隆此存储库
使用 corepack enable 启用 Corepack（对于 Node.js < 16.10，使用 npm i -g corepack）
使用 pnpm install 安装依赖项
使用 pnpm dev:prepare 存根模块
运行 pnpm dev 以在开发模式下启动游乐场

感谢

感谢 @surmon-china，此项目的 loadScript 函数受到 surmon-china.github.io 的启发。