# Envoyer un SMS via Twilio
> Apprenez à envoyer un SMS via Twilio à partir de votre application en utilisant les services Zapier ou Integromat pour une intégration transparente avec PandaSuite.
https://docs.pandasuite.com/fr/essentials/integrations/send-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](https://www.twilio.com/) 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](https://www.twilio.com/) pour l'envoi des SMS (accès gratuit, [voir les tarifs](https://www.twilio.com/pricing))
- Avoir un compte [Zapier](https://zapier.com/) ou un compte [Integromat](https://www.integromat.com/) 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.
[Image : Aperçu de l'app Garden Guide : sur l'écran Invite a friend, un numéro est saisi dans l'encart Send an invite, au-dessus du bouton Send SMS]
## 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.
[Image : Saisie de texte Phone number placée dans l'encart Send an invite ; ses propriétés montrent le type Phone et la validation en direct sur No]
Personnalisez l'apparence de ce champ depuis la fenêtre **Propriétés**.
Laissez **Validation en direct** sur **Non** 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** et **Supprimer 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.
[Image : Bouton Send SMS sélectionné : un clic valide et efface le champ Phone number]
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 .
Créez un compte, puis créez un nouveau scénario.
Sélectionnez **Webhooks** et cliquez sur le bouton **Continue**.
[Image : Integromat, choix des services à intégrer : la recherche « webhook » propose Webhooks et WP Webhooks, à côté du bouton Continue]
Dans la liste des Triggers (déclencheurs), sélectionnez **Custom webhook** :
[Image : Liste des modules Webhooks d'Integromat : Custom webhook en tête des Triggers, avant Custom mailhook et l'action Webhook response]
Cliquez ensuite sur le bouton **Add** pour définir un nouveau webhook.
[Image : Fenêtre Webhooks du module Custom webhook dans Integromat : le champ Webhook est vide, avec le bouton Add pour en créer un]
Dans la fenêtre, vous pouvez personnaliser le nom du webhook et cliquez sur **Save**.
[Image : Fenêtre Add a hook d'Integromat : le webhook est nommé « My Panda Test » avant de cliquer 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.
[Image : Webhook My Panda Test dans Integromat : son URL hook.integromat.com s'affiche avec le bouton Copy address to clipboard]
### 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**.
[Image : Composant HTTP SMS request sélectionné : URL du webhook, méthode POST et contenu tel: lié à la valeur du champ de saisie]
Choisissez la méthode **POST** : elle est utilisée pour envoyer de la donnée (ici, le numéro de téléphone).
Dans le champ **Contenu**, tapez un libellé suivi de deux-points, par exemple `tel:`. Juste après le `:`, cliquez sur l'icône de data binding, choisissez **Depuis un composant**, cliquez sur la Saisie de texte dans votre écran (**Sélection interactive**), puis choisissez **Valeur de saisie**. Le contenu devient `tel:` suivi de la valeur en direct du composant Saisie de texte. Adaptez le libellé à ce que votre scénario attend.
### Envoyer le numéro à Twilio
Sélectionnez le bouton et ajoutez une action au **Tape clic** > **Agir sur un composant**. Cliquez sur le composant HTTP dans la liste des objets (**Sélection interactive**), puis choisissez **Lancer la requête**.
[Vidéo : le bouton Send SMS reçoit une action au tape clic, Agir sur un composant, qui cible SMS request puis 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**
[Image : Fenêtre Webhooks d'Integromat : le message Successfully determined confirme que la structure des données a été reconnue]
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**.
[Image : Actions du module Twilio dans Integromat : Create a Message en tête de la section Messages, au-dessus des actions d'appel]
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é.
[Image : Module Twilio dans Integromat : Send a message from sur phone number, numéro émetteur généré, valeur tel du webhook proposée pour To]
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.
[Image : Champs du message Twilio : To reçoit la valeur tel du webhook et Body le texte « Hello from PandaSuite! », avant de cliquer sur OK]
Cliquez **OK** pour valider votre scénario.
[Image : Scénario Integromat validé : module Webhooks relié au module Twilio Create a Message, et journal d'une exécution terminée]
Testez et voici le résultat :
[Image : Écran verrouillé d'un iPhone : notification du SMS « Hello from PandaSuite! » reçu grâce au scénario Integromat]
## Créer le scénario avec Zapier
### Créer un webhook
Rendez-vous sur
Créez un compte, puis cliquez sur le bouton **Make a Zap**.
Dans la liste des Triggers (déclencheurs), recherchez **Webhooks by Zapier**.
[Image : Zapier, étape 1. Trigger d'un Zap : la recherche « webhook » propose l'application Webhooks by Zapier, marquée Premium]
Dans la liste des Trigger Event, sélectionnez **Catch Hook** et cliquez sur **Continue**.
[Image : Déclencheur Zapier : application Webhooks by Zapier et Trigger Event sur Catch Hook, au-dessus du bouton 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.
[Image : Étape Customize Request du Catch Hook Zapier : l'URL du webhook hooks.zapier.com s'affiche avec son bouton Copy]
[Image : Étape Find Data du Catch Hook Zapier : Test your trigger demande d'envoyer une requête à l'URL du webhook, avec un bouton Test trigger]
### 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.
[Image : Le même composant HTTP pour le scénario Zapier : champ URL, méthode POST et contenu tel: lié à la valeur du champ de saisie]
Choisissez la méthode **POST** : elle est utilisée pour envoyer de la donnée (ici, le numéro de téléphone).
Dans le champ **Contenu**, tapez un libellé suivi de deux-points, par exemple `tel:`. Juste après le `:`, cliquez sur l'icône de data binding, choisissez **Depuis un composant**, cliquez sur la Saisie de texte dans votre écran (**Sélection interactive**), puis choisissez **Valeur de saisie**. Le contenu devient `tel:` suivi de la valeur en direct du composant Saisie de texte. Adaptez le libellé à ce que votre scénario attend.
### Lancer la requête & tester
Sélectionnez le bouton et ajoutez une action au **Tape clic** > **Agir sur un composant**. Cliquez sur le composant HTTP dans la liste des objets (**Sélection interactive**), puis choisissez **Lancer la requête**.
[Vidéo : pour le test Zapier, le bouton Send SMS reçoit Agir sur un composant, avec Lancer la requête sur le composant HTTP]
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**
[Image : Déclencheur Catch Hook de Zapier : le message We found a request! affiche la requête reçue, avec la valeur tel du numéro]
Vous pouvez maintenant configurer une nouvelle action. Tapez et sélectionnez **Twilio**.
Dans la liste des Action Event, choisissez **Send SMS**.
[Image : Action Zapier 2. Send SMS in Twilio : application Twilio et Action Event sur Send SMS, au-dessus du bouton Continue]
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.
[Image : Étape Customize Sms de Zapier : numéro émetteur dans From Number, et valeur Tel du Catch Hook proposée pour le champ To] Tapez le corps du texte dans **Message**.
[Image : Champs du SMS dans Zapier : To reçoit la valeur Tel du Catch Hook et Message le texte « Hello from PandaSuite! »] Testez et voici le résultat :
[Image : Résultat du scénario Zapier : le SMS « Hello from PandaSuite! » arrive en notification sur l'écran verrouillé d'un iPhone]
## 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.
[Image : Pop-up SMS sent pop-up en cours d'édition : la carte « Your invite has been sent! » sur l'écran Invite assombri, avec les propriétés 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**.
[Image : Actions du composant HTTP SMS request : sur le déclencheur Requête complétée, l'action Ouvrir la pop-up cible SMS sent pop-up]