The most rudimentary way to integrate the button into your website is to create a WhatsApp link in HTML with the following href attribute:
There is also a short version of the link with the structure:
In both cases, at the end of the link, you must enter the phone senegal phone number list number of your WhatsApp account with its corresponding international prefix (without the “+” sign). This would be the example for a Spanish number (with prefix +34):
The link opens a WhatsApp chat with the indicated phone number. If you have the ability to manipulate the HTML and CSS code of your website, you can insert the link wherever you see fit.
WhatsApp Button with Conversations, by Brevo
If you prefer to integrate without mobilizing technical skills, the chat widget in Brevo's Conversations tool allows you to easily integrate the WhatsApp button into your website, as well as giving you access to other resources to manage your WhatsApp campaigns.
Below you can see how to use it with or without the pre-built integrations for WordPress (including WooCommerce) and Shopify, on any website. There is also an integration for Google Tag Manager which is not covered in this article.
To begin with, in all cases:
1) Create a free Brevo account to activate WhatsApp campaigns and connect the phone number you use for WhatsApp Business.
2) Go to Conversations > Chat Widget . This feature also includes Brevo's web chat (which, as mentioned in the previous section, complements the WhatsApp button).
3) In the Customize your chat widget step , most of the settings concern only web chat (e.g. color). However, some parameters, such as the position of the chat button, are also relevant for WhatsApp.
customize-widget-whatsapp-on-web
The good news is that when you sign up for any of Brevo's monthly plans, you get your first 1000 messages free!
Integration into any website
The most basic way to install the WhatsApp button with Brevo is to generate the chat widget code in Brevo and integrate it into your website's HTML code.
Unlike the basic api.whatsapp link , in this case there is hardly any need to make any adjustments to the code. After the above steps:
4) When you reach the Install Your Chat Widget step , copy the JavaScript code that appears on the screen.
-whatsapp-button-in-web-installation
5) Paste the code into your website's HTML. It's best to insert it just before the <head> tag on the pages of your website where you want the WhatsApp button to appear.
More detailed instructions:
Install the chat widget manually on any website
WordPress and WooCommerce integration
The integration of the WhatsApp button into the WordPress CMS and its WooCommerce e-commerce plugin is automatic. To do this:
4) In the WordPress backend of your website, add one of these plugins and activate it:
Generic WordPress Website: Newsletter, SMTP, Email Marketing and Subscription Forms by Brevo
WordPress Website with WooCommerce: Brevo WooCommerce Plugin
5) Connect your website to your Brevo account via a v3 API key.
6) Activate the Brevo tracker and check its operation.