Elfsight Webflow Plugins

Webflow handles layout and hosting, but some features like pulling live Google reviews, displaying an Instagram feed, or adding a floating chat button still require external tools. Elfsight covers this gap with 100+ embeddable widgets that you configure visually in a dashboard and drop into Webflow with a single code snippet.

This guide covers the two main ways to add Elfsight widgets to Webflow, plus how to use the Elfsight Embed SDK if you need programmatic control over widget rendering.

How to add Elfsight widgets to Webflow

What is Elfsight? Elfsight is a no-code widget platform offering 100+ embeddable tools for websites, including social media feeds, customer review displays, contact forms, live chat buttons, countdown timers, and ecommerce widgets.

Each widget is configured through a visual dashboard and embedded on any website platform using a generated HTML/JavaScript snippet. Elfsight widgets work through the same mechanism regardless of type: you configure the widget in the Elfsight dashboard, copy an embed code, and paste it into Webflow.

The three methods below cover where and how you place that code:

• Page-specific Code Embed elements for targeted placement
• Custom code in head and body tags for site-wide deployment
• Elfsight Embed SDK for dynamic, CMS-driven rendering

All three require a paid Webflow site plan, since the free Starter plan does not support custom code or Code Embed elements.

Embed a widget on a specific page

Use Webflow's Code Embed element to place a widget at a precise location on a single page. This is the right starting point for most Elfsight widgets, and it requires no technical knowledge.

To set up the integration on a specific page:

1. Build and configure your widget in the Elfsight dashboard, then click Get Code to copy the embed snippet.
2. In Webflow, open the page where you want the widget to appear.
3. Drag an Embed element from the Add panel to your desired position on the canvas.
4. Paste the Elfsight code into the HTML Embed Code Editor and click Save & Close.
5. Publish your site to see the widget render. Widgets do not display in Webflow's canvas preview; they appear only on the published site.

To add the same widget to Webflow CMS template pages, place the Code Embed element inside the collection template layout. The widget renders across all collection items automatically.

Any design changes you make in the Elfsight dashboard appear on your published site immediately. You do not need to update or re-paste the embed code.

Deploy a widget site-wide

For widgets that should appear on every page (a floating chat button, a cookie consent bar, or a notification banner), add the Elfsight code to your site's custom code in the head and body tags rather than placing a Code Embed element on individual pages.

To deploy a widget across your entire site:

1. Copy your widget's embed code from the Elfsight dashboard.
2. In Webflow, go to Site Settings > Custom Code.
3. Paste the code into the Footer Code field (recommended for most widgets, since scripts load after page content).
4. Save and republish your site.

Use this method for features like WhatsApp or Messenger chat buttons, announcement bars, or any widget where consistent placement across pages matters more than precise positioning within a layout.

Extend with the Elfsight Embed SDK

The Elfsight Embed SDK lets you instantiate and manage widgets programmatically using JavaScript. This is a developer path, and it is not needed for standard embed use cases, but it becomes useful when you want to render widgets conditionally based on Webflow CMS data, visitor segments, or other dynamic inputs.

A typical pattern pairs the SDK with the Webflow Data API to fetch collection data and instantiate the appropriate widget for each visitor or page context.

For example: retrieve a product type from a Webflow CMS field, then use createAppCard() to load a matching Elfsight review widget filtered to that product category.

To use the SDK, add the Elfsight Embed SDK script to your Site Settings > Custom Code > Head Code, then call SDK methods from custom code added to your page or template. The Elfsight developer documentation covers the full SDK reference, including displayCatalog(), displayWidget(), and the widget management panel component.

What can you build with the Elfsight Webflow integration?

The combination of Webflow's layout control and Elfsight's widget library covers a wide range of site types, from simple portfolio additions to full ecommerce marketing sites with live social content.

Here are a few things you can build with this integration:

• Ecommerce sites with social proof: Build product pages that display live Google and Facebook reviews, Instagram shopping feeds, and countdown timers for sales promotions — all updating automatically from their source platforms without touching Webflow's CMS.
• Service business websites: Create agency or consultant sites featuring a booking calendar synced to Google Calendar, a WhatsApp or Messenger chat button for direct client contact, a filterable FAQ accordion, and a Google Reviews widget to establish credibility.
• Portfolio and photography sites: Design responsive image galleries with an Instagram feed pulling recent work, a contact form with file upload support, and a client testimonials carousel — all styled to match a custom Webflow layout.
• Event and community sites: Build event pages with countdown timers, RSVP forms that notify you by email, social media walls aggregating hashtag content from multiple platforms, and event calendars with registration options.

To start adding Elfsight widgets to your site, browse the full widget catalog on the Elfsight Webflow integrations page. Each widget has its own configuration guide and a live preview so you can test appearance and behavior before generating the embed code.