How to add WhatsApp Widget to your Strapi Website

Strapi is an amazing Headless CMS. You can add our cool WhatsApp Widget to your site using Strapi and the Tag Manager.

In this page you have the code to install Tag Manager in Strapi and then you can add your code

https://market.strapi.io/plugins/strapi-gtm-module

Strapi, a leading open-source headless CMS, empowers developers to create flexible, API-driven content management solutions. Its modular architecture and extensive plugin ecosystem make it a favorite for building tailored applications.

By integrating WhatsApp as a communication channel via the Tochat.be WhatsApp Widget, Strapi developers and users can enhance user engagement, streamline customer interactions, and drive conversions. This article explores the benefits of using WhatsApp as a communication channel for Strapi projects and provides a step-by-step guide to installing the Tochat.be WhatsApp Widget using the Strapi Tag Manager plugin.

Benefits of WhatsApp as a Communication Channel for Strapi Developers and Users

WhatsApp, with over 2 billion active users worldwide, is a powerful platform for direct, personal, and instant communication. For Strapi developers and users, integrating WhatsApp offers several advantages:

Enhanced User Engagement

WhatsApp’s familiar interface makes it an approachable channel for users to interact with businesses or applications. By embedding a WhatsApp chat widget on a Strapi-powered website or app, developers can provide a seamless way for users to ask questions, seek support, or engage with content in real time. This direct line of communication fosters stronger connections and keeps users engaged.

Increased Lead Generation and Conversions

A WhatsApp widget can turn website visitors into leads by offering a low-friction communication channel. Users can initiate conversations instantly, allowing businesses to capture contact details, answer pre-sale questions, or guide users toward a purchase. Research shows that 71% of consumers expect personalized service, and WhatsApp enables tailored interactions that boost conversion rates.

Persistent Conversations

Unlike traditional live chat systems, WhatsApp allows conversations to continue even after users leave the website. This persistence is valuable for following up with leads, answering lingering questions, or providing personalized recommendations, ultimately strengthening customer relationships.

Personalized Customer Support

Strapi users managing e-commerce stores, service-based businesses, or personal portfolios can leverage WhatsApp to offer 24/7 customer support. The Tochat.be widget enables customization of welcome messages and branding, ensuring a professional and cohesive user experience that aligns with the Strapi application’s design.

Cross-Platform Compatibility

Strapi’s headless nature allows it to power applications across web, mobile, and other platforms. WhatsApp’s universal accessibility—available on mobile and desktop—complements this flexibility, ensuring users can connect with businesses from any device, enhancing the omnichannel experience.

Automation and Scalability

By integrating WhatsApp with Strapi’s API-driven backend, developers can automate responses, trigger notifications, or manage customer data. For advanced use cases, the WhatsApp Business API can be combined with Strapi’s content management capabilities to scale communication workflows, such as sending order updates or personalized offers.

How to Install the Tochat.be WhatsApp Widget Using Strapi Tag Manager

The Strapi Tag Manager plugin simplifies the integration of third-party scripts, such as the Tochat.be WhatsApp Widget, into Strapi-powered applications. Below is a step-by-step guide to installing the widget using the Tag Manager plugin, making it accessible for Strapi developers and users with minimal coding effort.Prerequisites

A Strapi project (version 4 or 5) set up and running. For setup instructions, refer to the Strapi Quick Start Guide.
The Strapi Tag Manager plugin installed. This plugin is available in the Strapi Marketplace or can be installed via npm with the command: bashnpm install strapi-plugin-tag-manager
A Tochat.be account with a WhatsApp Widget configured. Sign up at tochat.be and generate the widget code.
Access to your Strapi admin panel (default: http://localhost:1337/admin).

Step-by-Step Installation

Install the Strapi Tag Manager Plugin

Navigate to your Strapi project directory in the terminal.
Install the Tag Manager plugin by running: bashnpm install strapi-plugin-tag-manager
Rebuild and restart your Strapi server: bashnpm run build npm run develop
Verify that the Tag Manager plugin appears in the Strapi admin panel under the “Plugins” section.

Configure the Tochat.be WhatsApp Widget

Log in to your Tochat.be account and navigate to the widget creation section.
Customize your widget’s appearance, including the welcome message, button position, and branding to match your Strapi application.
Once configured, Tochat.be will provide a unique JavaScript snippet for your widget. Copy this code, which typically looks like: html<script src="https://widget.tochat.be/whatsapp.js?phone=1234567890"></script>

Add the Widget Code to Strapi Tag Manager

In the Strapi admin panel, navigate to the Tag Manager plugin (usually under “Plugins” or “Settings”).
Create a new tag by clicking “Add Tag” or a similar option, depending on the plugin’s interface.
Paste the Tochat.be widget code into the “Custom HTML” or “Script” field.
Specify where the script should be injected (e.g., in the <head> or <body> section of your site). For the WhatsApp widget, placing it before the closing </body> tag is recommended for optimal performance.
Set any triggers or conditions, such as loading the widget on all pages or specific routes, if the Tag Manager plugin supports this feature.
Save the tag configuration.

Update Permissions (if Necessary)

If your Strapi application restricts public access to certain routes or content, ensure the widget is accessible. Navigate to Settings > Users & Permissions Plugin > Roles > Public in the Strapi admin panel.
Enable permissions for any relevant endpoints (e.g., find or findOne for content types) to ensure the widget functions correctly.

Test the Widget

Open your Strapi-powered website or application in a browser.
Verify that the Tochat.be WhatsApp Widget appears (typically in the bottom-right corner) and blends seamlessly with your site’s design.
Click the widget to ensure it opens WhatsApp on desktop or mobile, initiating a chat with the configured phone number.
Test the widget’s functionality across different devices and browsers to ensure compatibility.

Customize and Optimize

Return to the Tochat.be dashboard to tweak the widget’s settings, such as button color, position, or automated messages, to align with your brand.
Use Strapi’s Content Manager to integrate dynamic data (e.g., product details or user-specific content) into WhatsApp conversations for a personalized experience.

Optional: Advanced Integration with Strapi APIs

For developers seeking deeper integration, Strapi’s API capabilities can be combined with the WhatsApp Business API or Tochat.be’s advanced features. For example:

Use Strapi’s webhooks to trigger WhatsApp notifications when content is created, updated, or deleted.
Create a custom Strapi plugin to handle WhatsApp messages directly from the admin panel, leveraging libraries like @indoomni/strapi-plugin-whatsapp-web.
Store user interactions from WhatsApp in Strapi’s database for analytics or follow-up actions.

Conclusion

Integrating the Tochat.be WhatsApp Widget into a Strapi project via the Tag Manager plugin offers a powerful way to enhance user engagement, streamline communication, and drive business outcomes. The combination of Strapi’s flexible CMS and WhatsApp’s ubiquitous messaging platform creates a seamless, personalized experience for users across web and mobile applications. By following the simple installation steps outlined above, Strapi developers and users can quickly deploy the widget and start reaping the benefits of instant, persistent, and scalable communication.Ready to get started? Sign up for a Tochat.be account, install the Strapi Tag Manager plugin, and embed the WhatsApp Widget to transform how you connect with your audience. For more advanced use cases, explore Strapi’s plugin ecosystem and WhatsApp Business API to unlock even greater potential.