Nuxt Facebook 聊天

nuxt-facebook-chat 是一个专门为 Nuxt 3 设计的模块，旨在轻松集成 Facebook Customer Chat SDK。专为 Nuxt 3 项目打造，它简化了嵌入过程，减少了繁琐的安装步骤。通过整合 Facebook 聊天 UI，丰富了用户互动。使用这个精简的模块，节省时间并提升您的 Nuxt 3 应用程序的用户参与度。

🏀 在线游乐场

特性

⛰ 轻松集成：专为 Nuxt 3 设计，允许无缝和直接的集成，只需最少的设置。
🚠 灵活配置：通过简单的基于 prop 的设置轻松自定义您的聊天体验。
🌲 客户端优化：确保聊天在客户端渲染，以防止任何服务器端问题并确保兼容性。
🌟 全面的选项：丰富的选项集，源自官方 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 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 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