Obsidian Open Gate

Obsidian Open Gate is a plugin that allows you to embed websites into your Obsidian environment. Key capabilities include:

• Gate Embedding: Embed any website as a "Gate" in the Obsidian UI (left, center, or right panels) or directly within a note.
• Bypassing iframe restrictions: Ability to embed sites that typically cannot be embedded via standard iframes.
• Customization: Inject custom CSS to align the website's appearance with Obsidian's theme.
• Automation: Automatically generates icons based on the site's favicon.
• Mobile Support: Fully compatible with Obsidian on mobile devices.
• Linking: Create links to specific Gates from within your notes.

Open Gate provides several key capabilities for integrating web content into your Obsidian workflow:

• Embed Any Website: Create "Gates" that display websites directly within Obsidian's interface.
• Flexible Options: Choose between opening websites in dedicated views or embedding them inline within your notes.
• Profile Management: Use profile keys to share storage between different gates, functioning similarly to Chrome profiles.
• Customizable Experience: Inject custom CSS and JavaScript to modify the appearance and behavior of the embedded websites.

Obsidian Open Gate is a plugin that integrates web browsing directly into the Obsidian interface. It allows you to embed websites as "Gates" either as standalone views within the Obsidian interface or directly inside your notes.

Key capabilities include:

• Embedding any website as a "Gate".
• Customizing layouts and injecting custom CSS.
• Accessing Gates via hotkeys or the command palette.
• Using webview technology (on mobile) and iframe technology (on desktop) to render web content.

The plugin supports automatic configuration reuse. When you create a Gate Link, the plugin attempts to match the provided title or url with existing gates configured in your plugin settings.

If a match is found, the options defined in your global settings are merged with the specific options provided in the link, allowing you to apply consistent behaviors to specific URLs or titles without re-specifying all parameters in the markdown link.

You can quickly create a new gate (an embedded website) using Obsidian's command palette:

1. Open the command palette (Ctrl+P on Windows/Linux, Cmd+P on macOS).
2. Execute the command Create new gate.
3. Provide a URL and a title for the website you want to embed.

Once created, the gate icon will appear in the Obsidian left sidebar. Clicking the icon opens the embedded site.

When customizing embedded websites in Open Gate, follow these best practices:

• Specificity: Use !important if your styles are being overridden by the website's original CSS.
• Incremental Testing: Apply changes in small steps to avoid breaking the layout of the embedded site.
• Inspection: Use browser developer tools to identify the correct CSS selectors for the elements you want to target.
• Theme Integration: Use Obsidian CSS variables (e.g., var(--background-primary)) to ensure your custom styles remain compatible with your current Obsidian theme.

You can create a link that opens a URL within the Obsidian gate view using the obsidian://opengate URI scheme. The link requires a title and an encoded url parameter.

Important: The url parameter must be URL-encoded. For example, https://google.com should be passed as https%3A%2F%2Fgoogle.com.

[Open Google Gate](obsidian://opengate?title=google&url=https%3A%2F%2Fdocs.google.com%2Fdocument%2Fd%2Fabc123%2Fedit)

By default, Open Gate generates an icon using the website's favicon. To use a custom icon, you can provide raw SVG code in the icon field.

Important: You must remove the width and height attributes from the SVG code before saving it to ensure it renders correctly within the plugin.

<!-- Example of what to provide (after removing width/height) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
</svg>

To embed a website within Obsidian using a 'gate', follow these steps:

1. Open the Obsidian command palette using Ctrl+P (Windows/Linux) or Cmd+P (macOS).
2. Type and select the command Create new gate.
3. Enter the URL of the website you wish to embed.
4. Enter a title for the gate.

After creation, the new gate will appear in the Obsidian left sidebar. Click the gate's icon to view the embedded website.

If you need assistance or want to learn how to use the plugin effectively, use the following resources:

• Detailed Tutorial: https://open-gate.aiocean.io/
• Customer Support Portal: For tracking issues and reliable support, use the Atlassian Service Desk.
• Discord: For direct community interaction, join the Discord server.

To avoid re-specifying full configurations, you can reuse gates that are already defined in the plugin settings. The plugin automatically matches the title or url provided in a code block with existing gates. When a match is found, the options from the settings are merged with the options specified in the note.

To reuse a gate, simply provide its title and any overrides (like height) in the code block.

```gate
title: 12bit
height: 300