Nuxt Facebook チャット

nuxt-facebook-chat は、Facebook のカスタマーチャット SDK と簡単に統合するための Nuxt 3 専用モジュールです。 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.config.ts の modules セクションに nuxt-facebook-chat を追加します

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 のドメインのホワイトリスト登録

Web サイトで Facebook カスタマーチャット SDK がスムーズに機能するようにするには、ドメインをホワイトリストに登録することが重要です。ホワイトリストに登録することで、チャットプラグインがサイトで中断なく表示され、動作することが保証されます。

ドメインをホワイトリストに登録する手順

Facebook ページの設定に移動します。
左側の列で、「高度なメッセージング」をクリックします。
「ホワイトリストに登録されたドメイン」セクションで、Web サイトのドメインを入力します。
「保存」をクリックします。

これらの手順に従うことで、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