Gmail Addon

Are you looking for a way to display data in Gmail? FactBranch's Gmail addon might be just what you need. In this article, we'll go through the process of creating a flow for the Gmail addon in FactBranch, installing the FactBranch app in Gmail, and collecting real-world test data.

In this article you'll learn:

Creating a Flow for the Gmail Addon

To create a flow for the Gmail addon in FactBranch, head to your FactBranch Flow dashboard and click on Create Flow and then selecting Show Data in the Gmail Addon. This will create a flow with a Gmail app trigger. Next, click Config next to the trigger block to get to the trigger config page.

Collecting Real-World Test Data

The first step in the trigger config page is to collect real-world test data for this flow. In the Incoming Data box, activate Record Requests. This will allow you to collect test data from real Gmail conversations and will make it easier to design the data you'd like to display in the Gmail app.

Installing the FactBranch App in Gmail

Next, install the FactBranch app in Gmail. You can find the FactBranch Gmail addon in the Google Workspace Marketplace. You will need the API key from the trigger config page during setup. On the Gmail trigger config page, click on or follow the instructions to get to the app page in the marketplace. Then click Individual Install or Admin Install and continue through the install process.

Once you're back in your Gmail account, open a conversation and you should see the FactBranch icon in the sidebar on the right.

Click the icon to open the app and then FactBranch will ask you for your API key. Paste your API key from the trigger page here. Click on Save and the app will try to load data from FactBranch.

Collecting Test Data

Of course, in the beginning, there won't be any data to display. Head back to the trigger config page in FactBranch and in the Incoming data panel click refresh. You should see a new entry that was created when you opened the FactBranch app in Gmail.

Click on the entry to reveal its content. To use that particular data as test data for this flow, click on Use as test data. The trigger's test data below will update. Now you can deactivate Record requests again as you're finished collecting test data.

Setting Up the Rest of the Flow

With the data collected, you can now set up the rest of the Flow by configuring existing nodes or adding more nodes to the Flow.

Designing the outputs in a Render UI node

Check out the Render UI node and especially its section on the special syntax for the Gmail addon to learn how to design outputs for the Gmail addon.

Here is a quick but complete example showing how to do that.

Let's say you've loaded data from your data source (e.g. an API or your database) and it has the following structure:

{
  "admin_panel": "https://example.com",
  "first_order_on": "202-03-23",
  "last_review": "★★★★★",
  "location": "Hawthorne, CA",
  "name": "Alice Carlsson",
  "premium": "Yes",
  "signed_up_on": "2021-03-20",
  "total_revenue": "752.82$"
}

Then this would be your Render UI node:

Using the following entries as your template to generate the output you see in the preview on the right.

{{ data.name | gmail_item("Name") }}
{{ data.last_review | gmail_item("Last review") }}
{{ data.total_revenue | gmail_item("Total revenue") }}
{{ data.location | gmail_item("Location") }}
{{ data.premium | gmail_item("Premium") }}
{{ data.first_order_on | gmail_item("First order on") }}
{{ data.signed_up_on | gmail_item("Signed up on") }}
{{ data.admin_panel | gmail_item("Open admin panel", "link") }}

When you now open a Gmail conversation, FactBranch will load data from your data source and display it like this: