How to Do Custom Embeds on the Notion or Super page

While most embeds work by simply embedding the link on the Notion page, some embeds are made of HTML or scripts and need to be loaded differently.

For this purpose, we have this script which was contributed by Dean McPherson from our user community. Thanks Dean! Also this script has been enhanced thanks to the team at Outseta to better execute scripts in the super-embed code blocks.

This script is a very useful and reliable tool that allows you to load embeds on a Super site where you want them, using the code block in Notion.

Step 1—Load the custom embed script in Super

Load this script into the Body section of Code (global or page level)

<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');
          Array.from(script.attributes).forEach(attr => {
            scr.setAttribute(attr.name, attr.value);
          });
          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>

Step 2—Load your HTML or embed code in Notion

The idea is that you can then just use a code block, and pre-fix it with `super-embed:` to automatically insert the contents as HTML.

1. Create a code block in Notion by typing /code 2. Add to the first line: super-embed: 3. Then add your HTML after that.

When you refresh the page in Super, the super-embed script will find the code block and then load that HTML on the page.

If your custom embed also has a script with it and it is not executing reliably, please load the script in the Head section of Code (global or page level as appropriate).