Elfsight

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:

 &lt;script src="https://apps.elfsight.com/p/platform.js" defer&gt;&lt;/script&gt;<div class="elfsight-app-[YOUR-ID]"></div>

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.

1. Install Elfsight Embed SDK: Paste into your Site Settings > Custom Code > Head Code

<script src="https://apps.elfsight.com/p/platform.js" defer></script><script type="module">import { init } from "https://unpkg.com/@elfsight/embed-sdk?module"; init({ apiKey: "YOUR_ELFSIGHT_API_KEY" });</script>

2. ‍Fetch CMS content: Use Webflow’s Data API to retrieve Collections items, such as product details or user preferences, via GET requests

curl -H "Authorization: Bearer YOUR_WEBFLOW_API_TOKEN" \"https://api.webflow.com/collections/{collection_id}/items"

3. Programmatically create and update widgets: With fetched data, call SDK methods like createAppCard() to instantiate Webflow widgets based on CMS content or user segments:

import { createAppCard } from "@elfsight/embed-sdk";createAppCard({  container: document.getElementById("widget-container"),  appId: "YOUR_WIDGET_ID",  options: { filter: { category: "Featured" } }});

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.