Customer Experience

How to add a floating WhatsApp button to your Webflow page

How to add a floating WhatsApp button to your Webflow page

You will first need to generate the HTML code that allows your site to display this button. To do this, we have created a free tool that lets you configure the button using a visual editor which is much easier than having to manipulate markup code when you are not a developer.

Getting the HTML code

  1. Go to
  2. Personalize the button to reflect your brand, adding a custom status and greeting message to the button.
  3. Copy the generated code to the clipboard. You will need it for the next step.

Install the button on your Webflow site

  • Log in to your Webflow account and go to the dashboard.
  • Find the site to which you want to add the WhatsApp contact button, then click on settings.
Site settings
  • Navigate to the Custom Code tab.
  • Then paste the code into the editor and click on Save Changes.
Custom code on Webflow
  • Finally, publish the page with the latest changes you made and you should be able to see your new button appearing on the site to all your visitors.
Publish changes

This tutorial is not only valid for Webflow. You can install the same HTML code in your site powered by Wix, Shopify, WooCommerce, WordPress, or essentially, any type of site.

An automated search engine and a chatbot trained exclusively with your store's data.

Start free trial