How to Add a WhatsApp Widget to Framer (2026 Ultimate Guide)
Framer has exploded as the #1 choice for modern landing pages, marketing sites, and startup homepages. Its unparalleled speed and fluid interactions are unmatched in the visual development space. However, to keep that momentum going through your sales funnel, you need a chat solution that matches Framer's performance.
If you are driving paid traffic to a lightning-fast Framer site, but forcing users to fill out a static lead form and wait 24 hours for an email reply, your conversion rate is bleeding.
By adding a WhatsApp widget to your Framer site, you unlock instant communication, allowing you to capture leads while buyer intent is at its absolute peak. Here is the definitive guide on integrating WhatsApp into Framer in 2026.
The "Framer Speed" Problem
Framer sites are fast. They load instantly. Your visitors expect your business to be just as fast.
According to the Harvard Business Review, responding to a lead within 5 minutes makes you 100x more likely to connect and 21x more likely to close a deal compared to responding in 30 minutes.
A traditional email form breaks the "Framer experience." It introduces friction and latency. A WhatsApp widget, on the other hand, moves the conversation to an app the user already has open all day, enabling instant responses.
Method 1: The Global Component Strategy (Recommended)
Best for: Most startups, agencies, and marketing sites that want omnipresent support.
The easiest way to add WhatsApp to Framer is by embedding a script globally, ensuring the floating widget appears beautifully on every single page.
For this, we highly recommend using Toran. Toran is not just a dumb link; it is an intelligent routing layer.
- Team Routing: If you are a design agency with 3 partners, Toran can round-robin incoming WhatsApp leads automatically.
- Contextual Routing: "If the user is on
/pricing, route to the Sales Lead. If on/support, route to Customer Success." - Zero Layout Shift: Toran's script is ultra-lightweight and meticulously engineered not to affect your Framer Lighthouse scores or cause Cumulative Layout Shift (CLS).
Installation Instructions (Under 2 Minutes)
*Note: You will need a Framer Mini plan or higher to add Custom Code.*
- Get your Toran Code: Create a free account at toranhq.com and copy your unique widget JS code.
- Go to Framer Settings: Open your Framer project and click Site Settings (the gear icon on the top right).
- Navigate to Code: Go to the General tab and scroll down to the Custom Code section.
- Paste the Code: Paste your Toran script into the End of <head> or End of <body> section.
- Publish: Hit Publish.
> 📸 Screenshot Needed: The Framer Site Settings panel showing the "Custom Code" section populated with an external script.
Your widget is now live, floating cleanly above your Framer canvas on both desktop and mobile.
Method 2: The Custom Framer Button Element
Best for: Highly custom designs where a floating global widget doesn't fit the aesthetic.
One of Framer's superpowers is component design. If you want to build your own gorgeous, animated "Chat with Sales" button inside a specific hero section, you can trigger Toran directly from it.
How to do it:
- Create your custom button component in Framer. Add all your hover states and 3D effects.
- Select the button, go to the Link property in the right-hand panel.
- Instead of a standard URL, enter the Toran trigger function:
javascript:window.TORAN?.open() - *Crucial Step:* You still need to install the Toran script in your Global Custom Code (Method 1) for this function to work. You can optionally hide the global floating widget in your Toran dashboard settings, using it strictly via your custom Framer buttons.
3 Growth Tactics for Framer Sites
- Leverage Framer's Scroll Effects: Don't want the widget showing immediately? Combine Method 2 with Framer's scroll variants. Have your custom WhatsApp button slide into view only when the user scrolls past the pricing table.
- Use Pre-filled Context: When a user clicks, pre-fill their WhatsApp text box based on the page. E.g., *"Hi! I'm interested in the Enterprise plan..."* This reduces friction dramatically.
- Set Realistic Expectations: If your startup only answers messages during EU business hours, set up Automated After-Hours Greetings within Toran. Let the customer know you received the message and will reply at 9 AM CET.
Stop paying thousands for bulky live chat software that slows down your site. Add intelligent WhatsApp routing to your Framer masterpiece today.