How to Embed Glasp Highlights on Note-Taking Apps & Websites
I’m introducing you to the newest feature of Glasp, embedding Glasp highlights as a card on note-taking apps such as Notion, Obsidian, etc. Glasp creates a beautiful image for each highlight, so your note-taking apps and website appear more attractive.
Step 1: Sign up for Glasp
Choose a browser you’re going to use: either Google Chrome, Brave, Safari, Microsoft Edge, etc.
On your search tab, type in “glasp.co” and you will be automatically directed to the page of Glasp. Or access it from the link below.
Upon reaching it click Sign up (beta) and continue using your Google Account.
After finalizing your account, you will be redirected to the Chrome Web Store.
Step 2: Install the Glasp extension to your browser
Click Add to Chrome(Brave, Safari, or Edge) and install Glasp on your chosen browser.
Step 3: Go to the Home page on Glasp
Once you’ve installed your Glasp extension, go to its home page. Here, you will see the sidebar opened where you can test highlighting words or sentences.
Also, you are free to choose your favorite topics. Choosing your topics could be a leap step as this will help you identify the articles in line with your interests.
Step 4: Open and highlight an article
Open any article you want and start highlighting sentences you resonate with. When you select a sentence, you can see a popup showing up, so please click any color you want.
Step 5: Go to My Highlights page
Please open the Glasp page. You’re on the Home feed now, so go to the My Highlights page by clicking at the top left.
Step 6: Get Highlight Embed Code
On each highlight on the My Highlights page, you can see a three-dot button. Please click it. It shows a menu to take each action.
To embed the highlight, select Copy Highlight Embed Code.
Embedding Options
To embed the highlight, you can paste the code you copied. But the flow slightly differs depending on note-taking apps, so I’ll show two main note-taking apps.
Obsidian
When you want to show the Glasp’s highlights as a card on Obsidian. You can just paste the link. The default link uses iframe by default, so it looks like below.
Then, when Obsidian recognizes the link, it shows like below. If you’d like to change the size of the card, please update the width and height.
Note: Obsidian doesn’t accept a-tag, so See More Highlights doesn’t work on Obsidian.
Notion
When you want to show highlights on Notion, you need to edit the iframe code. After pasting the embedding code, please extract the link part.
Delete the iframe part, paste the link again, and choose Create embed. It shows the card below.
Isn’t it easy, right? This way you can embed Glasp’s highlights as a card on Obsidian and Notion. We will improve the feature, so please wait for the next product update release.
