Nuxt Facebook 聊天

nuxt-facebook-chat 是一个专为 Nuxt 3 项目设计的模块，旨在轻松集成 Facebook 的客户聊天 SDK。它专为 Nuxt 3 项目打造，简化了嵌入过程，减少了繁琐的安装步骤。通过集成 Facebook 聊天界面，可以丰富用户互动。使用这个精简的模块，节省时间并提升 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 属性，您应该使用 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