Passer d’une application à l’autre pour réunir toutes les informations dont vous avez besoin est contre-productif.

C’est souvent le cas quand il faut jongler entre votre CRM et votre client de messagerie pour retrouver les informations d’un client.

Ne serait-il pas idéal d’accéder rapidement à toutes ces informations directement depuis vos e-mails ?

Si vous utilisez Missive pour gérer vos e-mails personnels et vos e-mails d’équipe, et que vous voulez afficher des données issues de votre propre base de données ou d’une feuille Google Sheets, Retool est un bon outil.

Voici un tutoriel pour utiliser l’intégration Retool et ajouter ces données à Missive.

Qu’est-ce que Retool ?

Retool est un outil puissant et flexible qui vous aide à créer rapidement et facilement des applications internes sur mesure. Son interface en glisser-déposer, simple mais puissante, vous permet d’ajouter n’importe quelle source de données à vos applications et de les partager avec votre équipe.

Comment utiliser Retool avec Missive ?

Retool est un excellent moyen de créer une intégration sur mesure qui relie une source de données à une application utilisée par votre équipe. Grâce à cette solution low-code, vous créez facilement les outils internes dont vous avez besoin pour donner un coup de fouet à la productivité de votre équipe.

Dans ce tutoriel, nous allons voir comment utiliser Retool pour afficher les données d’une feuille Google Sheets à côté de vos e-mails dans Missive.

1. Créer nos requêtes dans Retool

Pour voir les données d’une feuille de calcul Google à côté des conversations, nous devons interroger notre document Google Sheets depuis une application Retool intégrée à Missive.

Nous devons d’abord créer trois requêtes dans notre application Retool. Pour cela, connectez-vous à Retool et créez une nouvelle application en cliquant sur Create new > App. Si vous n’avez pas encore de compte, créez un compte Retool.

Ensuite, nous devons créer nos requêtes de données :

1. La première interroge les données de l’application Missive.
2. La deuxième interroge les données d’une feuille Google Sheets.
3. La troisième fusionne ces deux sources de données et affiche les bonnes données dans l’application Retool (la barre latérale de Missive).

Pour ajouter une source de données à votre application Retool, cliquez sur l’icône + et sélectionnez Resource query. Nous allons d’abord créer la requête qui récupère les données de la conversation sélectionnée dans Missive.

Pour ajouter une source de données à votre application Retool, cliquez sur l’icône + dans le panneau inférieur gauche nommé Code et sélectionnez Resource query.

Commençons par créer une requête qui récupère les données de la conversation sélectionnée dans Missive.

Ci-dessous, nous appelons la requête getCurrentConversation, mais vous pouvez la renommer si vous le souhaitez. Le champ Resource doit être réglé sur ParentWindow et le champ Selector sur conversation.

La deuxième requête connecte notre feuille Google Sheets à Retool. Pour la créer, ajoutez une nouvelle requête comme précédemment. Dans Resource, sélectionnez + Create a new resource. Choisissez ensuite Google Sheets et suivez les instructions.

De là, vous pouvez sélectionner la feuille de calcul à connecter.

Vous pouvez faire un test avec une feuille qui a les mêmes colonnes que celle-ci :

Enfin, nous devons créer la requête qui fusionne les données de Missive avec la feuille de calcul. Nous l’appellerons simplement query. Pour celle-ci, sélectionnez Query JSON with SQL comme Resource.

La requête doit être la suivante :

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

En résumé, elle trouve toutes les lignes de la feuille de calcul dont l’adresse e-mail correspond à au moins une des adresses de la conversation sélectionnée dans Missive.

2. Créer une interface pour Missive

Maintenant que nous avons les bonnes données, nous pouvons créer une interface simple pour les afficher. Dans le panneau de droite de l’éditeur Retool, sélectionnez l’onglet Create, puis glissez-déposez le composant Key Value dans votre application.

Sélectionnez ensuite le composant ajouté puis, dans l’onglet Inspect du panneau de droite, collez {{ query.data[0] }} dans le champ Data.

Et voilà ! Nous avons une application simple, mais fonctionnelle.

Avant de l’essayer dans Missive, apportons quelques retouches de style à l’application Retool pour qu’elle s’affiche mieux dans la barre latérale droite de Missive.

Pour cela, ouvrez le menu More en haut à droite, puis sélectionnez l’option Scripts and styles.

Collez ensuite ce code CSS :

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

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

Le nom de classe ._retool-container-keyValue1 dépend du nom de votre composant. Pensez à l’adapter au nom de votre composant.

Ce CSS permet au composant de s’adapter dynamiquement à la largeur de la barre latérale de Missive.

3. Ajouter notre application Retool dans Missive

Place à l’essai dans Missive ! Copiez le lien View de votre application :

Dans Missive, ouvrez Paramètres > Intégrations, ajoutez une intégration Retool et collez le lien copié dans le champ URL publique Retool :

Enfin, ajoutez ?_embed=true à la fin de l’URL collée. L’en-tête Retool disparaît alors de l’intégration, pour un rendu bien plus propre.

Veillez aussi à désactiver l’option Enable mobile layout dans les paramètres de votre application Retool :

Et voici le résultat final !

‍

Utiliser l’API JS de Missive depuis Retool

Vous pouvez aussi tirer parti de l’API JS de Missive depuis votre application Retool. Voici comment faire :

1. Activer la communication avec la fenêtre parente

Par défaut, Retool bloque toute communication entre l’application et sa fenêtre parente (Missive). Vous pouvez l’activer dans vos paramètres Beta :

2. Ajouter la bibliothèque missive-retool.js à votre application Retool

Ajoutez ce script dans la section Scripts and styles de votre application Retool :

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

3. Utiliser l’API JS de Missive

Vous pouvez désormais utiliser l’API JS de Missive depuis votre application Retool. Vous pouvez par exemple ajouter un lien qui ajoute de nouveaux commentaires et de nouvelles tâches à la conversation sélectionnée :