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?

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.

1. Understand the Problem

• Webflow CMS text fields like Plain Text and Rich Text automatically sanitize HTML and script content.
• Embedding full widget code (especially <script> tags) directly into CMS fields will cause it to appear as text on the page.
• Scripts must be placed in areas of the site that allow raw HTML/script execution (like the Page Settings > Custom Code section or Embed elements).

2. Use a Static Embed with Dynamic Widget ID

To solve the problem, move the static script load to a global location and use dynamic data to change the widget container ID.

3. Steps to Embed Elfsight Widget Per CMS Item

• 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.

4. Important Notes

• Do not insert