Search code examples
google-apps-scriptgoogle-appsgmail-addonsgoogle-apps-script-addon

How to make Card Header Title bold in Gmail Add-on?


How to make Card Header Title bold in Gmail Add-on? I tried this, but it doesn`t work:

function mainCardBuild(content) {
    return CardService.newCardBuilder()
        .setHeader(
            CardService.newCardHeader().setTitle('<b> MY TITLE </b>')) //doesn`t work bold
        .addSection(content)
        .build();
}

I`m sure that we have opportunity to do it, because in Slack Add-on I saw it. Bold card header in Slack


Solution

  • You cannot insert HTML in your title, but you can insert basic HTML into Text Paragraphs (see: Informational widgets and supported text formatting). Your code could then look as follows:

    function mainCardBuild(content) {
        var boldHeaderSection = CardService.newCardSection()
          .addWidget(CardService.newTextParagraph().setText('<b>MY TITLE</b>'));
        return CardService.newCardBuilder()
            .addSection(boldHeaderSection)
            .addSection(content)
            .build();
    }
    

    In case you need to do more customisations, I suggest you check out the following example, which uses HTML to create the view Translate Add-on Quickstart.