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.
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.
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.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.
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.
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.
MathJax
Render beautiful mathematical equations on your Webflow site with MathJax, the web's leading mathematical display engine. Transform complex LaTeX, MathML, and AsciiMath notation into crisp, accessible formulas that scale perfectly across all devices—no plugins or special viewers required.
Kajabi
Connect Kajabi's powerful course creation and membership platform with Webflow's design flexibility to build stunning educational websites. Deliver online courses, manage memberships, and process payments while maintaining complete creative control over your site design.
Jasper
Connect Jasper's AI-powered content generation with Webflow to create, optimize, and localize website content at scale. Generate on-brand copy, rewrite existing content, and translate pages — all without leaving Webflow.
Google Ads by Clever
Advertise on Google and grow your business with Clever Ads. Have your Google Ads Search & Display campaigns created for free.
EmbedStories (by EmbedSocial)
Connect EmbedStories with Webflow to automatically display Instagram Stories and custom photo stories on your website, keeping your content fresh and interactive without any coding.
Elfsight YouTube Gallery
Connect Elfsight YouTube Gallery to Webflow and display dynamic video content from YouTube channels, playlists, or individual videos. This integration enables businesses to showcase product demos, tutorials, testimonials, and more without coding knowledge.
Airtable sync by PowerImporter
Connect PowerImporter Airtable Sync with Webflow to automate CMS updates and sync product catalogs in real time.
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.
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.
