Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/superdev-tech/nuxt-facebook-chat
nuxt-facebook-chat: Effortless integration of Facebook's Customer Chat SDK into Nuxt 3. Enhance user engagement with zero coding.
https://github.com/superdev-tech/nuxt-facebook-chat
facebook-chat-library facebook-chat-sdk facebook-customer-chat nuxt-3 nuxt-module
Last synced: 3 months ago
JSON representation
nuxt-facebook-chat: Effortless integration of Facebook's Customer Chat SDK into Nuxt 3. Enhance user engagement with zero coding.
- Host: GitHub
- URL: https://github.com/superdev-tech/nuxt-facebook-chat
- Owner: superdev-tech
- License: mit
- Created: 2023-08-24T07:56:36.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-18T01:31:18.000Z (6 months ago)
- Last Synced: 2024-09-30T08:21:40.627Z (3 months ago)
- Topics: facebook-chat-library, facebook-chat-sdk, facebook-customer-chat, nuxt-3, nuxt-module
- Language: TypeScript
- Homepage:
- Size: 226 KB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Nuxt Facebook Chat
`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](https://stackblitz.com/edit/nuxt-starter-trutjc?file=app.vue)
## Features
- ⛰ 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.
## Quick Setup
1. Add `nuxt-facebook-chat` dependency to your project
```bash
npx nuxi@latest module add nuxt-facebook-chat
```
2. Add `nuxt-facebook-chat` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ["nuxt-facebook-chat"],
});
```
## Usage
To use this module in your Nuxt 3 project, ensure that you only render it on the client side:
```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
};
```
### Options
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](https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin#steps).
### Whitelisting Domains for Facebook's Customer Chat SDK
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.
## Contributing
If you want to improve or fix something in the module, feel free to open issues or pull requests.
```bash
# 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
```