nuxt-facebook-chat: Effortless integration of Facebook's Customer Chat SDK into Nuxt 3. Enhance user engagement with zero coding.
MIT License
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.
⛰ 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.
nuxt-facebook-chat
dependency to your projectnpx nuxi@latest module add nuxt-facebook-chat
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:
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:
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