WAButton

Webflow Custom Code

Seamless WhatsApp Widget for Webflow Sites

Deliver a pixel-perfect WhatsApp chat experience for client projects and SaaS marketing pages. High aesthetic polish and complete styling control.

2 min setup Target: Project Settings -> Custom Code -> Footer Code

Step-by-step installation for Webflow

Follow these steps to add your WAButton installation code to your Webflow website.

  1. 1

    Open Webflow Project Settings

    Open your project in Webflow. Go to Project Settings -> Custom Code.

    Pro tip: You can also add custom code to specific individual pages in Webflow page settings if desired.

  2. 2

    Paste in Footer Code

    Scroll to "Footer Code" (Before </body> tag) and paste your snippet.

    Pro tip: WAButton scopes its styles to wabutton-prefixed class names, so your Webflow class names and CSS grid stay intact.

    <script src="https://widget.wabutton.app/v1.js" data-widget-id="YOUR_WIDGET_ID" async></script>
  3. 3

    Publish Site

    Click Save Changes, then hit Publish to publish to your custom domain.

    Pro tip: Publish to both the staging domain and production domain to test before client sign-off.

Why store owners and agencies choose WAButton for Webflow

Designer Aesthetic

Sleek typography, subtle drop shadows, and high-fidelity micro-interactions.

Agency Client Handoff

Share interactive live widget previews with clients before deploying.

Leaves Your Classes Alone

Styles are scoped to wabutton-prefixed class names and the launcher is fixed-position, so your Webflow classes and layout stay as they are.

Frequently asked questions

Will WAButton styles interfere with my Webflow CSS classes?

No. WAButton scopes its styles to its own wabutton-prefixed class names, so they do not touch your Webflow classes.

Add WhatsApp to .

Give visitors a way to ask about your products, prices or availability. Reply from the WhatsApp you already use.

Free plan available. No credit card required.