In April, we walked through how to set up a document that generates printable invoices using the Invoice custom widget. We also showed how to customize colors and add images to reflect your brand. Whether you’re starting from scratch or refining an existing invoice, this webinar covers how to create professional, tailored invoices for almost any organization.

Timestamps

00:20 Invoice template overview
01:37 Adding and configuring the Invoice custom widget
05:11 💡Tip: Unhide new columns to enable custom widget access
08:28 Setting up the Clients table
11:53 Filling in Invoicer details
13:16 💡Tip: Hide black info box by adding Due or Issued date
13:55 Creating an Items table for multi-line Invoices
17:23 💡Tip: Widget auto-calculates Subtotal and Total
18:06 Customizing the custom widget
18:15 Accessing Grist Labs’ custom widget repository
19:02 Hosting your own widget using GitHub Pages
20:27 Downloading widget files and uploading to your repo
23:10 💡Tip: Match file names to original Grist files
24:00 Updating the widget to call your code
25:06 💡Tip: Use incognito mode to test; CTRL + F5 to refresh
25:45 Changing widget colors (💡Tip: Check out this class Cheat Sheet)
30:42 Updating font
31:35 Changing text alignment
32:56 Adding a column to a table
34:33 Removing a column from a table
36:56 Adjusting column width in the Summary table
39:24 Calculating taxes
41:28 Adding an image to your Invoice (💡Tip: Use ChatGPT)

Useful links:

• GetGrist.com | Resources | Webinars: https://www.getgrist.com/webinars/
• Community Forum: https://community.getgrist.com/
• Help Center: https://support.getgrist.com/
• Invoicing Template: https://templates.getgrist.com/9NH6D58FmxwP/Invoicing
• Prepare Invoices Tutorial: https://support.getgrist.com/examples/2020-08-invoices/
• GitHub Pages: https://pages.github.com/
• Invoice Custom Widget Code: https://github.com/gristlabs/grist-widget/tree/master/invoices

Document shown:

Creating Custom Invoices: https://public.getgrist.com/7E14mdas6S4Q/Creating-Custom-Invoices/m/fork

Modified Invoice Code: https://github.com/nataliemisasi/nataliemisasi.github.io/tree/main/invoice-webinar

Grist Invoice Class Cheat Sheet: https://www.getgrist.com/wp-content/uploads/2025/04/Grist-Invoice-Class.pdf