fbpx

Envoyez des SMS depuis votre site web avec cette astuce. (guide détaillé)


Envoyez des SMS depuis votre site web avec cette astuce. (guide détaillé) Envoyez des SMS depuis votre site web avec cette astuce. (guide détaillé)

Envoyer des SMS depuis votre site web avec Twilio est relativement facile, tout dépend du langage de programmation que vous utilisez. Le marketing par courriels et appels téléphoniques a perdu sa cote. En effet, une étude a démontré que le taux d’ouverture des courriels a grandement baissé ces dernières années. Si vous possédez un site web et que vous avez l’intention d’essayer le marketing par SMS comme moyen supplémentaire de cibler les clients, cet article est pour vous.

Dans le présent guide, nous vous montrerons comment envoyer des SMS depuis votre site web avec Twilio. Vous serez donc capable d’ajouter le SDK Twilio à votre projet afin d’intégrer un formulaire pour envoyer des SMS. Vous verrez également comment obtenir un numéro Twilio et une API pour votre projet.

À qui s’adresse ce tutoriel

Notre article est destiné à trois types de profils:

  • Les développeurs — qui souhaitent apprendre la procédure (pour cela, suivre les étapes).
  • Les propriétaires d’entreprise — qui n’ont pas assez de temps et veulent une solution utilisable (Télécharger le code).
  • Les individus quelconques — qui sont curieux et désireraient en savoir plus.

Prérequis pour les développeurs

Pour suivre ce tutoriel et l’appliquer facilement à votre projet, vous devez au préalable respecter quelques critères. En effet, vous devez :

  • Posséder des compétences de base en PHP.
  • Comprendre le fonctionnement des balises HTML.
  • Avoir quelques compétences en matière de programmation web.

Pour un propriétaire d’entreprise

Si vous le souhaitez, vous pouvez lire l’article pour comprendre comment ça fonctionne. Toutefois, nous avons prévu deux options pour vous aider:

Veuillez nous contacter si vous avez des questions.

Obtenez une copie du code d'envoi des SMS à partir de votre site. Le code est prêt à l'usage et documenté


La procédure pour développeurs afin d’intégrer l’envoi des SMS

Pour être en mesure d’envoyer des SMS depuis votre site, vous devez suivre les étapes ci-dessous.

Étape 1 – Créer un compte Twilio et obtenir les paramètres de configuration

Pour commencer, vous devez créer un compte Twilio et acquérir certains paramètres tels que : le SID API, le code d’authentification API et le numéro de téléphone. Par exemple, dans votre tableau de bord, vous pouvez créer des informations d’authentification API pour votre projet. Lorsque vous vous inscrirez, vous acquérez un numéro de téléphone personnalisé que vous pourrez par la suite utiliser pour automatiser l’envoi de SMS.

Comment créer un compte Twilio

Pour créer un compte Twilio, rendez-vous sur le site twilio.com et cliquez sur « s’inscrire ». Ensuite, un formulaire d’inscription qui vous donne la possibilité d’essayer gratuitement apparaîtra. L’étape suivante consistera à saisir votre adresse électronique, ensuite un mot de passe. Vous recevrez par la suite une demande confirmation par courriel. Alors, vous n’aurez qu’à approuver votre compte pour y accéder. Dans un premier temps, vous disposerez d’un crédit gratuit que vous pourrez utiliser pour envoyer des SMS depuis votre site ou pour bénéficier d’autres services Twilio.

Envoyez des SMS depuis votre site web avec cette astuce. (guide)

Remarques

La procédure de création d’un compte sur Twilio varie parfois selon de leurs conditions générales. Je vous conseille de suivre et de lire les étapes de la procédure d’inscription.

Obtenir le SID de l’API et le code d’authentification

Connectez-vous à votre compte, votre tableau de bord (la console) s’affichera. Vous trouverez alors votre compte SID ainsi que votre code d’authentification en défilant la page jusqu’en bas.

Envoyer des SMS depuis votre site web avec cette astuce. (guide)

Enfin, copiez ces deux informations pour votre projet.

Acquérez votre numéro de téléphone Twilio

Tous nouveaux utilisateurs peuvent acquérir un numéro de téléphone d’essai gratuit pour Twilio. Pour cela, cliquez juste sur le bouton « obtenir un numéro de téléphone» sur l’accueil du tableau de bord.

Envoyer des SMS depuis votre site web avec cette astuce. (guide)

De plus, si vous souhaitez payer pour un numéro de téléphone, suivez le menu «Phone numbers>Manage>Buy a number». Vous pourrez par la suite consulter vos numéros de téléphone en allant dans le menu de gauche et en suivant «Phone numbers>Manage>Active numbers». Notez que le site s’affiche en anglais. Toutefois, vous pouvez opter pour lire un guide en français en cliquant sur « démarrer ici»

Étape 2 – Les classes PHP de Twilio

Grâce aux classes PHP ou au SDK, vous pourrez facilement interagir avec les API. Pour le téléchargement, vous avez le choix entre le faire manuellement ou utiliser le Compositeur. Dans ce cas, nous recommandons d’habitude le Compositeur. En effet, ce dernier se télécharge avec toutes les mises à jour. Aussi, faire une mise à jour manuelle apporte le risque de tomber sur une mise à jour obsolète ou manquant de dépendance. Toutefois, nous allons voir comment utiliser les deux approches :

Télécharger avec le Compositeur et générer le fichier «Composer.phar».

Vous trouverez plus d’informations sur l’utilisation du Compositeur sur le site getcomposer.org. Vous y trouverez donc des instructions ainsi qu’une documentation détaillée sur la manière d’utiliser le compositeur dans le cadre d’un projet.

Notez que vous devez avoir accès à la ligne de commande pour utiliser et télécharger le compositeur.

Voici les étapes générales à suivre:

  • Sur le site web getcomposer.org, cliquez sur le bouton «Getting Started». Vous verrez la documentation pour créer le fichier composer.phar.
  • Via la ligne de commande, exécutez le code ci-dessous.

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('sha384', 'composer-setup.php') === 'e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Notez que vous devrez peut-être changer la version du sha256 en fonction de la version actuelle. Consultez l’article s’y référant dans le site getcomposer.org pour plus de détails.

L’exécution du code ci-dessus générera le fichier composer.phar. Ainsi, il ne vous restera plus qu’à générer le fichier composer.json

Générer le fichier composer.json pour télécharger le SDK Twilio

Si vous souhaitez avoir plus d’informations sur la façon de créer le fichier composer.json, référez-vous à la documentation officielle. Pour ce tutoriel, il vous suffit de créer le fichier composer.json et de coller le code suivant.


{
    "require": {
        "twilio/sdk": "^6.5"
    }
}

Ensuite, à partir de la ligne de commande, exécutez l’instruction

composer require twilio/sdk

Si vous suivez attentivement les instructions, vous verrez quelques fichiers PHP pour vos projets ainsi qu’un nouveau dossier nommé vendor dans votre répertoire principal.

Inclure le Twilio SDK dans votre projet

Si jusqu’ici toutes les étapes ont été sans encombre, vous pouvez alors intégrer le SDK, et commencer l’envoi des SMS depuis votre site web. Le code ci-dessous vous aidera à envoyer des SMS à n’importe quel destinataire depuis votre site web.


<?php
// Required if your environment does not handle autoloading
require __DIR__ . '/vendor/autoload.php';

// Use the REST API Client to make requests to the Twilio REST API
use Twilio\Rest\Client;

// Your Account SID and Auth Token from twilio.com/console
$sid = 'ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$token = 'your_auth_token';
$client = new Client($sid, $token);

// Use the client to do fun stuff like send text messages!
$client->messages->create(
    // the number you'd like to send the message to
    '+15558675309',
    [
        // A Twilio phone number you purchased at twilio.com/console
        'from' => '+15017250604',
        // the body of the text message you'd like to send
        'body' => 'Hey Jenny! Good luck on the bar exam!'
    ]
);
?>
Instructions pour utiliser code
  • Remplacez-le SID (ligne 9) ainsi que le code (ligne 10) par les identifiants que vous avez obtenus à l’étape 1.
  • Remplacez ensuite le numéro de téléphone de la ligne 16 par le numéro de téléphone du destinataire du SMS.
  • Enfin, à la ligne 19, remplacez le numéro de téléphone par votre numéro de téléphone Twilio.

Étape 3 – Créer un formulaire pour envoyer des SMS à partir de votre site web

Ayant à présent le code pour envoyer un SMS, vous pouvez opter pour la création d’un formulaire qui vous évitera de faire des envois manuels. Par exemple, avec le code ci-dessus, vous pouvez modifier le message, le numéro de téléphone du destinataire pour envoyer le SMS. Toutefois, si vous souhaitez automatiser le processus, vous devez créer un formulaire à partir de votre tableau de bord. Nous vous proposons ci-dessous un exemple de formulaire que vous pouvez utiliser.

Exemple de code HTML-index.html

Le code HTML correspondant au formulaire ci-dessus est le suivant.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Send SMS</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Send an SMS</h2>
  <form action="sendsms.php" method="POST">
    <div class="form-group">
      <label for="email">Send SMS to (Phone number)</label>
      <input type="tel" class="form-control"  placeholder="Enter the phone number" name="phonenumber">
    </div>
    <div class="form-group">
      <label for="pwd">Send SMS to (Name)</label>
      <input type="text" class="form-control"  placeholder="Enter the name" name="receiverrname">
    </div>
    <div class="form-group">
      <label>
         Message to send
      </label>
      <textarea  class="form-control" placeholder="your message" name="receivermsg"></textarea>
    </div>
    <button type="submit" class="btn btn-primary form-control">Submit</button>
  </form>
</div>

</body>
</html>

Exemple de code de fichier d’action PHP-sendms.php

En plus du code HTML, vous recourrez à un fichier d’action (PHP) qui recevra une variable et l’enverra au destinataire du SMS. Votre PHP d’action pourrait être semblable au code ci-dessous :


<?php
function removespecials($data) {
   $data =  strip_tags($data);
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
$receiverNumber=removespecials($_POST['phonenumber']);
$receiverName=removespecials($_POST['receiverrname']);
$receivermsg=removespecials($_POST['receivermsg']);
$message="Hello ".$receiverName." \n  ".$receivermsg;
// Required if your environment does not handle autoloading
require __DIR__ . '/vendor/autoload.php';

// Use the REST API Client to make requests to the Twilio REST API
use Twilio\Rest\Client;

// Your Account SID and Auth Token from twilio.com/console
$sid = 'ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
$token = 'your_auth_token';
$client = new Client($sid, $token);

// Use the client to do fun stuff like send text messages!
$client->messages->create(
    // the number you'd like to send the message to
    $receiverNumber,
    [
        // A Twilio phone number you purchased at twilio.com/console
        'from' => '+15017250604',
        // the body of the text message you'd like to send
        'body' => $message
    ]
);
?>

Conclusion

Le processus d’envoi de SMS depuis votre site web est assez simple avec Twilio. Vous pouvez l’utiliser avec divers langages de programmation. Par ailleurs, si vous avez des compétences dans le développement de plugins ou d’extensions, Twilio propose la possibilité le convertir en une extension CMS. En cas de questions, Veuillez nous contacter, ce sera un plaisir de vous aider.

Gilblas Ngunte Possi

Gilblas Ngunte Possi

Fondateur et Développeur Full-Stack chez Prositeweb.

Ma maîtrise des outils modernes, combinée à un sens d’analyse approfondi des technologies de l’information, me permet d’offrir un accompagnement de qualité dans la conception et la mise en place de vos solutions web.

Laisser un commentaire

Votre adresse courriel ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Gilblas Ngunte Possi

Gilblas
Répond généralement dans 1 heure

Gilblas
Salut👋

Comment puis-je vous aider?
1:40
Discutez avec nous