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 desiredHandle 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 updated
Was this helpful?