Nuxt Facebook 聊天

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

🏀 在线演示

功能

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

pageId（必填）：您的 Facebook 页面的 ID。
elementId（可选）：聊天元素的 ID。
locale（可选）：聊天的语言环境。默认为“en_US”。
version（可选）：Facebook SDK 的版本。默认为最新可用版本。
themeColor（可选）：聊天主题的颜色。默认为“#333333”。
loggedInGreeting（可选）：登录用户的问候语。
loggedOutGreeting（可选）：未登录用户的问候语。
greetingDialogDisplay（可选）：问候语对话框的显示方式。选项：“show”、“fade”、“hide”或“icon”。
greetingDialogDelay（可选）：问候语对话框的延迟。
ref（可选）：引用字符串。

要更详细地了解每个属性及其可能的值，您可以参考官方的 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