Skip to content

embed.mdx

Latest commit

 

History

History
95 lines (68 loc) · 3.25 KB

embed.mdx

File metadata and controls

95 lines (68 loc) · 3.25 KB
title Embed
description Add a live Raindrop.io bookmarks widget to any website or blog
icon code

You have a collection of bookmarks and want to show it right on your website or blog — without sending visitors somewhere else. An embed places a live, interactive widget on any page. It updates automatically when you add, remove, or reorder bookmarks in Raindrop.io.

You can embed a single collection or your entire profile page that lists all public collections.

Embedding a collection

The collection must have Public Page enabled before it can be embedded.

Go to [app.raindrop.io](https://app.raindrop.io/) and open the collection you want to embed. 
<Step>
    Click **Share** in the top-right corner and turn on **Public Page** if it's not already enabled.
</Step>

<Step>
    Switch to the **Embed** tab, copy the code, and paste it into your website's HTML.
</Step>

Here's how an embedded collection looks:

<iframe style={{border: 0, width: '100%', height: 450}} allowfullscreen frameborder="0" src="https://press.raindrop.page/movies-53319321/embed" />

Embedding your profile

Your profile page at username.raindrop.page lists all public collections in one place. It can also be embedded as a widget.

The profile page only exists when you have at least one public collection.

Open your profile page at `https://your-username.raindrop.page` in a browser. You can find your username in [Account Settings](https://app.raindrop.io/settings/account). 
<Step>
    Click **Embed** in the top-right corner, copy the code, and paste it into your website's HTML.
</Step>

Here's how an embedded profile page looks:

<iframe style={{border: 0, width: '100%', height: 450}} allowfullscreen frameborder="0" src="https://press.raindrop.page/embed/me" />

Hiding elements

When generating the embed code, you can type keywords into the Hide field (comma-separated) to remove specific parts of the widget:

Keyword What it hides
header Top header bar
excerpt Description
note Note
tags Tags
info Domain & date
add "Add to Raindrop" button

Limitations

  • The widget appearance cannot be customized with CSS — only the Hide field is available for adjustments

FAQ

Yes. Any changes you make in Raindrop.io appear in the embed automatically. 
<Accordion title="Can I embed a private collection?">
    No. You need to enable [Public Page](/public-page) for the collection before embedding it.
</Accordion>

Related

Share collections via a public link without embedding Give others edit access to a collection