Maximize Productivity with Obsidian Open Gate Plugin: Embed Websites Directly in Your Notes

Ric Raftis

Introduction

As an avid Obsidian user, I have the application open on my desktop throughout the day for constant note-taking and editing. Imagine my delight upon discovering a new plugin called OpenGate, which enables opening websites directly within Obsidian. This can be by way of embedding a website in a note or opening a site in the left, right or centre columns of Obsidian.

The Problem

Often we are using multiple programs to take notes with Obsidian. You will have a browser open on a page and possibly be copying and pasting information to Obsidian where you will then comment on it and refine your thoughts. This is a frustrating workflow and a very slow one at that. Of course, there are workarounds such as Readwise, but not everyone subscribes to such read later applications. If you are working on a desktop, even with two screens, there is a lot of copying and pasting. If you are working on a laptop, then you are constantly swapping the focused window to do your work. This has the effect of slowing down your workflow considerably when creating and organising notes from multiple sources.

Obsidian Open Gate as a Solution

OpenGate works by adding what are known as “gates” that allow webpages to load inside Obsidian. This eliminates the need to navigate away from the app. Open Gate is a Community Plugin for Obsidian and available through the Community Plugins area of Obsidian. Simply search for Open Gate, install and enable the plugin.

Figure 1: Installing the Open Gate Plugin

Figure 1: Installing the Open Gate Plugin
Source: Screenshot by author

The next step is to enable the plugin and read the notes that are provided. They can provide a valuable reference if you are installing “gates” using code so you get the syntax correct.

Figure 2: Open Gate plugin installed and enabled

Figure 2: Open Gate plugin installed and enabled
Source: Screenshot by author

Now it is time to set up some “gates” to some web pages. Using my Obsidian vault as an example, you can see in the image below that I have set up four “gates”. These are for:

  • Audio Pen – a speech to text AI tool I use for recording notes
  • Google Mail – My email app of choice which also gives me access to my calendar, tasks and contacts;
  • Zotero – my reference manager where I store all academic papers and other research I might do
  • Clickup – project management software I use for detailed projects.

Figure 3: Open Gate options showing four installed gates

Figure 3: Open Gate options showing four installed gates
Source: Screenshot by author

To install a new “gate”, simply click on New Gate and the following screen will appear:

Figure 4: Installing a new gate

Figure 4: Installing a new gate
Source: Screenshot by author

In the example, I have placed the URL for Google Australia in the panel and provided a name. With the gates I have set up, I have left the icon blank and let the plugin auto-detect. So far, it has always found the icon attached to the web page. The Advanced options will provide an opportunity to apply a zoom factor to the site that opens, but I have not found this necessary. The biggest decision is determining the position where you want the page to appear. The options are in the left column of Obsidian where your folders are all listed, the right column where you may have your calendar, for example, or in the note window in the centre of Obsidian. You will need to note here that you need to open a new tab before invoking the gate or it will open over the top of your existing note unless, of course, you have it pinned.

Once you save the gate, you will notice that it places an icon in the left-hand ribbon menu using the icon or favicon from the web page it will access. This provides very speedy access to sites.

Other Options

In the notes for the plugin, you will see that you can actually embed a “gate” inside a note. As an example, I have done this inside my Home note in Obsidian. My Home note opens by default as soon as I start Obsidian and I pin it so it is always available. The example I am about to provide on embedding your email page is probably not a good one as it can be a constant distraction to your work and impact productivity. Just take it as an example of what you can do. You do not have to be limited by one embed, nor only installing to the Home note. While you can invoke the gate from the ribbon menu directly into the centre pane, another option is to create a note and embed the gate inside it. By doing this, you can locate the note in your folder structure or bookmarks which provides an alternate means of access.

As a thought, you could have a gate to ChatGPT direct which would save adding plugins to Obsidian.

My Home Page

Figure 5: Author’s Home note showing Gmail embedded with Open Gate

Figure 5: Author's Home note showing Gmail embedded with Open Gate
Source: Screenshot by author

As you can see I have embedded my mail at the top of the Home note. The site is fully active within the frame and you can scroll around, click on emails to read them or anything else you can do on the page when it is in your browser. In my page, I can even click on Contacts and Calendar and the windows will open in the sidebar of Google. Note however, that if you were to click on them to open full page, they will open the Contacts or Calendar in your browser, not in Obsidian.

The Code

The code for achieving all this in Obsidian is contained in the plugin notes, but it is worth mentioning that you can set the height that you want the page to appear. For the embed in my Home note, the code was simply:

```gatehttps://mail.google.com/(other irrelevant details)
height: 600
```

Conclusion

Open Gate is a fantastic plugin in my opinion simply because of the speed improvements to my workflow and the fact that I do not have to leave Obsidian. I intend to add more gates over time, probably as notes and add them to my bookmarks in Obsidian for speed of access. I think you will find Open Gate will enhance both your workflow and note-making experience. I would love to hear of your experience with the plugin in the comments.

Bonus Video

Facebook
Twitter
LinkedIn

Leave a Comment

Your email address will not be published. Required fields are marked *