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	`string`	チャットウィジェットを作成した際に付与されるトークン。
baseUrl	`bool`	Chatwoot の設定で宣言したサイトのドメイン	`https://app.chatwoot.com`

useChatWoot

useChatWoot() はいくつかの値を受け取ります

オプション	型	説明
isModalVisible	`boolean`	このチャットは、そのオープン状態を表示します。
toggle	`'open' または 'close' - 関数`	チャットを開閉できます
setUser	`key: string, args: ChatwootSetUserProps - 関数`	ユーザー情報を chatwoot パネルに送信できます。
setCustomAttributes	`attributes: { [key: string]: string } - 関数`	カスタム属性を chatwoot パネルに送信できます。
deleteCustomAttribute	`key: string - 関数`	カスタム属性を chatwoot パネルから削除できます。
setLocale	`local: string - 関数`	ウィジェットのロケールを変更
setLabel	`label: string - 関数`	ラベルを chatwoot パネルに送信できます。
removeLabel	`label: string - 関数`	ラベルを chatwoot パネルから削除できます。
reset	`関数`	すべての設定をリセットできます。
toggleBubbleVisibility	`'hide' または 'show' - 関数`	吹き出しの表示状態を設定できます。
popoutChatWindow		会話をポップアップとして開くことができます。

スポンサー

💻 開発

このリポジトリをクローンします
Corepack を corepack enable を使用して有効にします (Node.js < 16.10 の場合は npm i -g corepack を使用してください)
pnpm install を使用して依存関係をインストールします
pnpm dev:prepare でモジュールをスタブ化します
pnpm dev を実行して、開発モードでプレイグラウンドを起動します

謝辞

@surmon-china に感謝します。このプロジェクトの loadScript 関数は、surmon-china.github.io に大きく影響を受けています。