Gmail add-ons present information and widgets to the user in the sidebar of the Gmail UI. An add-on consists of a main identifying toolbar along with one or more contextual cards. Each card represents a particular 'page' of your add-on's UI, and navigating to a new card is usually just a matter of creating that card and pushing it onto an internal card stack. You can define navigation flows between cards for a rich interaction experience.
Gmail add-ons use the Apps Script Card service to create user interfaces out of cards. Each card consists of a header and one or more card sections. Each section is composed of a set of widgets. Widgets display information to the user or provide interaction controls like buttons.
Card-based interfaces have the following benefits:
- No knowledge of HTML or CSS is needed to create card-based interfaces.
- Cards and widgets are automatically styled to work well with the G Suite applications they extend.
- Card-based interfaces work on both desktop and mobile devices, but you only need to define the interface once.
Creating card-based interfaces
When building card-based add-ons, it's important to understand certain concepts and design patterns. The following guides provide the information you need to build effective card-based add-ons: