data-elfsight-app-id
dynamically pulling from the CMS.You're trying to embed a unique Elfsight Instagram widget for each CMS item in a Webflow Collection Page, but the widget div is being displayed as plain text instead of rendering the widget.
<script>
tags) directly into CMS fields will cause it to appear as text on the page.To solve the problem, move the static script load to a global location and use dynamic data to change the widget container ID.
Step 1: Create a field in your CMS (Collection) for the Elfsight widget ID (e.g., your-elfsight-widget-id
). Use a Plain Text field or similar.
Step 2: Add this Embed Element on the Collection Page template where you want the widget to appear:
Use Webflow’s Embed component (from the Add panel), and paste the following:
```
\`\`\`Replace "elfsight-id"
with the actual Field name of your CMS item (slug of the field that holds the widget ID).
Step 3: Load the Elfsight SDK globally
Paste this once in your site's Custom Code > Footer section (under Project Settings > Custom Code):
```
```
This script loads the Elfsight platform and initializes any div
that contains a valid data-elfsight-app-id
.
elfsight-app-embed
) and the data-elfsight-app-id
attribute must be used exactly as required by Elfsight.To display a unique Elfsight widget for each CMS item, store only the widget ID in the CMS, then use a Webflow Embed Element to inject the required div
with data-elfsight-app-id
. Load the Elfsight script globally via the site’s Footer custom code settings. This ensures the widgets display properly on each Collection Page.