Webflow WhatsApp Widget: Embed Code and Styling
Webflow WhatsApp widget can be installed in three different ways depending on how dynamic you want the phone number to be. All three target wa.me/966500000000 with the standard Wutt intro message.
1. Custom code embed in <body>
Webflow → Project Settings → Custom Code → Footer Code. Paste this and Publish. The widget renders on every page:
<a id="wutt-webflow-fab"
href="https://wa.me/966500000000?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20Wutt."
target="_blank" rel="noopener" aria-label="Chat on WhatsApp">
<svg viewBox="0 0 32 32" aria-hidden="true">
<path fill="#fff" d="M16 3C9 3 3.5 8.5 3.5 15.5c0 2.4.7 4.7 1.9 6.7L3 29l7-1.8c1.9 1 4 1.5 6 1.5 7 0 12.5-5.5 12.5-12.5S23 3 16 3zm5.6 15.2c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.7.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.2-.7-1.7-1-2.3-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5 1.7.7 2.4.8 3.3.6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.4z"/>
</svg>
</a>
<style>
#wutt-webflow-fab{position:fixed;right:24px;bottom:24px;z-index:9999;
width:60px;height:60px;border-radius:50%;background:#25D366;
display:flex;align-items:center;justify-content:center;
box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s ease}
#wutt-webflow-fab:hover{transform:scale(1.06)}
#wutt-webflow-fab svg{width:34px;height:34px}
@media(max-width:600px){#wutt-webflow-fab{right:14px;bottom:14px;width:54px;height:54px}}
</style>2. Webflow component (Symbol) setup
If you prefer using the Designer rather than custom code, build the button as a Symbol, then drop it on every page template:
- Add a Link Block on the canvas. Style it as a 60×60 circle with green background
#25D366, position fixed, bottom-right. - Inside the link, place a Image element and upload the WhatsApp SVG (or use the path data above as inline SVG).
- Set the link's URL to
https://wa.me/966500000000?text=Hi%2C%20I%27d%20like%20to%20know%20more%20about%20Wutt. - Open Link Settings → tick Open in new tab.
- Convert to a Component (right-click → Create Component). Drag it onto your Navbar, Footer, or a sticky section.
For an animated badge, add a "Chat" Text Element next to the icon and animate it on hover using Webflow Interactions (transform: translateX(-8px) on hover).
3. CMS-driven dynamic phone number
If each CMS item (office, branch, property, listing) has its own phone, bind the link's href to a CMS field. Add a Plain Text field called Whatsapp Phone in your Collection. Then inside the Symbol use:
<!-- In a CMS-driven Template page, dynamic phone from a Collection item: -->
<a class="wutt-cms-chat"
href="https://wa.me/{{wf phone}&" target="_blank" rel="noopener">
Chat with {{wf name&}}
</a>
<style>
.wutt-cms-chat{background:#25D366;color:#fff;padding:10px 16px;border-radius:999px;
text-decoration:none;font-weight:700}
</style>Replace the bracketed placeholders with Webflow's binding syntax in the Designer (Get field from {Collection} → pick the field → it generates {Collection Name>>Field Name} in the editor). Bind the phone to the href and the city/branch name to the link text.
Styling tips
- Use
z-index: 9999so the button stays above Webflow navbars and modals. - Add
aria-label="Chat on WhatsApp"for screen readers. - On mobile, shrink the button and add a bottom safe-area inset:
bottom: max(14px, env(safe-area-inset-bottom)).
Add Wutt to your site — start $1 trial
Drop the widget in, then keep every reply, click, lead, and order inside Wutt Inbox, Wutt Book, Wutt Reviews, Wutt Loyalty, and the CRM follow-up workspace.
Start $1 trialShare This post
Recent Post
واتساب للصالونات | Salons WhatsApp Booking
10 Jun, 2026
إنشاء رابط واتساب | WhatsApp Link Generator
10 Jun, 2026
متجر واتساب وطلبات واتساب | WhatsApp Commerce
10 Jun, 2026
CRM واتساب وصندوق وارد الفريق | WhatsApp CRM
10 Jun, 2026
