Streaming live at 10am (PST)

CMS API Stripping HTML Embeds

It seems odd that html embed code content is being stripped out of CMS items when the CMS is queried by the API.

Current Behavior:

  1. Create a blog post.
  2. Add an HTML Embed to a Rich Text field.
  3. Save Blog Post.
  4. Query Blog Post via API

The rich text field has the HTML Embed code stripped out

Expected Behavior:

The code string will be returned by the API within the Rich Text Field

Maybe log this one with Webflow support, sounds like a bug.

Hi @Ecalvo,

I have responded to your support ticket, but wanted to place some of that response here for others to be made aware.

Actually this isn’t a bug just a feature limitation. Keep in mind that the custom code embed within the rich text element is a new feature for this year. What you see is version 1. What will be seen in version 2 is still being discussed with no timeline for a release at this time.

Have a Great Day and Happy Designing,
~ Brandon

Hello,

We are running into this too.

We are migrating our wordpress blogs to webflow CMS. We wrote a migration script to wrap our custom code inside of a <div class='webflow-emebed> before using the API to create the content such that the embeds show up correctly.

While the emebeds do show up appropriately, any future changes made to the content using the CMS editor deletes the emebeds.

Steps to recreate:

  1. Create a live item using CMS API with a rich field text and some embedded code in this field.
  2. Observe the item on the live site and see the embedded content render.
  3. Go to CMS editor and select the item to edit on Webflow
  4. Change content and hit save

Expected outcome:

  1. Editor should show embeded code in the rich text editor of the content field
  2. Changing the content field should not delete embeded code.

Actual outcome:

  1. Rich field text editor does not show a placeholder for the embedded content
  2. Embedded content gets overwritten and we lose data

Maybe someone from the tech team can point us in the right direction here, how do we get the CMS API to recognize legitimate embeded code in CMS items?

I am confident that you can’t read or create code embeds via the API and when I tested I found zero workarounds. Really throws a thorn in the whole Webflow migrate Wordpress situation. My WP clients love using Gutenburg with custom blocks. No way to even show them a lesser solution.

Hi Jeff,

I actually did create code embeds successfully via the API.

However, with two caveats:

  1. Once added, we can never modify the field using the editor for that particular content
  2. Fetch API just returns an empty <div>

Happy to share my workaround if you are keen

@Swayam_Narain
I would like to see the code embed HTML you inserted into a RTF via the API. Was this on a create new item or update?

My test was an API read of an item that had an embed inserted through the designer, which would not display as well as CSV exports which did not include the embed. This by itself rules it our for me.

@Swayam_Narain hey :wave:

I’m currently facing the same issue. I would like to push custom code into a rich field with the API.

Could you please share your workarounds ? :pray:

Thanks !

All I did was wrap my html data in this div:

<div class='webflow-emebed'>
  <!--Your HTML here -->
</div>

and POST to the API per usual

@Swayam_Narain Thanks for your answer !

I tried this and unfortunately it didn’t work. Did I missed something ?

I tried with <div class='w-embed'><p>test2</p></div> and <div class='webflow-embed'><p>test2</p></div>

I used double quotes around the w-embed, and it worked for my example (a table).

Thanks for that. I did some research and came back with an update.

Properly escaped code (CSS or JS) wrapped in a div with a class of .w-embed.w-script makes the roundtrip when posted via the API and then when exported as a CSV. It displays on the front-end. The embed element is not accessible in the designer for edits.

Interestingly, you can put images and other html with classes into the body of a rich-text field. Will render just fine on front end. The URL’s on images are not touched and are visible and editable as images in the designer (standard image dialog).

I even added webP image sources into a RTF and a layout with CSS grid and that worked. This opens some real possibilities! I am no longer constrained! Now forget about editing this content in the designer or editor but if you have a remote DB and use the API you could theoretically do what you want. BOOM.

Here is a front-end demo of a collection item RTF populated with code (dynamic images in a CSS grid, most are WebP) on the front end.

Here is a backend CMS Item shot. Note that the grid is not being implemented since that is invoked with custom code which does not show in the designer in this case.

Here is a patch done from postman for the curious.

1 Like

It’s as if the Editor saves our HTML embeds somewhere else. And that’s how the API remembers them, thereafter.

The CherryTree outliner does that sort of thing. It supports embedding a picture, table, or code block in its HTML-like rich text nodes. But they’re stored outside the rich text, in their own “collections” (database tables). There isn’t even a <div> to mark their location.

So the solution seems to be, once you’ve put in, via the API, an Embed, or any other Editor-unsupported HTML code (e.g., nested lists), then use only the API to update it. An external, WYSIWYG editor might be handy, in that case.