Links

CMS Code Injection ❺🧪

Inject custom code from the CMS anywhere in your Webflow page.

Goals

  • Store custom code in the CMS so that it can be individually part of a demo, blog post, etc.
  • Make the code accessible and manageable using a plain text multiline field ( rather than the HTML embed hack )
  • Allow positioning of the code in the <head>, or in the <body> as desired
  • Handle decoding automatically
  • Support multiple, compound, complex arrangements, e.g. multiple <script>'s, JSON-LD, <style> chunks and so on.
    • Basically an insertable chunk of HTML.

Prototype

This is highly dangerous in that it injects raw script into the page. Make certain you are 100% in control of the fields you are injecting and that they contain no user-generated content ( UGC ).
  • Add your plaintext multiline field to your CMS collection.
  • Add your code there including <script> or <style> element wrappers.
  • Position the script below where you want it, in the <head> or <body> custom code area of your page, or in an HTML embed.
  • Replace the encoded content value between the backticks with your + Add field to insert your custom script.
<script>
// Step 1: Define your HTML-encoded content
const encodedContent = ` ADD YOUR CODE EMBED FIELD HERE `;
// Step 2: Decode the HTML-encoded content
function htmlDecode(input) {
const doc = new DOMParser().parseFromString(input, "text/html");
return doc.documentElement.textContent;
}
const decodedContent = htmlDecode(encodedContent);
// Step 3: Create a temporary container
const tempContainer = document.createElement('div');
tempContainer.innerHTML = decodedContent;
const currentScript = document.currentScript;
// Step 4: Append the contents to the desired location
// For example, appending to the document body
while (tempContainer.firstChild) {
// document.body.appendChild(tempContainer.firstChild);
currentScript.parentNode.insertBefore(tempContainer.firstChild, currentScript);
}
// Step 5: Remove this injector script element
currentScript.parentNode.removeChild(currentScript);
</script>
Last modified 2mo ago