Envoyer un SMS via Twilio

Dans ce tutoriel, nous allons expliquer comment envoyer un SMS depuis votre application vers un numéro de téléphone indiqué par l'utilisateur, à l'aide de Twilio.

Twilio est un service qui vous permet d'envoyer et de recevoir des SMS et des appels vocaux. Le but de ce tutorial est d'envoyer un SMS sur un numéro de téléphone personnalisable et d'ouvrir une pop-up lorsque le message est parti.

Prérequis :

Avoir un compte Twilio pour l'envoi des SMS (accès gratuit, voir les tarifs)
Avoir un compte Zapier ou un compte Integromat pour créer votre scenario et connecter votre application PandaSuite à ces services. Attention, l'utilisation de ces services peut engendrer des coûts supplémentaires.

Préparer le champ de saisie

Insérer le composant Saisie de texte

Cliquez sur Composants et ajoutez le composant Saisie de texte sur votre écran.

Personnalisez l'apparence de ce champ depuis la fenêtre Propriétés.

Décochez Validation en direct pour que les changements du numéro ne soient pas automatiquement pris en compte.

Créer le bouton

Insérez un bouton de validation.

L'objectif est au clic sur ce bouton de valider la saisie du numéro, d'effacer la saisie du champ et d'envoyer ce numéro de téléphone à Twilio via Integromat ou Zapier :

Pour valider la saisie du numéro et effacer la saisie du champ, sélectionnez le bouton et créez deux actions sur le composant Saisie de texte : Valider la saisie et Effacer le texte.
Pour envoyer le numéro à Twilio, il faut d'abord préparer le scénario sur Integromat / Zapier puis insérer un composant HTTP pour effectuer la connexion.

Cette configuration requiert la mise en place d'un nouveau scénario sur Integromat ou Zapier. Ces informations seront indispensables pour construire la requête de notre composant HTTP.

Integromat et Zapier sont des services puissants et reconnus pour connecter les applications entre elles grâce à l'utilisation de leur API. Ils permettent d'automatiser des process et de rendre accessibles des manipulations avancées sans aucune ligne de code. Dans notre exemple, ils assurent la connexion entre l'interface de votre application (PandaSuite) et une fonctionnalité d'envoi de SMS (Twilio).

Vous pouvez utiliser l'un ou l'autre dans votre configuration, nous détaillons les deux manières de procéder. La première étape est de créer un webhook pour chacun de ces services.

Préparer le scenario via Integromat

Créer un webhook sur Integromat

Rendez-vous sur https://www.integromat.com/.

Créez un compte, puis créez un nouveau scénario.

Sélectionnez Webhooks et cliquez sur le bouton Continue.

Dans la liste des Triggers (déclencheurs), sélectionnez Custom webhook :

Cliquez ensuite sur le bouton Add pour définir un nouveau webhook.

Dans la fenêtre, vous pouvez personnaliser le nom du webhook et cliquez sur Save.

De retour dans la précédente fenêtre, vous découvrez l'URL du webhook Integromat que vous pouvez copier dans votre presse papier. Elle ressemble à cela :

https://hook.integromat.com/iduhiohdzoudzouopdupdz

Elle vous sera indispensable pour configurer votre module HTTP dans PandaSuite.

Insérer le composant HTTP

Retour sur PandaSuite Studio. Cliquez sur Composants et insérez un composant HTTP.

Dans la fenêtre Propriétés, insérez l'URL du webhook dans le champ URL.

Choisissez comme méthode POST : cette méthode est utilisée pour envoyer de la donnée (ici, le numéro de téléphone).

Cliquez sur le bouton Editer le contenu et indiquez la valeur tapée dans le composant Saisie de texte. Nous avons utilisé tel à titre d'exemple mais vous pouvez changer la structure comme vous le souhaitez.

tel:[data:ID_TEXT_INPUT(/inputValue)]

Pour récupérer l'identifiant du composant (ID_TEXT_INPUT), double-cliquez sur le nom du composant dans la fenêtre Propriétés et collez la formule ainsi obtenue.

Envoyer le numéro à Twilio

Sélectionnez le bouton et créez une nouvelle action > Agir sur un composant > HTTP > Lancer la requête.

Lancez l'aperçu web et cliquez sur le bouton pour lancer une première fois la requête.

Finaliser le scenario

Maintenant que vous avez effectué une première requête, Integromat peut déterminer la nouvelle structure.

De retour dans votre scenario Integromat, un message apparaît : Successfully determined

Vous pouvez maintenant ajouter un nouveau module Twilio pour créer un message. Cliquez sur Add another module et sélectionnez Twilio.

Dans la liste des messages, choisissez Create a Message.

Choisissez le type de message que vous souhaitez envoyer : Send a message from phone number. Un numéro de téléphone émetteur est automatiquement généré.

Dans le champ To, vous retrouvez ici tel la valeur du numéro de téléphone envoyé depuis le composant Saisie de texte.

Dans le champ Body, saisissez le corps du texte.

Cliquez OK pour valider votre scénario.

Testez et voici le résultat :

Créer le scénario avec Zapier

Créer un webhook

Rendez-vous sur https://zapier.com/

Créez un compte, puis cliquez sur le bouton Make a Zap.

Dans la liste des Triggers (déclencheurs), recherchez Webhooks by Zapier.

Dans la liste des Trigger Event, sélectionnez Catch Hook et cliquez sur Continue.

Vous découvrez l'URL du webhook Zapier que vous pouvez copier dans votre presse papier. Elle ressemble à cela :

https://hooks.zapier.com/hooks/catch/1727973/dgiudgui/

Elle vous sera indispensable pour configurer votre module HTTP dans PandaSuite.

Insérer le composant HTTP

Retour sur PandaSuite Studio. Cliquez sur Composants et insérez un composant HTTP.

Dans la fenêtre Propriétés, insérez l'URL du webhook dans le champ URL.

Choisissez comme méthode POST : cette méthode est utilisée pour envoyer de la donnée (ici, le numéro de téléphone).

tel:[data:ID_TEXT_INPUT(/inputValue)]

Pour récupérer l'identifiant du composant (ID_TEXT_INPUT), double-cliquez sur le nom du composant dans la fenêtre Propriétés et collez la formule ainsi obtenue.

Lancer la requête & tester

Sélectionnez le bouton et créez une nouvelle action > Agir sur un composant > HTTP > Lancer la requête.

Lancez l'aperçu web et cliquez sur le bouton pour lancer une première fois la requête.

Finaliser le scenario

Maintenant que vous avez effectué une première requête, Zapier peut déterminer la nouvelle structure.

De retour dans votre scénario Zapier, un message apparaît : We found a request

Vous pouvez maintenant configurer une nouvelle action. Tapez et sélectionnez Twilio.

Dans la liste des Action Event, choisissez Send SMS.

Un numéro de téléphone émetteur est automatiquement généré.

Dans le champ To, vous retrouvez ici tel la valeur du numéro de téléphone envoyé depuis le composant Saisie de texte.

Tapez le corps du texte dans Message.

Testez et voici le résultat :

Ouvrir une pop-up après envoi du SMS

Dans notre exemple, nous souhaitons informer l'utilisateur que son SMS a bien été envoyé via l'affichage d'une pop-up. Concrètement il est possible de déclencher une action lorsque la requête HTTP est complétée.

Créez la pop up.

Sélectionnez le composant HTTP et l'événement déclencheur : Requête complétée. Sélectionnez l'action Agir sur un composant > Pop-up > Ouvrir la pop-up.