WApp Chat

How to Install WhatsApp Widget on Webflow

<<< Back to help center

This guide will walk you through the simple steps to add your Wapp Chat Widget to your Webflow website. You can choose to add it to a single page or across your entire site. Just grab your unique installation code from your Wapp Chat Widget dashboard and follow the instructions below.
Step-by-step guide for getting the code of the Wapp Chat widget

Choose How You Want to Display the Widget

Install to the single page

    • Step 1: Open Your Webflow Project

    • Log in to your Webflow dashboard. Find the website you want to edit, hover over it, and click Open in Webflow.

    • Step 2: Add a Code Embed Element

    • Navigate to the page where you want the widget. Click the + (plus) icon in the left-hand panel to open the Add Elements menu. Find the Code Embed element and drag it onto the canvas at the exact spot where you want the WhatsApp widget to appear.

    • Please note that the Embed Code element is a feature reserved for Webflow paying subscribers. Access to this functionality requires an active paid plan; it is not available on free accounts.

    • Step 3: Paste the Installation Code

    • Click the Code Embed element on your page to open the editor. Paste your Wapp Chat Widget installation code into the window. Click Save & Close.

    • Step 4: Publish Your Site

    • Step 4: Publish Your Site Once you've placed the code, click the Publish button in the top-right corner. Select the domain you want to publish to and confirm. Your WhatsApp widget is now live on that specific page!

Install to the All pages

🌐 Add Your Widget to All Pages

    • Step 1: Go to Webflow Project Settings

    • Step 1: Go to Webflow Project Settings From your Webflow dashboard, find the correct website. Click the three dots (...) icon on the project card and select Settings.

    • Step 2: Access the Custom Code Section

    • In the Settings menu, click on the Custom Code tab in the left sidebar.

    • Step 3: Paste Code in the Head Section

    • Paste your Wapp Chat Widget installation code here. Click Save at the.

    • Step 4: Publish Your Changes

    • Go back to the project dashboard or open the Designer, click the Publish button, and select your domains. Your WhatsApp widget will now be active across your entire Webflow site.

All done! Your Wapp widget is now installed and will appear on every page of your Webflow website.

  • Need a Hand?

  • If you encounter any issues during installation or have questions about customizing your widget, our support team is here to help. Please reach out to us at support@wapp-chat-widget.com.

  • support@wapp-chat-widget.com