How to open a website in a new window from the Google Sheets menu

This tutorial explains how to open a web page in a new window from a menu option in Google Sheets

Let’s say you’ve created an add-on for Google Sheets that adds a new menu item to the sheets UI. Now you want to add an option in the menu that, when clicked, will redirect the user to your website without the user having to click another button.

For example, in this Google Sheet demowe have a parent menu and a submenu that opens the underlying website in the new window.

First, we’ll add a custom menu in the Google spreadsheet and invoke it from the onOpen function so that the menu is always available when a user opens your Google spreadsheet.

const onOpen = () => {
  const ui = SpreadsheetApp.getUi();
  const parentMenu = ui.createMenu('👩🏻‍💼  Digital Inspiration');
  parentMenu.addItem('Visit our website', 'openWebsite');
  parentMenu.addToUi();
};

2. Add HTML code for website redirect

Create a new file url.html in the Apps Script editor and add the following code.

The JavaScript uses the window.open method to open the url in a new window since we set the target to _blank.

DOCTYPE html>
<html>
  <body>
    <a href="" target="_blank">Click herea> to open the webpage.
  body>
  <script>
    var windowReference = window.open('', '_blank');
    if (windowReference !== null) {
      google.script.host.close();
    }
  script>
html>

If you want to open the website in a fixed-size popup window, instead of a new window, the function would look like this:

<script>
  var windowFeatures = 'popup';
  var windowReference = window.open('', 'scriptWindow', windowFeatures);
  if (windowReference !== null) {
    google.script.host.close();
  }
script>

The return value of window.open will be null if the window was blocked by the browser’s built-in popup blockers.

The popup window can be positioned anywhere on the script and resized to a specific height and width by modifying the windowFeatures variable as below:


var windowFeatures = 'popup';


var windowFeatures = 'left=100,top=100,width=320,height=320';

Please consult the DND Documents for best practices around fixing some usability issues related to links opening the secondary window.

Next, we will write the Apps Script function which will be invoked from the menu and launch the website in a new window/tab.

const openWebsite = () => {
  const htmlTemplate = HtmlService.createTemplateFromFile('url.html');
  htmlTemplate.url = 'https://digitalinspiration.com/';
  const htmlOutput = htmlTemplate.evaluate().setHeight(50).setWidth(200);
  const ui = SpreadsheetApp.getUi();
  ui.showModelessDialog(htmlOutput, 'Open Website');
  Utilities.sleep(2000);
};

You have to add the sleep function like opening the window may take a second or two. Whether sleep is omitted, the Spreadsheet dialog will open and close instantly without launching the website.

About Sandra A. Powell

Check Also

How SEO Improves Website Visibility

The basic approach to an effective online presence is to ensure that the right audience …