My HTML Embed code being processed as plain-text instead of rendered?

[podcastpartnership (Paul Colligan)]

Hello,

I have a basic integration I’m looking to create, which is that we store Instagram Embed codes in a CMS collection, and render them to the page.

I observe that when I manually add the embed code in the Webflow designer, it works great and renders the Instagram Embed.

However, when I try to render it dynamically as a collection list, it only renders the HTML plaintext code itself instead of the Instagram Embed link.

What’s the easiest way to dynamically render these Instagram embeds as they are stored in the CMS collection?

---

Here is my site Read-Only: LINK

[podcastpartnership (Paul Colligan)]

I am trying to implement this solution, but I’m not sure it applies to my situation…

HTML in a Collection

Gosh. You are greatly overcomplicating things. First, this is totally wrong: [Screen Shot 2023-05-17 at 9.00.56 AM] This shows your CMS with a Rich Text field that has HTML copy / pasted into it. You can’t do that. That’s why it’s spitting out HTML tags on your published site. If you want to add raw HTML into a CMS Rich Text field you must do so through the API. That’s how you win. Second… Stop with all of this Embed elements within Collection Lists, within Rich Text fields stuff. T…

[memetican (Michael Wells)]

My best guess is that you’re trying to store a chunk of HTML in a CMS text field, and then binding that either to a text element or as a field within an embed element.

If my guess is correct, the resulting content will be HTML encoded, so it will not function as HTML in the published page.

Three main approaches to this-

• Store only e.g. the ID in the database, and put the HTML in an Embed field with the ID embedded from the CMS. This is the cleanest.
• If your HTML is to varied for that, you could add a rich text field to the CMS, and inside of it put an embed element. In that embed you paste your code. Bind that field to a rich text element on your page. Since the embed is recognized as an embed it will not be encoded.
• Store HTML in text field, bind it to a text field, but then have some special script to decode it later ( not a best practice, but works as a hack in most situations ).

[podcastpartnership (Paul Colligan)]

Thanks much for this summary. I’ve been trying to implement the second option, but having issues programatically binding the Embed code to the text field.

Would it be possible to go with option #2, but instead of manually pasting the embed element, populate it through the API? Or would I need to go with option #3 to do things programmatically like that?

Otherwise, I don’t understand how I can get the API to store the Embed code in the Rich Text Field as a code embed.

The other problem is that in my Collection page, when I go to create a Rich Text element and bind it to the Rich Text Field in my collection, it doesn’t appear as one of the fields available to bind.

[Webflow - Virtual Paul](https://read only)

[memetican (Michael Wells)]

@podcastpartnership

but having issues programatically binding the Embed code to the text field.

A rich text field must be bound to a rich text element, not a text element. Once you’ve done that the rich text field’s embed content will be published into the page along with anything else you put in there.

@podcastpartnership

populate it through the API?

Historically the Webflow API has had some issues with cms item updates and embeds in rich text content- however I recall there was a fix for that about 6 months ago. If you’re also wanting to use the API here you’ll want to test that API part early to ensure it supports what you need.

I knew I’d written this up somewhere-

How to Store Custom Code in a CMS Text Field | Webflow CMS & Collection...

[podcastpartnership (Paul Colligan)]

Amazing, thank you. Seems to be working great now in my Make integration!