AI-generated Key Takeaways
- 
          CardService allows you to create generic cards for use in various Google extensibility products like Google Workspace add-ons. 
- 
          You can return single or multiple cards using the CardService. 
- 
          Cards can be built with headers, text, images, and interactive elements like menu items. 
- 
          CardService provides numerous methods for creating different card components such as buttons, sections, and input fields. 
Card
Below is a sample for an add-ons card.
function createCard() { return CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('CardTitle')) .build(); }
Or you can return multiple Cards like so:
function createCards() { return [ CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), CardService.newCardBuilder().build(), ]; }
The following shows how you could define a card with a header, text, an image and a menu item:
function createWidgetDemoCard() { return CardService.newCardBuilder() .setHeader( CardService.newCardHeader() .setTitle('Widget demonstration') .setSubtitle('Check out these widgets') .setImageStyle(CardService.ImageStyle.SQUARE) .setImageUrl('https://www.example.com/images/headerImage.png'), ) .addSection( CardService.newCardSection() .setHeader('Simple widgets') // optional .addWidget( CardService.newTextParagraph().setText( 'These widgets are display-only. ' + 'A text paragraph can have multiple lines and ' + 'formatting.', ), ) .addWidget( CardService.newImage().setImageUrl( 'https://www.example.com/images/mapsImage.png', ), ), ) .addCardAction( CardService.newCardAction().setText('Gmail').setOpenLink( CardService.newOpenLink().setUrl('https://mail.google.com/mail'), ), ) .build(); }
Sample for a Chat Apps card.
const cardHeader = CardService.newCardHeader() .setTitle('Sasha') .setSubtitle('Software Engineer') .setImageUrl( 'https://developers.google.com/chat/images/quickstart-app-avatar.png', ) .setImageStyle(CardService.ImageStyle.CIRCLE) .setImageAltText('Avatar for Sasha'); const cardSection = CardService.newCardSection() .setHeader('Contact Info') .setCollapsible(true) .setNumUncollapsibleWidgets(1) .addWidget( CardService.newDecoratedText() .setStartIcon( CardService.newIconImage().setIcon(CardService.Icon.EMAIL)) .setText('sasha@example.com'), ) .addWidget( CardService.newDecoratedText() .setStartIcon( CardService.newIconImage().setIcon(CardService.Icon.PERSON)) .setText('<font color="#80e27e">Online</font>'), ) .addWidget( CardService.newDecoratedText() .setStartIcon( CardService.newIconImage().setIcon(CardService.Icon.PHONE)) .setText('+1 (555) 555-1234'), ) .addWidget( CardService.newButtonSet() .addButton( CardService.newTextButton().setText('Share').setOpenLink( CardService.newOpenLink().setUrl( 'https://example.com/share'), ), ) .addButton( CardService.newTextButton() .setText('Edit') .setOnClickAction( CardService.newAction() .setFunctionName('goToView') .setParameters({viewType: 'EDIT'}), ), ), ); const card = CardService.newCardBuilder() .setHeader(cardHeader) .addSection(cardSection) .build();
Properties
| Property | Type | Description | 
|---|---|---|
| Border | Border | The Borderenumeration. | 
| Chip | Chip | The Chipenumeration. | 
| Composed | Composed | The Composedenumeration. | 
| Content | Content | The Contentenumeration. | 
| Expression | Expression | The Expressionenumeration. | 
| Expression | Expression | The Expressionenumeration. | 
| Grid | Grid | The Gridenumeration. | 
| Horizontal | Horizontal | The Horizontalenumeration. | 
| Icon | Icon | The Iconenumeration. | 
| Image | Image | The Imageenumeration. | 
| Image | Image | The Imageenumeration. | 
| Image | Image | The Imageenumeration. | 
| Input | Input | The Inputenumeration. | 
| Load | Load | The Loadenumeration. | 
| On | On | The Onenumeration. | 
| Open | Open | The Openenumeration. | 
| Selection | Selection | The Selectionenumeration. | 
| Text | Text | The Textenumeration. | 
| Update | Update | The Updateenumeration. | 
| Visibility | Visibility | The Visibilityenumeration. | 
| Workflow | Workflow | The Workflowenumeration. | 
Methods
Detailed documentation
newActionResponseBuilder()   
Creates a new Action.
Return
Action — An empty ActionResponse builder.
newActionStatus()  
Creates a new Action.
Only available for Google Chat apps. Not available for Google Workspace add-ons.
const actionStatus = CardService.newActionStatus() .setStatusCode(CardService.Status.OK) .setUserFacingMessage('Success');
Return
Action — An empty ActionStatus.
newAttachment() 
newAuthorizationAction()  
newAuthorizationException()  
Creates a new Authorization.
Return
Authorization — An empty AuthorizationException.
newBorderStyle()  
newCalendarEventActionResponseBuilder()     
Creates a new Calendar.
Return
Calendar — An empty Calendar.
newCardAction()  
newCardBuilder()  
newCardHeader()  
newCardSection()  
newCardWithId()   
Creates a new Card. This is used to send a card in a Google Chat message. card ID
is a unique identifier for a card in a message when sending multiple cards.
Only available for Google Chat apps. Not available for Google Workspace add-ons.
const cardSection = CardService.newCardSection(); cardSection.addWidget( CardService.newTextParagraph().setText('This is a text paragraph widget.'), ); const card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('Card title')) .addSection(cardSection) .build(); const cardWithId = CardService.newCardWithId().setCardId('card_id').setCard(card);
Return
Card — An empty Card.
newCarousel() 
Creates a Carousel.
const carousel = CardService.newCarousel() .addCarouselCard(CardService.newCarouselCard().addWidget( CardService.newTextParagraph().setText('The first text paragraph in carousel'))) .addCarouselCard(CardService.newCarouselCard().addWidget( CardService.newTextParagraph().setText('The second text paragraph in carousel'))) .addCarouselCard(CardService.newCarouselCard().addWidget( CardService.newTextParagraph().setText('The third text paragraph in carousel')))
Return
Carousel — An empty Carousel.
newCarouselCard()  
Creates a new Carousel.
const carouselCard = CardService.newCarouselCard().addWidget( CardService.newTextParagraph().setText('Text paragraph in carousel'));
Return
Carousel — An empty Chip.
newChatActionResponse()   
Creates a new Chat.
Only available for Google Chat apps. Not available for Google Workspace add-ons.
const card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('Card title')) .build(); const dialog = CardService.newDialog().setBody(card); const dialogAction = CardService.newDialogAction().setDialog(dialog); const chatActionResponse = CardService.newChatActionResponse() .setResponseType(CardService.ResponseType.DIALOG) .setDialogAction(dialogAction);
Return
Chat — An empty Chat.
newChatResponseBuilder()   
Creates a new Chat.
Only available for Google Chat apps. Not available for Google Workspace add-ons.
const cardSection = CardService.newCardSection(); cardSection.addWidget( CardService.newTextParagraph().setText('This is a text paragraph widget.'), ); const card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('Card title')) .addSection(cardSection) .build(); const cardWithId = CardService.newCardWithId().setCardId('card_id').setCard(card); const chatResponse = CardService.newChatResponseBuilder().addCardsV2(cardWithId).build();
Return
Chat — An empty ChatResponseBuilder.
newChip() 
newChipList()  
Creates a new Chip.
Available for Google Chat apps. In developer preview for Google Workspace add-ons.
const chip = CardService.newChip(); // Finish building the text chip... const chipList = CardService.newChipList() .setLayout(CardService.ChipListLayout.WRAPPED) .addChip(chip);
Return
Chip — An empty ChipList.
newCollapseControl()  
Creates a new Collapse.
Available for Google Chat apps. In developer preview for Google Workspace add-ons.
const collapseControl = CardService.newCollapseControl() .setHorizontalAlign(CardService.HorizontalAlignment.START) .setExpandButton(CardService.newTextButton().setText('Expand')) .setCollapseButton(CardService.newTextButton().setText('Collapse'));
Return
Collapse — An empty CollapseControl.
newColumn() 
Creates a new Column.
Available for Google Chat apps and Google Workspace add-ons.
const columnWidget = CardService.newTextParagraph(); const column = CardService.newColumn() .setHorizontalSizeStyle( CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE) .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER) .setVerticalAlignment(CardService.VerticalAlignment.CENTER) .addWidget(columnWidget);
Return
Column — An empty Column.
newColumns() 
Creates a new set of Columns.
Available for Google Chat apps and Google Workspace add-ons.
const firstColumn = CardService.newColumn() .setHorizontalSizeStyle( CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE) .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER) .setVerticalAlignment(CardService.VerticalAlignment.CENTER); const secondColumn = CardService.newColumn() .setHorizontalSizeStyle( CardService.HorizontalSizeStyle.FILL_AVAILABLE_SPACE) .setHorizontalAlignment(CardService.HorizontalAlignment.CENTER) .setVerticalAlignment(CardService.VerticalAlignment.CENTER); const columns = CardService.newColumns() .addColumn(firstColumn) .addColumn(secondColumn) .setWrapStyle(CardService.WrapStyle.WRAP);
Return
Columns — An empty set of Columns.
newComposeActionResponseBuilder()    
Creates a new Compose.
Return
Compose — An empty ComposeActionResponse builder.
newDatePicker()  
newDateTimePicker()   
newDecoratedText()  
newDialog() 
Creates a new Dialog.
Only available for Google Chat apps. Not available for Google Workspace add-ons.
const card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('Card title')) .build(); // Sets the card of the dialog. const dialog = CardService.newDialog().setBody(card);
Return
newDialogAction()  
Creates a new Dialog.
Only available for Google Chat apps. Not available for Google Workspace add-ons.
const card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('Card title')) .build(); const dialog = CardService.newDialog().setBody(card); const dialogAction = CardService.newDialogAction().setDialog(dialog);
Return
Dialog — An empty Dialog.
newDivider() 
Creates a new Divider. The following sample builds a simple card with 2 paragraphs
separated by a divider.
function buildCard() { const cardSection1TextParagraph1 = CardService.newTextParagraph().setText('Hello world!'); const cardSection1Divider1 = CardService.newDivider(); const cardSection1TextParagraph2 = CardService.newTextParagraph().setText('Hello world!'); const cardSection1 = CardService.newCardSection() .addWidget(cardSection1TextParagraph1) .addWidget(cardSection1Divider1) .addWidget(cardSection1TextParagraph2); const card = CardService.newCardBuilder().addSection(cardSection1).build(); return card; }
Return
Divider — A divider.
newDriveItemsSelectedActionResponseBuilder()      
Creates a new Drive.
Return
Drive — An empty Drive.
newEditorFileScopeActionResponseBuilder()      
Creates a new Editor.
Return
Editor — An empty Editor.
newHostAppDataSource()    
newImageButton()  
newImageComponent()  
newImageCropStyle()   
newLinkPreview()  
Creates a new Link.
const decoratedText = CardService.newDecoratedText().setTopLabel('Hello').setText('Hi!'); const cardSection = CardService.newCardSection().addWidget(decoratedText); const card = CardService.newCardBuilder().addSection(cardSection).build(); const linkPreview = CardService.newLinkPreview().setPreviewCard(card).setTitle( 'Smart chip title');
Return
Link — An empty LinkPreview.
newMaterialIcon()  
Creates a new Material.
Available for Google Chat apps and Google Workspace add-ons.
const materialIcon = CardService.newMaterialIcon().setName('check_box').setFill(true); const cardSection = CardService.newCardSection(); cardSection.addWidget( CardService.newDecoratedText() .setStartIcon(CardService.newIconImage().setMaterialIcon(materialIcon)) .setText('sasha@example.com'), ); const card = CardService.newCardBuilder() .setHeader(CardService.newCardHeader().setTitle('Card Title')) .addSection(cardSection) .build();
Return
Material — An empty MaterialIcon.
newNotification() 
newOverflowMenu()  
Creates a new Overflow.
Available for Google Chat apps. In developer preview for Google Workspace add-ons.
const overflowMenuItem = CardService.newOverflowMenuItem(); // Finish building the overflow menu item... const overflowMenu = CardService.newOverflowMenu().addMenuItem(overflowMenuItem);
Return
Overflow — An empty OverflowMenu.
newOverflowMenuItem()   
Creates a new Overflow.
Available for Google Chat apps. In developer preview for Google Workspace add-ons.
const overflowMenuItem = CardService.newOverflowMenuItem() .setStartIcon( CardService.newIconImage().setIconUrl( 'https://www.google.com/images/branding/googleg/1x/googleg_standard_color_64dp.png', ), ) .setText('Open Link') .setOpenLink( CardService.newOpenLink().setUrl('https://www.google.com'));
Return
Overflow — An empty OverflowMenuItem.
newSelectionInput()  
newSuggestions() 
newSuggestionsResponseBuilder()   
Creates a new Suggestions.
Return
Suggestions — An empty SuggestionsResponse builder.
newTextButton()  
newTextParagraph()  
newTimePicker()  
newUniversalActionResponseBuilder()    
Creates a new Universal.
Return
Universal — An empty UniversalActionResponse builder.
newUpdateDraftActionResponseBuilder()     
Creates a new Update.
Return
Update — An empty UpdateDraftActionResponseBuilder.
newUpdateDraftBccRecipientsAction()     
Creates a new Update;
Return
Update — An empty UpdateDraftBccRecipientsAction.
newUpdateDraftBodyAction()    
newUpdateDraftCcRecipientsAction()     
Creates a new Update.
Return
Update — An Empty UpdateDraftCcRecipientsAction.
newUpdateDraftSubjectAction()    
Creates a new Update.
Return
Update — An empty UpdateDraftSubjectAction.
newUpdateDraftToRecipientsAction()     
Creates a new Update.
Return
Update — An empty UpdateDraftToRecipientsAction.
newValidation() 
Creates a new Validation.
Available for Google Chat apps and Google Workspace add-ons.
const validation = CardService.newValidation().setCharacterLimit(5).setInputType( CardService.InputType.EMAIL);
Return
Validation — An empty validation.