New Tab Widgets Logo

How to embed any website on your New Tab Page

Learn how to use the iframe widget in New Tab Widgets to embed websites and apps like Grafana, Sentry, and more directly on your new tab page.

By
Published:

Embed Any Website or Web App on Your New Tab Page

Use the iframe widget to integrate your favorite tools like Grafana, Sentry, or any web-based application. Monitor server logs, track errors, and access critical dashboards without switching tabs.

Developer dashboard combining Sentry issue tracking on the left with unresolved high-priority errors, and Grafana logging panel on the right displaying JSON request data and traffic graphs. The setup provides real-time monitoring, error tracking, and log analysis for application performance and debugging.
Developer dashboard combining Sentry issue tracking on the left with unresolved high-priority errors, and Grafana logging panel on the right displaying JSON request data and traffic graphs. The setup provides real-time monitoring, error tracking, and log analysis for application performance and debugging.

Why Embed Web Apps on Your New Tab?

Your new tab page is often the first thing you see when you open your browser. By embedding essential web apps directly into this space, you can streamline your workflow and keep important information at your fingertips. Whether you're a developer monitoring server performance or a project manager tracking tasks, having these tools readily accessible can save time and reduce context switching.

How to Use the Iframe Widget

  1. Install New Tab Widgets: If you haven't already, add the New Tab Widgets extension to your Chrome browser.
  2. Open Your New Tab: Click on the New Tab Widgets icon or open a new tab to access your dashboard.
Browser new tab setup page with a floral hydrangea background. The left panel titled ‘Get started’ shows setup instructions for creating and customizing widgets, including a green ‘Create a New Widget’ button. On the right side, a digital clock widget displays the time 11:07 PM in Perth, and a yellow sticky note widget titled ‘Welcome to New Tab Widgets!’ lists example uses such as a quick note, to-do list, or reminder. At the top, there is a search bar and link widgets for Google and Reddit.
Browser new tab setup page with a floral hydrangea background. The left panel titled ‘Get started’ shows setup instructions for creating and customizing widgets, including a green ‘Create a New Widget’ button. On the right side, a digital clock widget displays the time 11:07 PM in Perth, and a yellow sticky note widget titled ‘Welcome to New Tab Widgets!’ lists example uses such as a quick note, to-do list, or reminder. At the top, there is a search bar and link widgets for Google and Reddit.
  1. Add the Iframe Widget:
    • Click the "+" button in the top navigation bar to add a new widget.
    • Select the "Iframe" widget from the list. You can use the search bar to quickly find it.
A modal window displaying a list of widget options for embedding various web apps on a dashboard. The search bar at the top contains the query "iframe." Below, several widgets are listed with their names, descriptions, and icons, including Iframe Widget, Instagram, ChatGPT, WhatsApp, TikTok, Pinterest, Messenger, and Google Maps. Each widget has a "Create widget" button.
A modal window displaying a list of widget options for embedding various web apps on a dashboard. The search bar at the top contains the query "iframe." Below, several widgets are listed with their names, descriptions, and icons, including Iframe Widget, Instagram, ChatGPT, WhatsApp, TikTok, Pinterest, Messenger, and Google Maps. Each widget has a "Create widget" button.

Configuring the Widget

A modal window titled "Iframe Widget" displays configuration options for embedding a web app on a dashboard with a variety of settings that can be configured.
A modal window titled "Iframe Widget" displays configuration options for embedding a web app on a dashboard with a variety of settings that can be configured.

There's a lot of settings you can customize for the iframe widget to get it working just right for your use case. You don't have to use all of them, but here's a breakdown of the main options:

  • Source (required): Enter the URL of the web app you want to embed (e.g., your Grafana dashboard or Sentry project).
  • Request mobile site: Enable this to request the mobile version of the website, which can be useful for sites that have a more compact mobile layout.
  • CSS Selector: Specify a CSS selector to display only a specific part of the page (e.g., .main-content or#dashboard).
  • Hidden selectors: Enter CSS selectors for elements you want to hide from the embedded page (e.g., .header, .footer, .ads).
  • Visible selectors: Enter CSS selectors to show only specific elements, hiding everything else (e.g., . metrics-panel, .stats-widget).
  • Background: Set a custom background color or image for the widget. Click "Reset background" to revert to default.
  • Padding: Adjust the padding around the iframe content.
  • Open links in: Choose whether links within the iframe should open in the same tab or a new tab.
  • Prevent body scroll while interacting: Enable this option to prevent the main page from scrolling when interactingwith the iframe content.

Wrapping up

Click "Create Widget" to add the widget to your dashboard. You should now see the embedded web app directly on your new tab page.

An iframe widget embedded on a New Tab Widgets dashboard, displaying a Grafana dashboard with various panels showing server performance metrics, application logs, and traffic data.
An iframe widget embedded on a New Tab Widgets dashboard, displaying a Grafana dashboard with various panels showing server performance metrics, application logs, and traffic data.

Tips for Using the Iframe Widget

  • Responsive Design: Ensure the web app you are embedding is responsive and works well within the iframe dimensions.
  • Authentication: Some web apps may require you to log in. Make sure you are logged in to the app in another tab, as some apps may not support authentication within an iframe.
  • Security Settings: Be aware that some websites have security settings that prevent them from being embedded in iframes. If you encounter issues, check the app's documentation or settings.
  • Multiple Widgets: You can add multiple iframe widgets to your dashboard to monitor different apps simultaneously.

Example Use Cases

  • Grafana: Embed your Grafana dashboards to monitor server performance, application metrics, and more.
  • Sentry: Keep an eye on error tracking and application health by embedding your Sentry projects.
  • Project Management Tools: Integrate tools like Trello, Asana, or Jira to keep track of tasks and projects.
  • Custom Dashboards: Create custom dashboards that combine various web apps and tools you use daily.

Related links