Retool Tutorial: Integrating Your Data Into Missive

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.

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.

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.

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.

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

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

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.

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.

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

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.

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.

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:

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

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.

Also, make sure to disable the Enable mobile layout from your Retool app settings:

And here is the final result!

Using Missive JS API from Retool

You can also take advantage of Missive JS API from your Retool app. Here are the steps to do so:

1. Enable parent window communication

By default, Retool will block any communication between the app and its parent window (Missive). You can enable it in your Beta settings:

2. Add missive-retool.js library to your Retool app

Add this script in the Scripts and styles section of your Retool app:

https://integrations.missiveapp.com/retool/missive-retool.js

3. Use the Missive JS API

You can now use the Missive JS API from your Retool app. You can, for example, add a link that will add new comments and tasks to the selected conversation: