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.
Solution #1 - Use the "Rich Text Embed" Quick Hack
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;
- Add a rich text field to your CMS Collection
- In the CMS view ( designer or editor ) edit that field and drop in a custom code embed
- Paste your html / css / script / JSON in there
- Bind that Rich text field to a rich text element
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.
Solution #2 - NOCODE solution
Sygnal Attributes decode-html Attribute
Add one library reference, and one custom attribute, and your text contents will be automatically decoded for you.
Downside here is performance. The decode happens after the page has loaded, so there is a brief delay before the decoded content will appear.
Solution #3 - Decode your Encoded HTML Content w/ Script
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.
This is a funky approach I’ve used before, which is a self-replacing script. Place your HTML Embed where you want the decoded content to go. Drop this script in and put your embedded field that allows you to easily position the decoded content.
When the document renderer hits the script, it will process it, decode your HTML, and then replace the script element with the newly decoded element.
Restrictions- in this approach, your encoded content cannot contains any backticks (`), because it will likely break the script.
Manual Scripting Solution
Another solution ( similar, but manual setup ) is shared here;
Precise Conversion
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.
- HTML Entities library - Github
- CDN Links - cdnjs
Resources
- Wishlist item - Webflow
- Custom code in the CMS - Webflow
- > Within rich text content only
- Codepen of IIFE
- DOMParser API: parseFromString
