How to use HtmlService in Gmail add-on using App Script

Question

I am creating a Gmail Add-on. The following reference page says - https://developers.google.com/gmail/add-ons/reference/

"Gmail add-ons are built using Apps Script and the many services it provides. You can use any of the Apps Script services when building your add-on"

Basically, I want to have the small screen to pop up on clicking a button in my Gmail add-on.

As of now I have added a button in my section as follows and tied it to an action handler 'htmltest':-

var htmlTest = CardService.newAction().setFunctionName('htmlTest');
var button = CardService.newTextButton().setText("htmlTest").setOnClickAction(htmlTest);
section.addWidget(button);

This is how htmlTest looks like:-

function htmlTest(e){
return HtmlService.createHtmlOutputFromFile('doubleCheck');
}

And this is the doubleCheck.html file I want it to pop up:-

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

But when I click the button it gives a run-time error:- Missing required fields in markup:

Any clues how to use HtmlService while creating Gmail

I don't think HTMLService is available for Gmail add-ons.. We are required to use CardService instead.. developers.google.com/apps-script/reference/card-service Please correct me if I am wrong.. — user3275211
– user3275211, Commented Nov 28, 2017 at 14:27
Its written here(developers.google.com/gmail/add-ons/reference) that "You can use any of the Apps Script services when building your add-on, but the following are often particularly useful: are cardService, PropertiesService etc..." — Shubham Gupta
– Shubham Gupta, Commented Nov 29, 2017 at 8:29
hmm... anyway, for what it's worth, CardService has a facility for popups as well... refer developers.google.com/gmail/add-ons/reference/card-service/… — user3275211
– user3275211, Commented Nov 30, 2017 at 6:02

Ronnie Headen · Accepted Answer · 2017-12-10 00:47:59Z

2

In the overview section of the CardService, It quotes:

“Currently you can only use this service to construct Gmail add-ons.“

So HtmlService is not available in constructing Gmail addon’s currently.

https://developers.google.com/apps-script/reference/card-service/

edited Dec 10, 2017 at 0:47

answered Dec 6, 2017 at 18:47

Ronnie Headen

2694 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ankit Gupta Over a year ago

I think you mean "Workspace add-ons" as the text has changed I think

Hibuki · Accepted Answer · 2019-05-19 13:51:33Z

2

TL;DR:

To build interfaces for Gmail add-ons, you must use the Card service instead [of the HTML Service].

Quoted from your reference, under HTML service.

For popups, +1 to @akshay who recommended OVERLAY: CardService.newOpenLink().setOpenAs(CardService.OpenAs.OVERLAY), which will "Open as an overlay such as a pop-up". See CardService OpenAs.

edited May 19, 2019 at 13:51

answered May 19, 2019 at 13:19

Hibuki

5545 silver badges14 bronze badges

1 Comment

Wicket Mar 31 at 15:57

It looks like this answer is referring to this question comment: stackoverflow.com/questions/47477246/… .

Wicket · Accepted Answer · 2025-03-31 17:19:24Z

As mentioned in previous answers, the HtmlService can't be used directly in Workspace Add-ons, including Gmail Add-ons. The primary user interface should be created using the Card-based interfaces. The specific card elements that support formatted content are Widgets but they only support a small set of HTML formatting tags. Contrary as Editors Add-ons, the Card Service required for Worskapace Add-ons don't have dialogs and sidebars to show the HtmlService.HtmlOutput.

^{If it's is earsier for you to put the formatted text in an HTML file, then you can grab it using HtmlService.HtmlOutput.getContent(), just ensure that it only contains the supported HTML formatting tags.}

However, it's posible to open links, either as a new window or as an overlay. Using the option to open a link as overlay make it possible to use the HtmlService for the content of this window / overlay.

If you want to keep all together, the Apps Script project could be deployed as an add-on and as a web application. This could be done using a single deployment or using different deployments.

Let's assume that we want to create a new deployment.

Click Deploy > New Deployment
Click Enable Deployment Types (the button with the cog wheel icon). A dropdown shows four options.
Select one of the options, Web App or Add-on, then click again Enable Deployment Types to select the other one.
Complete the input fields required in the Configuration panel.
Click Deploy.
Copy the web app URL.

I recommend to have a specific .gs file for the web app.

Add an new .gs file and set a name.
Add the doGet function. It should return a HtmlService.HtmlOutput object.

The card that will open the link should include a button to open it. Example:

function myCard(){
   return CardService.newCardBuilder()
     .setHeader(CardService.newCardHeader()
        .setTitle('ADD HERE THE CARD TITLE'))
     .addSection(CardService.newCardSection()
        .addWidget(CardService.newButtonSet()
          .addButton(CardService.newTextButton()
            .setText("ADD HERE YOUR BUTTON TEXT")
            .setOpenLink(
              CardService.newOpenLink()
                .setUrl("ADD HERE THE WEB APP URL")
                .setOpenAs(CardService.OpenAs.OVERLAY)
                .setOnClose(CardService.OnClose.NOTHING)
            )
         )
     )
   .build()
}

From Widgets - Text Formatting

Text formatting
Some text-based widgets can support simple text HTML formatting. When setting the text content of these widgets, just include the corresponding HTML tags.
The supported tags and their purpose are shown in the following table:

Format Example Rendered result

Bold "This is bold." This is bold.

Italics "This is italics." This is italics.

Underline "This is underline." This is underline.

Strikethrough "This is <s>strikethrough</s>." This is ~~strikethrough~~.

Font color "This is red font." This is red font.

Hyperlink "This is a <a href=\"https://www.google.com\">hyperlink</a>." This is a hyperlink.

Time "This is a time format: <time>2023-02-16 15:00</time>." This is a time format: 2023-02-16 15:00.

Newline "This is the first line. This is a new line." This is the first line.
This is a new line.

Collectives™ on Stack Overflow

How to use HtmlService in Gmail add-on using App Script

3 Answers 3

1 Comment

1 Comment

Text formatting

Comments

Your Answer

Linked

Hot Network Questions

Format	Example	Rendered result
Bold	`"This is <b>bold</b>."`	This is bold.
Italics	`"This is <i>italics</i>."`	This is italics.
Underline	`"This is <u>underline</u>."`	This is underline.
Strikethrough	`"This is <s>strikethrough</s>."`	This is ~~strikethrough~~.
Font color	`"This is <font color=\"#FF0000\">red font</font>."`	This is red font.
Hyperlink	`"This is a <a href=\"https://www.google.com\">hyperlink</a>."`	This is a hyperlink.
Time	`"This is a time format: <time>2023-02-16 15:00</time>."`	This is a time format: 2023-02-16 15:00.
Newline	`"This is the first line. <br> This is a new line.`"	This is the first line. This is a new line.

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Text formatting

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related