# CMS Code Injection ❺🧪

## Goals&#x20;

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

## Prototype

{% hint style="danger" %}
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 ). &#x20;
{% endhint %}

* Add your plaintext multiline field to your CMS collection.&#x20;
* Add your code there including `<script>` or `<style>` element wrappers.&#x20;
* Position the script below where you want it, in the `<head>` or `<body>` custom code area of your page, or in an HTML embed.  &#x20;
* Replace the encoded content value between the backticks with your + Add field to insert your custom script.&#x20;

```html
<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>
```

* * &#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-html/cms-code-injection.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
