📞 Nuxt WhatsApp Widget

A customizable and lightweight WhatsApp chat widget module for Nuxt 3 & 4. Let users contact you directly from your website using WhatsApp.

⚠️ Nuxt Compatibility

This module supports the following Nuxt versions:

| Nuxt Version | Use Module Version | |----------------------|------------------------| | Nuxt < 3.17.0 | nuxt-whatsapp-widget@^1.3.2 | | Nuxt ≥ 3.17.0 | nuxt-whatsapp-widget@^2.0.0 |

Note: Starting from v2.0.0, this module uses <NuxtTime> internally, which requires Nuxt 3.17.0 or higher.

✨ Features

• 📱 Floating WhatsApp chat widget
• 💬 Custom welcome messages
• 👤 Customizable support agent name and avatar
• ⚙️ Configurable via Nuxt config or component props
• ⚡ Easy and automatic integration
• 🌐 Built-in RTL support using logical CSS properties for full right-to-left compatibility

📦 Installation

For Nuxt 3.17 or later:

npm install nuxt-whatsapp-widget
# or
yarn add nuxt-whatsapp-widget

For Nuxt versions earlier than 3.17:

npm install nuxt-whatsapp-widget@^1.3.2
# or
yarn add nuxt-whatsapp-widget@^1.3.2

🔌 Module Setup

In your nuxt.config.ts, register the module and provide any options you want:

export default defineNuxtConfig({
  modules: ['nuxt-whatsapp-widget'],

  whatsappWidget: {
    phone: '+212600000000',             // ✅ required
    userName: 'Support Team',           // optional
    userImage: '/icons/user-profile.svg', // optional (from /public or external URL)
    messages: ['Hello!', 'Need help?']  // optional (string or array)
  }
})

⚙️ Module Options

| Option | Type | Required | Default | Description | |--------------|-----------------------|----------|----------------------------------|------------------------------------------------------------| | phone | string | ✅ | — | WhatsApp number (international format, e.g., +2126...) | | userName | string | ❌ | "Support" | Name of the agent shown in the widget | | userImage | string | ❌ | "/icons/user-profile.svg" | Path or URL to agent avatar (prefer /public or full URL) | | messages | string \| string[] | ❌ | "Hi there 👋 How can I help you ?" | One or more messages shown in the widget | | label | string | ❌ | "Start Chat" | Text shown on the button or entry point of the widget |

🧱 Component Usage

The widget is injected automatically, but you can also use the component manually and override props.

✅ Manual Usage:

<template>
  <WhatsappWidget
    phone="+212699988877"
    user-name="Support Agent"
    user-image="/images/avatar.svg"
    :messages="['Hi there!', 'We are here to help.']"
    label="Start Chat Now"
  />
</template>

🔁 Props

| Prop | Type | Description | |--------------|-----------------------|-------------------------------------------| | phone | string | Overrides phone number | | userName | string | Overrides agent name | | userImage | string | Overrides avatar image | | messages | string \| string[] | Overrides welcome messages |

Props will override the values provided in nuxt.config.ts.

🧪 Local Development & Testing

1. Link your local module:

cd nuxt-whatsapp-widget
npm install
npm link

2. In your Nuxt test project:

npm link nuxt-whatsapp-widget

3. Restart your dev server and test usage with config or component props.

📄 License

MIT

🙌 Credits

Built with ❤️ by Oussama Louelkadi