Webflow sync, pageviews & more.
NEW
Answers

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?

To properly embed an Elfsight Instagram widget in Webflow's CMS collection and display a unique widget for each item in the collection on the Collection page, follow these steps:

1. Create a new Plain Text field in your CMS collection to store the Elfsight widget code. Let's call this field "Instagram Widget Code".

2. In your CMS collection, populate the "Instagram Widget Code" field with the specific widget code from Elfsight for each item.

3. In your Collection page template, add an Embed component where you want the Instagram widget to appear. This can be placed in a Dynamic List or in a static section, depending on your design needs.

4. Open the settings for the Embed component and click on the dynamic binding icon next to the Code field. In the dynamic list, select the "Instagram Widget Code" field from your CMS collection.

5. Save the settings for the Embed component, and you will see the dynamic binding tag (e.g., {{item.Instagram Widget Code}}) in the Code field.

6. Finally, publish your site and view the Collection page. The Elfsight Instagram widget associated with each CMS item will be rendered dynamically based on the widget code stored in the "Instagram Widget Code" field.

By using this method, you can ensure that each item in the CMS collection will display its unique Elfsight Instagram widget on the Collection page.

If the widget code is still appearing as plain text, make sure the Elfsight script is properly placed on your site. Add the Elfsight script to the site footer or in the Collection Page's custom code section. Also, double-check that you haven't accidentally added the widget code within any HTML tags that might affect its rendering.

Note: If you're using Webflow's Rich Text Editor and want to embed the widget within a CMS Rich Text field, you'll need to use custom code embeds rather than the built-in Embed component, as the built-in component doesn't support dynamic data inside Rich Text fields.

Rate this answer

Other Webflow Questions