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?
- Create unique Instagram widgets on Elfsight, obtain different widget codes for each CMS item.
- Add a custom field in Webflow CMS for storing Elfsight widget codes.
- Use Webflow's embed element on Collection Pages to insert the widget using the custom field reference.
- Add Elfsight JavaScript to the footer in Project Settings to enable functionality across the site.
- Publish and verify to ensure each CMS item displays its unique widget correctly.
Using an Elfsight Instagram widget with Webflow's CMS can be challenging. The issue with your code appearing as plain text indicates a need for dynamic embedding via the CMS. Here’s how to achieve unique widgets for each Collection item:
1. Obtain Elfsight Widget Code
- Create your Instagram widget on Elfsight and obtain the script code.
- Ensure you have a different widget code for each CMS item if they are meant to be unique.
2. Add a Custom Field in CMS for Widget Code
- Go to your Webflow CMS collection settings.
- Add a new field to store the Elfsight widget code, naming it something like "Instagram Widget Code."
- Paste the widget code for each respective entry you wish to display a unique widget.
3. Embed Code on Collection Page
- Open the Collection Page settings where you want to display the widget.
- Use the Embed element from the Webflow Designer to add custom HTML to the page.
- Directly insert following code:
```
<div class="w-embed">
<div data-animation-type="fade" data-animation-delay="100">{% Item 'Instagram Widget Code' %}</div>
</div>
```
Replace {% Item 'Instagram Widget Code' %} with Webflow’s field reference, ensuring you properly reference the custom field you created in step 2.
4. Add Script Code to the Page or Entire Site
- Go to Project Settings > Custom Code.
- In the Footer Code section, paste the static script tag from Elfsight.
- This ensures the widget JavaScript is available throughout your site.
5. Test and Publish
- Publish your Webflow site to see changes take effect.
- Navigate to the specific Blog Collection item pages to see each unique Instagram widget displayed as intended.
Summary
To embed an Elfsight Instagram widget in Webflow's CMS, store the widget code in a custom field and use an embed element within the Collection Page settings, referencing this field. Add the Elfsight JavaScript in the footer to ensure functionality across the pages. This solves the issue of the code rendering as plain text by dynamically injecting the script for each CMS item.