Nuxt Facebook 聊天

nuxt-facebook-chat 是一個專為 Nuxt 3 設計的特殊模組，旨在輕鬆整合 Facebook 的客戶聊天 SDK。專為 Nuxt 3 專案打造，它簡化了嵌入過程，減少了繁瑣的安裝步驟。透過整合 Facebook 聊天 UI，可豐富使用者互動。使用此精簡的模組，節省時間並提高 Nuxt 3 應用程式的使用者參與度。

🏀 線上遊樂場

功能

⛰ 輕鬆整合：專為 Nuxt 3 設計，可實現無縫且直接的整合，只需最少的設定。
🚠 彈性配置：透過簡單的基於 prop 的設定輕鬆自訂您的聊天體驗。
🌲 客戶端優化：確保聊天在客戶端渲染，以防止任何伺服器端問題並確保相容性。
🌟 完整選項：豐富的選項集，源自官方 Facebook 聊天外掛程式文件，讓您完全掌控聊天體驗。
🛠 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 prop，您應該使用 NuxtFacebookChatOptions 介面。以下是詳細資訊

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

若要更詳細了解每個 prop 及其可能的值，您可以參考官方的 Facebook 聊天外掛程式文件。

將網域加入 Facebook 客戶聊天 SDK 的白名單

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

將網域加入白名單的步驟

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

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

貢獻

如果您想改進或修正模組中的某些內容，歡迎開啟問題或提取請求。

# 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