Elfsight
Connect Elfsight’s 100+ customizable widgets with Webflow to embed social feeds, forms, reviews, chatbots, and more through simple, seamless embed codes.
How to integrate Elfsight with Webflow
Elfsight transforms your Webflow site with powerful widgets that require zero coding knowledge. Whether you need social proof through customer reviews, engagement tools like chatbots, or conversion features like popups, Elfsight offers multiple integration paths.
To integrate Elfsight with Webflow, use embed codes for specific customization needs or leverage Elfsight's SDK for advanced implementations that unlock dynamic widget management and real-time updates.
Use Code Embeds
Webflow's native embed functionality works perfectly with Elfsight's installation codes. This method gives you precise control over widget placement and works on any Webflow plan that supports custom code.
For page-specific widgets, add an Embed element to your desired location. Paste the Elfsight installation code into the HTML editor, which looks like this:
The widget appears instantly in your published site.
For site-wide widgets like chat buttons or notification bars, add the code to Site Settings > Custom Code > Head Code. This deploys the widget across all pages without manual placement on each one.
Common embed implementations include:
- WhatsApp chat buttons that float on every page
- Age verification popups that appear before content loads
- Social media feeds embedded in specific sections
- Review widgets placed near pricing or product information
Create dynamic widget experiences with Webflow and Elfsight
Elfsight widgets work out-of-the-box, but pairing the Elfsight Embed SDK with Webflow’s Data API lets you automate widget deployment, synchronize with CMS Collections, and render dynamic feeds without manual updates.
- Install Elfsight Embed SDK: Paste into your Site Settings > Custom Code > Head Code
- Fetch CMS content: Use Webflow’s Data API to retrieve Collections items, such as product details or user preferences, via GET requests
- Programmatically create and update widgets: With fetched data, call SDK methods like
createAppCard()to instantiate Webflow widgets based on CMS content or user segments:
What you can build
Integrating Elfsight with Webflow opens possibilities for enhanced user experiences and business functionality without complex development.
- E-commerce stores with social proof: Display real-time Google and Facebook reviews alongside products, sync Instagram shoppable posts with your catalog, and show countdown timers for sales—all updating automatically as new content arrives
- Service businesses with booking systems: Embed appointment calendars that sync with Google Calendar and add contact forms with conditional logic for different service types
- Personalized Content Hubs: Leverage Webflow CMS and Elfsight’s Embed SDK to detect visitor segments via cookies or query parameters, then programmatically inject tailored widgets, such as article recommendations or video playlists, driven by your Collections.
Interactive Product Configurator with Live Support: Define product options and pricing in Webflow CMS, embed a live price calculator or 3D preview widget via HTML embed, and add a floating Elfsight chat button that opens contextual help based on user selections.
Frequently asked questions
Navigate to your target page in Webflow. Drag an Embed element to your desired location. In your Elfsight dashboard, copy the installation code for your widget. Paste this code into Webflow's HTML embed editor and save. The widget appears after publishing your site. For CMS template pages, place the embed element where you want the widget to appear across all collection items.
You can test widgets in Webflow's preview mode with any plan. However, to publish custom code (including Elfsight embeds) to a live domain, you need a paid Webflow site plan. The Basic plan or higher includes custom code support. Elfsight offers both free and paid widget plans depending on your monthly view requirements.
Add the
data-elfsight-app-lazyattribute to your widget div for lazy loading, which delays rendering until users scroll near the widget. Position performance-heavy widgets (like social feeds) lower on pages. Use Webflow's built-in optimization features alongside Elfsight's performance settings to monitor and reduce load impact.Yes, you can add unlimited widgets across your site. Each widget operates independently without conflicts. However, monitor your monthly view limits as all widget views count toward your Elfsight plan quota. Organize widgets efficiently by using site-wide implementations for global features (like chat) and page-specific embeds for contextual content.
For widgets using Google Maps, Facebook, or other APIs, restrict keys to prevent unauthorized use. In your API provider's console, limit keys to
*.elfsight.com/*and your domain. For Google Maps specifically, follow the restriction guide to set HTTP referrer limits. Store sensitive keys in environment variables when using the SDK rather than exposing them in client-side code.
Description
Elfsight is a SaaS platform offering 80+ customizable website widgets that boost engagement, lead generation, and conversions. Trusted by over 2 million users worldwide, it provides no-code solutions for social media feeds, review displays, forms, calendars, AI-powered chatbots, and more — compatible with any website platform.
This integration page is provided for informational and convenience purposes only.
AirOps
Connect AirOps' AI-powered workflow automation with Webflow to scale content creation, automate SEO optimization, and streamline CMS publishing. Transform manual content processes into intelligent workflows that maintain brand consistency while achieving 5x faster content velocity.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
