All Categories Features Embed bookmarks in other websites

Embed bookmarks in other websites

If you want to show your Superdense bookmarks in other webpages, use the embed option. This works on a per category basis.

Embed code

To get the embed code, follow these steps:

  1. Open the category menu [1] by moving your mouse over the category. This will reveal the 3-dots menu that you can click to open.

  2. Select embed [2].

    image.png

    ⚠️ Make sure the category is set to Public [3] which is indicated by a green dot next to the category name.

  3. A modal window will appear, showing the embed code. Click the code field to copy.
    image.png

In the example above, this is what the embed code looks like:

<iframe
  src="https://superdense.com/embed?u=steve&categoryId=pBl0MenqXfw9yT8lM8sG"
  width="100%"
  height="100%"
  fetchpriority="high"
  frameBorder="0"
>
</iframe>

Feel free to use it for testing if you like it! 🤩

How to embed in your website(s)

You can now place the bookmark category in another website that supports embedding iframes or similar. Use the help docs of your content management system (CMS) to see if it works for you and how to use it.

Basic iframe version

For plain html and basic websites, copy and pasting the exact code should be enough.

Client-side embedding in frameworks (Nuxt, Next, SvelteKit, etc)

In frameworks that cannot SSR an iframe and where it needs to be wrapped in <client-only>, you need a different approach.

Place the following code in the <head> of your site:

<script src="https://app.superdense.com/embed.js" async defer></script>

In the <body> where you want to show the bookmarks, use the following code:

<div
  style="width: 800px;"
  class="superdense"
  data-bookmarks="USERNAME/CATEGORY-ID"
></div>

🤓 👉 Replace USERNAME/CATEGORY-ID with the data from the iframe code. In the above example, this will be steve/pBl0MenqXfw9yT8lM8sG.

Embed bookmarks in Wordpress

In your Wordpress page or post, add a new block of type 'Custom HTML'.

image.png

Paste the iframe embed code in the HTML field and save the page updates.

image.pngRefresh your Wordpress page to see your bookmarks embedded in the page. Note that you may want to apply extra styling like paddings and margins to have it blend in your page as desired. The end result is shown below and on this demo page:
https://wordpress-demo.superdense.co/

image.png

Embed bookmarks in Notion

Notion.so has its own system for embedding. In Notion, press / and type embed to insert the embed-widget.

image.png

Next, copy only the src URL from the iframe code and paste it in Notion:

image.png

Click Embed link to place the code. After a few seconds, the bookmarks will be shown.

⚠️ If you see a 401-error message, your category is not set to Public. The instructions for this are on the top of this page.

image.pngYou can change the size of the widget and the alignment in Notion when you move your mouse over the code. This is the final result after some edits:

https://superdense-demo.notion.site/How-to-embed-bookmarks-in-Notion-4b68be2a9e0943e38abcd28f45139a86

💡 If you don't want to show 'Bookmarks by Superdense', go to Settings > Branding in your Superdense account and check "Disable Superdense branding."

Limitations

  • Some links to some sites may fail to open, showing an error that it's blocked and/or refusing to connect. In the network tab of your browser it may show: "This document was blocked from loading in an iframe with a sandbox attribute because this document specified a cross-origin opener policy." This needs to be permitted on the site where you place the embed. More info.
    In the above example from Notion, this happens when you try to open Twitter for example. 😢 Only Notion can change this. You may not have this limitation with other sites.

  • On Wordpress.com, embedding iframes is not allowed. You don't have this limitation when you install and host Wordpress yourself.

Was this article helpful?

Thanks for your feedback!