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 updated 8 months ago