How can I properly embed an Elfsight Instagram widget using Webflow's CMS so that each item in the collection can have its own unique widget displayed on the Collection page? I have tried adding the provided code as Plain Text in the CMS collection, as well as including the script in the site footer and Collection Page's custom code, but the div keeps appearing as text. Can you provide a clear solution for this issue?
TL;DR
- Add a Plain Text field in Webflow CMS to store the Elfsight widget embed code for each Collection item.
- Insert an Embed Element on the Collection Page and reference the CMS widget code using a
<div>and script. - If the widget does not load, move the script to the Page Footer and modify the Embed Element to include
data-widget-code="{{CMS Field}}". - Publish & test the setup, ensuring the script correctly injects the widget code without errors.
You need to properly embed the Elfsight Instagram widget within Webflow's CMS so that each Collection item displays a unique widget. The issue occurs because Webflow does not automatically execute scripts added via CMS fields. Here’s how to resolve it:
1. Add Elfsight Widget Code to CMS Collection
- In your Webflow CMS, create a Plain Text field (e.g.,
Instagram Widget Code). - Copy the Elfsight widget embed code for each unique item and paste it into this field.
2. Insert an Embed Element on the Collection Page
- Open the Collection Page in the Webflow Designer.
- Add an Embed Element inside the dynamic content area where you want the widget to appear.
- Inside the Embed code box, add the following code referencing the CMS field:
```\`\`\` - Instead of
<!-- Replace this with your CMS field -->, click + Add Field and select yourInstagram Widget CodeCMS field.
3. Move Script to the Page Footer
If the widget does not load correctly, try moving the script portion to the Page Settings → Custom Code → Footer:
```
```
- Modify the Embed Element to include
data-widget-code="{{CMS Field}}". - Replace
{{CMS Field}}with the actual CMS field reference.
4. Publish & Test
- Publish the site and visit a Collection Page
- Open DevTools (F12 in Chrome) to check if the script executes properly.
- Ensure no errors prevent the script from dynamically injecting the widget code.
Summary
Webflow prevents scripts from executing directly from CMS fields. To work around this, store the Elfsight widget embed code in a CMS field, dynamically insert it into an Embed Element, and use a JavaScript script in the Footer to execute the code properly.