Retool Tutorial: Integrating Your Data Into Missive

Retool Tutorial: Integrating Your Data Into Missive

Philippe
by Philippe

The process of switching between multiple apps to get all the information you need is counterproductive.

You may experience this problem if you have to switch between your CRM and email client to access information about your client.

Wouldn't it be great to quickly access all of the information you need directly in your email?

If you are using Missive to manage your personal and team emails and you want to display data from your own database or from a Google Sheet, Retool is a good tool to use.

Here is a tutorial on how to use the Retool integration to add this data to Missive.

What Is Retool?

Retool is a powerful and flexible tool that helps you build custom internal applications quickly and easily. It provides a simple, but powerful, drag-and-drop interface that lets you add any data source to custom applications and share them with your team.

How to Use Retool with Missive?

Retool is a great way to create a custom integration that connects a source of data with an application used by your team. You can easily use this low-code solution to build the internal tools you need to kickstart your team's productivity.

In this tutorial, we'll explore how to use Retool to display data from a Google Sheet next to your emails in Missive.

Retool integration in Missive sidebar

1. Creating Our Queries in Retool

To be able to see the data of a Google spreadsheet alongside conversations, we'll need to query our Google Sheet document in a Retool application embedded in Missive.

We must first create three queries in our Retool application. To do so, let's log in to Retool and create a new app by clicking on Create new > App. If you don't already have one, create a Retool account.

Then we must create our data queries:

  1. One will query data from the Missive application.
  2. One will query data from a Google Sheet.
  3. One will merge those two data sources and display the correct data in the Retool application (Missive sidebar).

We can add a data source to your Retool application by clicking the + icon and selecting the Resource query. We will first create the query that gets the data of the selected conversation in Missive.

We can add a data source to your Retool application by clicking the + icon in the bottom left panel named Code and selecting Resource query.

To start let's create a query that will fetch the data of the selected conversation in Missive.

Retool dashboard creating a new query

Below, we're calling the query getCurrentConversation , but feel free to change the name if you wish. The resource select should be set to ParentWindow and the selector input should be set to conversation.

Retool dadhboard of getCurrentConversation query

The second query connects our Google Sheet to Retool. To create it, add a new query as we did previously. In Resource , select + Create a new resource. Then select Google Sheets and follow the instructions.

Retool dashboard creating a new resource

From there, we can select the spreadsheet you would like to connect to.

Retool dashboard selecting a resource type

We can test with one that has the same columns as this one:

Google Sheet with our data

Lastly, we need to create the query that will merge the data from Missive with the spreadsheet. we'll simply name it query. For this one, select Query JSON with SQL as the Resource.

JSON query in Retool

The query should be as follows:

select * from {{ googleSheet.data }} where Email = ANY({{getCurrentConversation.data.email_addresses.map(x => x.address.toLowerCase())}})

In a nutshell, this will find all of the rows in the spreadsheet where the email address is equal to at least one in the selected conversation in Missive.

2. Creating a UI for Missive

Now that we have the correct data, we can build a simple user interface to display it. In the right panel of the Retool editor, select the Create tab, then drag and drop the Key Value component in your application.

Creating a Key Value component in Retool

Then select the dropped component and in the Inspect tab of the right panel and in the Data input paste {{ query.data[0] }}.

Inspect data in the Key Value component in Retool

That's it! We've got a basic but functional application.

Before we try it in Missive, let's make some stylistic changes to the Retool application so it renders better in the Missive right sidebar.

For this, select the More menu at the top-right corner, then select the Scripts and styles option.

Script and style App actions in Retool

Then paste this CSS code:

._retool-container-table1 {
    width: 100% !important;
}

._retool-container-keyValue1 {
    width: 100% !important;
}

The ._retool-container-keyValue1 class name depends on the name of your component. Make sure to update it according to your component name.

Adding CSS to our component in Retool

This CSS will make the component dynamically resize with the Missive sidebar width.

3. Adding Our Retool Application in Missive

It's time to try this in Missive! Copy the link View link of your application:

Copying Retool app link

In Missive, open the Settings > Integrations and add a Retool integration, paste the copied link in the Retool public URL input:

Pasting Retool app link in Missive

Lastly, add this ?_embed=true at the end of the pasted URL. It will remove the Retool header from the integration for a far better look.

Retool link with embed at the end vs. a version without

And here is the final result!

Philippe
Philippe Lehoux

CEO at Missive
Follow me on Twitter