Nuxt Facebook Chat

nuxt-facebook-chat 是一個專門為輕鬆整合 Facebook Customer Chat SDK 而設計的 Nuxt 3 模組。它專為 Nuxt 3 專案量身打造，簡化了嵌入流程，減少了繁瑣的安裝步驟。透過整合 Facebook 聊天 UI，豐富了使用者互動。使用這個精簡的模組，節省時間並提升您的 Nuxt 3 應用程式中的使用者參與度。

🏀 線上遊樂場

功能特色

⛰ 輕鬆整合：專為 Nuxt 3 設計，允許無縫且直接的整合，只需最少的設定。
🚠 彈性配置：透過簡單的屬性設定輕鬆自訂您的聊天體驗。
🌲 客戶端最佳化：確保聊天在客戶端渲染，以防止任何伺服器端問題並確保相容性。
🌟 完整選項：豐富的選項集，源自官方 Facebook Chat Plugin 文件，讓您完全掌控聊天體驗。
🛠 TypeScript 支援：利用 TypeScript 實現更安全的程式碼和更好的開發人員體驗。 📖 詳盡文件：全面的指南和範例，讓您立即上手。

快速設定

將 nuxt-facebook-chat 依賴項新增至您的專案

# Using pnpm
pnpm add -D nuxt-facebook-chat

# Using yarn
yarn add --dev nuxt-facebook-chat

# Using npm
npm install --save-dev nuxt-facebook-chat

將 nuxt-facebook-chat 新增至 nuxt.config.ts 的 modules 區段

export default defineNuxtConfig({
  modules: ["nuxt-facebook-chat"],
});

用法

若要在您的 Nuxt 3 專案中使用此模組，請確保僅在客戶端渲染它

<template>
  <div>
    <!-- Ensure the chat is rendered client-side -->
    <client-only>
      <nuxt-facebook-chat :options="options" />
    </client-only>
  </div>
</template>

<script setup lang="ts">
import { NuxtFacebookChatOptions } from 'nuxt-facebook-chat';

// Define your chat options
const options: NuxtFacebookChatOptions = {
  pageId: "100180625030536",  // Your Facebook Page ID
  locale: "th_TH",            // Set the locale for the chat
  themeColor: "#E04040",      // Customize the chat theme color
};
</script>

選項

對於 options 屬性，您應該使用 NuxtFacebookChatOptions 介面。以下是詳細資訊

pageId (必填)：您的 Facebook 粉絲專頁 ID。
elementId (選填)：聊天元素的 ID。
locale (選填)：聊天的語言環境。預設為 "en_US"。
version (選填)：Facebook SDK 的版本。預設為最新可用版本。
themeColor (選填)：聊天主題的顏色。預設為 "#333333"。
loggedInGreeting (選填)：針對已登入使用者的歡迎訊息文字。
loggedOutGreeting (選填)：針對已登出使用者的歡迎訊息文字。
greetingDialogDisplay (選填)：歡迎訊息對話框的顯示方式。選項："show"、"fade"、"hide" 或 "icon"。
greetingDialogDelay (選填)：歡迎訊息對話框的延遲時間。
ref (選填)：參考字串。

如需更詳細瞭解每個屬性及其可能的值，您可以參考官方 Facebook Chat Plugin 文件。

將網域加入白名單以用於 Facebook Customer Chat SDK

為了確保 Facebook Customer Chat SDK 在您的網站上順利運作，將您的網域加入白名單至關重要。加入白名單保證聊天外掛程式將在您的網站上顯示和運作，而不會有任何中斷。

將網域加入白名單的步驟

導覽至您的 Facebook 粉絲專頁設定。
在左欄中，按一下「進階訊息」。
在「白名單網域」區段下，輸入您網站的網域。
按一下「儲存」。

透過遵循這些步驟，您已確保 Facebook 聊天外掛程式將在您的網站上順暢運作，而不會有任何潛在的顯示或功能問題。

貢獻

如果您想改進或修正模組中的某些內容，請隨時開啟 issue 或 pull request。

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release