🌟 Google Apps Script: Creating a Custom Add-ons Menu in Google Docs

So far, you’ve probably built a simple HTML interface in your script by writing it directly as a string — something like this:

HtmlService.createHtmlOutput("<button>Click Me</button>");

That’s quick and easy for tiny snippets, but it can get messy fast! Imagine adding multiple buttons, input fields, or a form — your code becomes a jungle of tangled quotation marks and backslashes.

Luckily, Google Apps Script lets us create separate HTML files and use them neatly in our projects. Let’s explore that beautiful approach together.

🧩 Step 1: Creating a Separate HTML File

In your script editor, follow these simple steps:

Go to File → New → HTML file
A small box pops up asking for a file name.
Type Index (no need to add .html — it does that for you).
Click OK, and voilà! You now have an Index.html file sitting alongside your Code.gs file.

Google will even add a few default lines of HTML for you. It looks like this:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  </body>
</html>

Now, let’s give this HTML page something to display — a lovely, friendly button.

💡 Step 2: Add a Button to the HTML Page

Between the <body> and </body> tags, add this simple button code:

<button onclick="alert('Hello World!');">Click Me</button>

That’s it! You’ve created an HTML file that shows a clickable button. But for it to appear inside Google Docs, we must call it from our Apps Script file.

Now switch back to your Code.gs file and add this script:

function onOpen() {
  DocumentApp.getUi()
    .createAddonMenu()
    .addItem("Show Sidebar", "showSidebar")
    .addToUi();
}

function showSidebar() {
  DocumentApp.getUi().showSidebar(
    HtmlService.createHtmlOutputFromFile('Index')
      .setTitle('Greetings')
  );
}

Let’s break down what’s happening here:

onOpen() runs automatically when the document opens.
It creates a custom Add-ons menu using .createAddonMenu().
Inside that menu, we add a clickable item — “Show Sidebar” — that triggers the showSidebar() function.
Finally, showSidebar() uses HtmlService to pull our Index.html file and display it neatly inside a sidebar.

That sidebar is where your button will appear — yes, the one that says “Click Me!”

🧪 Step 4: Test It Out!

To see it in action:

Run the onOpen() function manually, or
Simply reload your Google Doc.

You’ll now see a new Add-ons menu at the top bar of your document. Inside it, there’s your shiny new item — “Show Sidebar.”

Click it, and voilà — your sidebar slides into view with the “Click Me” button. When clicked, it politely says “Hello World!”

That’s your first working Add-on UI — small, but mighty!

🎓 Why This Matters

By separating your HTML file from your Apps Script, you:

Keep your code organized and readable
Make it easy to update your interface later
Enable richer designs — forms, buttons, tables, and even CSS or JavaScript!

This modular approach is exactly how professional developers build scalable, maintainable Add-ons.

✍️ Review — Fill in the Gaps

Let’s see what you remember! Fill in the blanks below:

The HtmlService.createHtmlOutputFromFile() method loads content from a __ file.
To create a new HTML file in Apps Script, go to File → New → ______ file.
The onOpen() function runs automatically whenever the __ opens.
The method .createAddonMenu() helps create a custom __ in Google Docs.
Inside .addItem("Show Sidebar", "showSidebar"), the first parameter is the __ shown to users.
The second parameter ("showSidebar") is the name of the __ that runs when clicked.
HTML files can contain elements like buttons, forms, and __.
Using a separate HTML file keeps your code more __ and maintainable.
The title “Greetings” is set using the .set______() method.
When you click “Show Sidebar,” your HTML appears in a __ on the right side of the document.

🪟 Google Apps Script: Building A Custom HTML Sidebar In Google Docs

💬 Google Apps Script: Creating a Modal Dialog in Google Docs