Google App Script / Gmail add-on : How to display a window with text and buttons over Gmail?

Question

I made a Google App script to answer automatically to my emails (a kind of clever email robot assistant). Nevertheless, I would like to check each answer made by the robot before sending.

So I would like to have a window over Gmail showing the user email and the robot answer, and two buttons "send" "skip". In this way, I could check the answer prepared by the robot and either send it or skip it (or potentially edit it).

How to display a window with text, editText and buttons over GMail from Google App Script ?

Thanks !

Regards.

Answer 1

You have to check Gmail Add-on : https://developers.google.com/gsuite/add-ons/gmail

For a first start you can check the codelab from Google, it will give you the code to set a first add-on in 5 minutes then you can adapt it to your needs : https://codelabs.developers.google.com/codelabs/apps-script-intro/

Stéphane

Answer 2

An easy solution would be to have the robot save the e-mail as 'draft'. That way, you can easily check the emails before manually sending them.

If you are still interested in creating the gmail add-on (which could display the original email, response, and buttons for sending or editing), you may be interested in building card-based interfaces. These will appear to the right of your Gmail web client, and will look like the following:

The code used to display such interface (with two buttons, one that automatically sends the email and another one that opens the editor on it) is the following:

function buildAddOn(e) {
  // Activate temporary Gmail add-on scopes.
  var accessToken = e.messageMetadata.accessToken;
  GmailApp.setCurrentMessageAccessToken(accessToken);

  return buildDraftCard(getNextDraft());
}

function buildDraftCard(draft) {
  if (!draft) {
    var header = CardService.newCardHeader().setTitle('Nothing to see here');
    return CardService.newCardBuilder().setHeader(header).build();
  } else {
    var header = CardService.newCardHeader()
      .setTitle(draft.getMessage().getSubject());
    var section = CardService.newCardSection();
    var messageViewer = CardService.newTextParagraph()
      .setText(draft.getMessage().getBody());
    var sendButton = CardService.newTextButton()
      .setText('Send')
      .setOnClickAction(CardService.newAction()
                        .setFunctionName('sendMessage')
                        .setParameters({'draftId': draft.getId()})
                       );
    var editButton = CardService.newTextButton()
      .setText('Edit')
      .setOnClickAction(CardService.newAction()
                        .setFunctionName('editMessage')
                        .setParameters({'draftId': draft.getId()})
                       );
    var buttonSet = CardService.newButtonSet()
      .addButton(sendButton)
      .addButton(editButton);

    section.addWidget(messageViewer);
    section.addWidget(buttonSet)

    return CardService.newCardBuilder()
    .setHeader(header)
    .addSection(section)
    .build();
  }
}

function sendMessage(e) {
  GmailApp.getDraft(e.parameters.draftId).send();
  return CardService.newActionResponseBuilder().setNavigation(
    CardService.newNavigation()
    .popToRoot()
    .updateCard(buildDraftCard(getNextDraft()))
  ).build(); 
}

function editMessage(e) {
  var messageId = GmailApp.getDraft(e.parameters.draftId).getMessageId();
  var link = "https://mail.google.com/mail/#all/" + messageId;
  return CardService.newActionResponseBuilder().setOpenLink(
    CardService.newOpenLink()
    .setUrl(link)
    .setOnClose(CardService.OnClose.RELOAD_ADD_ON)
  ).build();
}

function getNextDraft() {
  return GmailApp.getDrafts().pop()
}

And the appsscript.json configuration is the following:

{
  "oauthScopes": [ 
    "https://www.googleapis.com/auth/gmail.addons.execute",        
    "https://mail.google.com/"
  ],
  "gmail": {
    "name": "Gmail Add-on Draft Autoresponse UI",
    "logoUrl": "https://www.gstatic.com/images/icons/material/system/1x/label_googblue_24dp.png",
    "contextualTriggers": [{
      "unconditional": {
      },
      "onTriggerFunction": "buildAddOn"
    }],
    "openLinkUrlPrefixes": [
      "https://mail.google.com/"
    ],
    "primaryColor": "#4285F4",
    "secondaryColor": "#4285F4"
  }
}

Bear in mind however, that these interfaces at the moment still have some limitations. They can only be displayed whilst having a message open, and the HTML formatting of the email may look a bit off. You can find more information on how to test & run the code above by following this link.