Embed Snippets of Web Pages or Web apps?

Help
1

What I’m trying to do

I’m trying to create a dashboard in Obsidian that would display directly in a note, clips of web pages and web apps. By “clips”, I mean portions of a webpage. For example, I might want a snippet of my gmail:

image
image996×287 12.3 KB

and not the whole page:

image
image1810×445 63.9 KB

Would like functionality like this feature in plusdocs.com (Live Snapshots | Plus and https://www.youtube.com/watch?v=qrbEMAL8JJw)

Things I have tried

I’ve tried the below things, but while Open Gate combined with Obsidian Canvas gets pretty close, it’s pretty cumbersome to get things to look right. Is there any built-in functionality that I’m missing or other plugins that are more purpose-built for this?

iframes

I tried basic iframe, but I couldn’t find info anywhere on how to focus the iframe into a section of a page. Also iframe doesn’t work on some sites like gmail.

Obsidian Canvas Cards

Cards from webpages looked most promising, but as with iframes, doesn’t seem to be a way to focus the card into a section of the webpage.

Open Gate Plugin

This is getting close to what I am hoping for, allows for creation of gates from webpages, which can then be embedded into notes. It also allows for adding CSS or JavaScript to the embed code (Inline Embedded | OpenGate).

I tried using:

  • css transform/translate: body {transform: translate(-250px,-100px); overflow: hidden;}
  • js transform/translate: document.body.style.transform = "translate(-250px, -100px)"; document.body.style.overflow = "hidden";
  • css scrollTo: window.scrollTo({top: 500, left: 400, behavior: 'smooth' });
  • css clip-path: body {clip-path: inset(100px 0 0 250px); overflow: hidden; transform: translate(-250px, -100px);}

Issues were:

  1. On a note, you can’t organize gates as blocks horizontally on a note.
  2. Canvas seems best place to create a dashboard, but the transform/translate of either css or js don’t render in the card as desired.
1 Like