notion website embedded code

barcode labs

notion website embedded code

One feature that seems to be missing from Super.so based Notion websites is embedded code snippets. There is not a built-in function for adding html or javascript in the middle of a page. There is a code feature, but it only allows you to add it to the header, beginning of the body, or add css. I want to add custom calculators, so this became a problem I needed to solve.

After a short Google session I stumbled upon an article on how to add custom embeds in Notion and have them appear in Super.so. Not quite what I wanted, but I can work with this. First step was to add a custom script into the header of the whole website. The following script is exactly copied from the above article without modification. 

<script>

function clearBlock(el) {
        const node = el.parentElement.parentElement;
        node.innerHTML = '';
        return node;
    }

const SELECTOR = 'code:not([super-embed-seen])';
function setupEmbeds() {

    document.querySelectorAll(SELECTOR).forEach((node) => {
    node.setAttribute('super-embed-seen', 1);
    if (node.innerText.startsWith('super-embed:')) {
        const code = node.innerText.replace('super-embed:', '');
            const parentNode = clearBlock(node);
            parentNode.innerHTML = code;
            parentNode.querySelectorAll('script').forEach((script) => {
                if (!script.src && script.innerText) {
                    eval(script.innerText);
                } else {
                    const scr = document.createElement('script');
                    scr.src = script.src;
                    document.body.appendChild(scr);
                }
            })
        }
    })
}

setupEmbeds();

var observer = new MutationObserver(function(mutations) {
   if (document.querySelector(SELECTOR)) {
      setupEmbeds();
    }
});
observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

</script>

Next step was to create a code block on a Notion page utilizing the normal slash code command. 

/code

Final step is to ensure the first line contains the following. 

super-embed:

Everything following that first line in this specific code block will now be embedded as code into the webpage. Great!

Only one problem…… you really should load scripts in that manner ever. This is an easy fix though, just add the script into the header of the specific page that is running the code. By utilizing the page menu in Super.so, the I can now insert my script directly into the header.

image

After a quick test, everything seems to work! Here is an example of this method

InstagramYouTube