Website Floating Icon Button for WhatsApp, Messenger, SMS, Instagram, Telegram & More
by Taqnix https://www.taqnix.com
Odoo
$ 10.18
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Odoo Apps Dependencies |
•
Website (website)
• Discuss (mail) |
| Lines of code | 297 |
| Technical Name |
taqnix_whatsapp_chat |
| License | LGPL-3 |
| Website | https://www.taqnix.com |
| Versions | 16.0 17.0 18.0 19.0 |
| Availability |
Odoo Online
Odoo.sh
On Premise
|
| Odoo Apps Dependencies |
•
Website (website)
• Discuss (mail) |
| Lines of code | 297 |
| Technical Name |
taqnix_whatsapp_chat |
| License | LGPL-3 |
| Website | https://www.taqnix.com |
| Versions | 16.0 17.0 18.0 19.0 |
Website Floating Icon Button for WhatsApp, Messenger, SMS, Instagram, Telegram & More
Visit Website
Contact Us
Multi-Platform Support
WhatsApp, Messenger, SMS, Telegram & More
Mobile Floating Action Button Preview
Configuration
Customization Options
- Activate Chat Button (enable/disable)
- Button Icon (Font Awesome class, e.g. âfa-whatsappâ)
- Link (eg. full WhatsApp link or phone number)
- Default Message (autoâfilled when clicked)
- Button Text (displayed beside the icon)
- Button Position (Right, Left, etc.)
- Button Background Color (hex code)
- Button Text Color (hex code)
- Button Icon Color (hex code)
- Show on Mobile (toggle visibility)
- Show on Desktop (toggle visibility)
Features
- Floating WhatsApp icon visible on all website pages.
- Fully responsive â supports both desktop and mobile views.
- Opens a WhatsApp chat with a predefined number and message.
- Customizable icon, position, color, and display text.
- Admin-configurable via Website Settings in the backend.
- Option to display on mobile only, desktop only, or both.
How It Works
5.1 Frontend
- The module injects a floating
<a>link using a QWeb template. - The icon is usually placed at the bottom-right corner.
- Clicking it opens a WhatsApp chat window in a new browser tab or app.
- The link format used:
https://wa.me/<phone_number>?text=<default_message>
5.2 Backend
- Admin goes to Website > Configuration > Settings.
- Under the "WhatsApp Chat Settings" section:
- Toggle to enable/disable the feature.
- Input full WhatsApp link or number with country code.
- Enter default greeting message.
- Customize appearance (icon, colors, text).
- Choose visibility options for desktop and/or mobile.
Installation Steps
- Extract the downloaded ZIP:
taqnix_whatsapp_chat.zip. - Copy the module folder to your custom Odoo modules directory.
- Restart the Odoo server.
- Update the App List from the Odoo Apps menu.
- Search for and install the
taqnix_whatsapp_chatmodule. - Go to Website > Configuration > Settings to configure.
Configuration Panel (Field Explanations)
| No. | Field Name | Description |
|---|---|---|
| 1 | Enable WhatsApp | Toggle to show or hide the floating button. |
| 2 | Button Icon | Font Awesome class (e.g., fa-whatsapp, fa-comment). |
| 3 | WhatsApp Number | WhatsApp number with country code or complete link. |
| 4 | Default Message | Message auto-filled when chat opens. |
| 5 | Button Position | Icon alignment (Right, Left, etc.). |
| 6 | Button Text | Optional text displayed beside the icon. |
| 7 | Button Color | Background color of the button. |
| 8 | Text Color | Color of text inside the button. |
| 9 | Icon Color | Color of the WhatsApp icon. |
| 10 | Show on Mobile | Whether to display the icon on mobile devices. |
| 11 | Show on Desktop | Whether to display the icon on desktops/laptops. |
Frontend Display Behavior
- The icon is fixed at the configured location (e.g., bottom-right).
- It remains visible across all website pages.
- On click, it opens WhatsApp with the configured number and message.
- Below is the core QWeb snippet:
<a href="https://wa.me/{{ phone_number }}" target="_blank" class="whatsapp-float">
<img src="/taqnix_whatsapp_chat/static/src/img/whatsapp-icon.png" alt="WhatsApp" />
</a>CSS Styling Snippet
.whatsapp-float {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
width: 50px;
height: 50px;
}You can modify position, size, animation, and hover effects as needed.
Example Contact Links
WhatsApp:
https://wa.me/966512345678?text=Hi%2C%20I%20need%20some%20help%21SMS:
sms:+966512345678?body=Hi%2C%20I%20need%20some%20help%21Email:
mailto:support@example.com?subject=Support%20Request&body=Hi%2C%20I%20need%20some%20help%21Facebook Messenger:
https://m.me/yourpageusernameFacebook Page:
https://www.facebook.com/yourpageusernameInstagram:
https://instagram.com/yourusernameTelegram:
https://t.me/yourusernameTwitter:
https://twitter.com/yourusernameSnapchat:
https://www.snapchat.com/add/yourusername
Please log in to comment on this module