How to style a Google Workspace Marketplace Addon?

Viewed 247

I have checked the documentation of Google Workspace Marketplace add-ons and I have not been able to find out how to change the styles of its cards and components (e.g. Header, Footer, Buttons, Paddings, Margins, Fonts, etc.). I just want to know if there's a solution to this or any document that would guide me in the right direction and if it is actually possible to do so?

Title

Title of the Add-On

Button

Button of the Add-On

2 Answers

Since Google Workspace add-ons make use of cards, there's no way to style them directly as you would normally do with the editor add-ons.

However, according to the official documentation, you might benefit from trying the Google Workspace add-ons UI design kit available on Figma.

Reference

Styling options of Google Workspace Add-ons are very limited.

There are a few things that you can tune:

  1. Set-up primaryColor and secondaryColor in deployment configuration
  2. Change color of buttons by specifying color option
  3. Change the color, style (bold, italics) of any text inside the widget
Related