nuxt-facebook-chat is a specialized Nuxt 3 module designed for effortless integration with Facebook's Customer Chat SDK. Crafted explicitly for Nuxt 3 projects, it simplifies the embedding process, reducing tedious installation steps. By incorporating the Facebook chat UI, user interactions are enriched. Save time and boost user engagement in your Nuxt 3 application with this streamlined module.

• 🏀 Online playground

• ⛰ Effortless Integration: Designed specifically for Nuxt 3, allowing seamless and straightforward integration with minimal setup.

• 🚠 Flexible Configuration: Easily customize your chat experience through simple prop-based settings.

• 🌲 Client-Side Optimized: Ensures that the chat is rendered client-side to prevent any server-side issues and ensure compatibility.

• 🌟 Comprehensive Options: Rich set of options derived from the official Facebook Chat Plugin documentation, giving you full control over the chat experience.

• 🛠 TypeScript Support: Leveraging TypeScript for safer code and better developer experience. 📖 Extensive Documentation: Comprehensive guidelines and examples to get you started in no time.

1. Add nuxt-facebook-chat dependency to your project

npx nuxi@latest module add nuxt-facebook-chat

2. Add nuxt-facebook-chat to the modules section of nuxt.config.ts

export default defineNuxtConfig({ modules: ["nuxt-facebook-chat"], });

To use this module in your Nuxt 3 project, ensure that you only render it on the client side:

<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>

For the options prop, you should use the NuxtFacebookChatOptions interface. Here are the details:

• pageId (required): The ID of your Facebook Page.
• elementId (optional): The ID for the chat element.
• locale (optional): The locale for the chat. Defaults to "en_US".
• version (optional): The version of the Facebook SDK. Defaults to the latest available.
• themeColor (optional): Color of the chat theme. Defaults to "#333333".
• loggedInGreeting (optional): The greeting text for logged-in users.
• loggedOutGreeting (optional): The greeting text for logged-out users.
• greetingDialogDisplay (optional): The way the greeting dialog is displayed. Options: "show", "fade", "hide", or "icon".
• greetingDialogDelay (optional): The delay for the greeting dialog.
• ref (optional): A reference string.

For a more detailed understanding of each prop and its possible values, you can refer to the official Facebook Chat Plugin documentation.

To ensure the smooth functionality of the Facebook Customer Chat SDK on your website, it's crucial to whitelist your domain. Whitelisting guarantees that the chat plugin will display and operate without any disruptions on your site.

Steps to Whitelist your Domain:

1. Navigate to your Facebook Page settings.
2. In the left column, click on "Advanced Messaging."
3. Under the "Whitelisted Domains" section, enter your website's domain.
4. Click "Save."

By following these steps, you've ensured that the Facebook chat plugin will work seamlessly on your site without any potential display or functionality issues.

If you want to improve or fix something in the module, feel free to open issues or pull requests.

# 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