Whether you are needing to store a chunk of CSS, some custom script, or a Soundcloud podcast embed, sometimes you need to store custom code in a CMS field.
Currently [ Nov-2022 ], Webflow does not have an HTML Embed field time for the CMS, which means you probably want to use a multiline text field. But there's a problem...
Whatever content you put into that field gets HTML-encoded in the final result. This is a result of the way Webflow handles embedded fields in HTML Embeds- any fields you insert will be HTML encoded.
In most situations, this is the right behavior, but not when you want functioning code, or structured JSON data.
Fortunately, there are solutions.
The CMS does not yet have an HTML Embed field type, however it does have a Rich Text field type, and Rich Text content can contain HTML Embed content.
Therefore one way to do this is to create a Rich Text field in your CMS Collection, and then in that Rich Text field content, you add an embed and paste your content in there.
Jeff ( @webdev )in the Webflow forums detailed this approach;
It's hacky, and inconvenient to see or edit the code as it requires an extra couple of clicks, but in this setup Webflow will render that custom code without HTML encoding it, and it should work fine.
Another approach is to bind your plain text field to an element, and allow Webflow to HTML Encode it. Then in your resulting page, use script to decode it.
Add one library reference, and one custom attribute, and your text contents will be automatically decoded for you.
Another solution ( similar, but manual setup ) is shared here;
If you are working with precise data, such as a JSON payload, and you need it to be 100% cross-browser support, I recommend that you instead use the HTML Entity ( he ) library on Github.
Specialists in business software technology and Internet strategy since 2001.
