1. Mailjet
  2. Support
  3. Documentation

Widget d'abonnement

Sommaire

Comment ça marche ?

Le widget d’abonnement consiste en un formulaire d’inscription, un email de confirmation et une page de confirmation. Lorsqu’un utilisateur s’abonne sur votre site Web, un email de confirmation contenant un lien de redirection vers la page de confirmation lui est envoyé. Une fois qu’il confirme son inscription, son adresse email (et toute autre information collectée grâce au formulaire d’inscription) est ajoutée à votre liste de contacts.

Cerise sur le gâteau : il vous suffit de concevoir et de personnaliser le formulaire, l’email et la page dans l’outil de création de widgets. Mailjet génère le code du formulaire d’inscription et s’occupe du workflow.

N’hésitez pas à visionner notre tuto vidéo sur la création de widgets, ou restez sur cette page si vous préférez lire nos instructions pas à pas.

Votre site fonctionne sous WordPress ? N’hésitez pas à utiliser notre plugin pour WordPress qui vous permettra de créer un formulaire d’inscription, gérer vos contacts, créer vos campagnes et accéder à vos stats en temps-réel depuis votre tableau de bord WordPress !

Créer un widget

Dans Contacts, cliquez ensuite sur « Widget d'abonnement ».

Vous arrivez alors sur la page de gestion des widget, où seront listés tous ceux que vous aurez créés. Cliquez alors sur le bouton « Créer un nouveau widget ».

Ici, vous devrez sélectionner la façon dont votre widget sera disponible : préférez-vous un formulaire d’inscription directement intégré (embedded) à votre page, ou bien souhaitez-vous plutôt qu’il apparaisse dans une fenêtre flottante (pop-in)

Dans cet exemple, nous allons créer un widget « Pop-in ».

La page Édition d’un widget va alors s’ouvrir sur trois parties :

  • en haut
  • les paramètres de votre widget et les champs que devront renseigner vos inscrits
  • en bas l’aspect visuel de votre widget

[Revenir en haut]

Paramètres du widget

Dans cette section, vous devez saisir :

Nom du widget
Donnez un nom à votre widget : vous seul pourrez le voir sur votre compte.

Liste de contacts
Choisissez la liste à laquelle seront ajoutés vos abonnés.

Langue
Si vous le souhaitez, votre widget peut s’afficher dans une langue différente de celle de votre compte.

Création du bouton (Pop-in)
Concevez le bouton sur lequel devront cliquer vos visiteurs pour afficher le formulaire d’inscription, puis générez le code HTML que vous utiliserez pour l’afficher sur votre site.

Page de confirmation
Chaque nouvel abonné recevra un message de confirmation comprenant un lien pour valider son inscription. Par défaut, ce lien vous redirige vers la Page de confirmation via Mailjet que vous pouvez concevoir dans l’éditeur de widget. Si vous préférez utiliser votre propre page de confirmation sur votre site, cliquez sur « Utiliser une page de confirmation externe » et saisissez son URL.

[Revenir en haut]

Champs et messages
Champs widget

Subscription Widget

Si vous souhaitez que vos abonnés fournissent d’autres informations en plus de leur adresse email, il est possible d’ajouter jusqu’à 10 champs supplémentaires à votre formulaire d’inscription. Pour voir les propriétés de contacts actuellement disponibles, rendez-vous sur la page Contacts et cliquez sur « Propriétés des contacts ».

Ajouter un champ
Sélectionnez la variable de votre choix dans la liste, puis cliquez sur « Ajouter ».

Subscription Widget

Référence affichée
La référence qui sera affichée dans le formulaire d'inscription.

Rendre un champ obligatoire
Faites simplement glisser le curseur ‘Obligatoire’ pour l’activer. Par défaut, le champ « Adresse email » est obligatoire.

Subscription Widget

Changer l’ordre des champs
Par défaut, les champs apparaîtront dans le même ordre que dans l’outil. Pour déplacer un champ, cliquez sur l'icône à trois barres et effectuez un glisser-déposer.

Subscription Widget

Supprimer un champ
Pour supprimer un champ de votre formulaire, cliquez simplement sur ‘X’.

[Revenir en haut]

Notifications

Subscription Widget

Quand l'utilisateur valide votre formulaire d'abonnement, vous pouvez afficher des messages de notifications en fonction des évènements suivants :

  • Réussite de l’abonnement : affichez un message signalant que l'abonnement a bien été pris en compte. Notez que l'utilisateur ne sera pas ajouté à votre liste de contacts tant qu'il n'aura pas cliqué sur le lien de l'email d'activation.
  • Échec de l’abonnement : le message s'affiche si l'utilisateur est déjà inscrit à la newsletter.
  • IP sur liste noire : Mailjet limite le nombre maximum d'utilisateurs inscrits par adresse IP pour ne pas multiplier les envois. Ce message apparaît lorsque la limite est atteinte.

Pour activer ces messages, il vous suffit de cocher l'option, puis d'ajouter votre message personnalisé.

Subscription Widget

[Revenir en haut]

Création de votre formulaire

Voici la partie la plus amusante : concevez votre widget ! Notre éditeur vous permets de personnaliser facilement les éléments suivants :


TEXTE : Cliquez sur le texte que vous souhaitez modifier

COULEUR : Choisissez une couleur dans la barre d’outils puis faites-la glisser vers l’élément à modifier. Vous pouvez ajouter n’importe quelle couleur à la barre d’outils en cliquant sur +

Subscription Widget


ORIENTATION : Choisissez une orientation verticale ou horizontale pour votre widget

MODE EXPERT : Utilisez l’HTML à la place de la barre d’outils pour personnaliser votre widget. Attention, en fois en mode Expert vous ne pourrez pas revenir en arrière.

[Revenir en haut]

Le bouton

Notez que le bouton n’est disponible que pour les formulaires de type Pop-in. Le bouton apparaît sur votre site Web. Il suffit de cliquer dessus pour ouvrir le formulaire d’inscription.

Vous allez pouvoir choisir à quoi ressemblera votre bouton :

  • Ajoutez le texte de votre bouton et choisissez sa police de caractères
  • Choisissez une couleur d’arrière plan
  • Définissez la « rondeur » (rayon) des angles du bouton (0 = angles carrés)

[Revenir en haut]

Le formulaire d’inscription

Créez votre formulaire d’inscription en accord avec l’aspect de votre site Web en changeant les couleurs de chaque partie du formulaire (texte, bouton, arrière-plan) et en personnalisant la police.

Vous pouvez définir la mise en forme du formulaire pour votre widget pop-in :

Notez qu’il existe un mode "Expert" pour paramétrer votre formulaire en HTML : cliquez simplement sur pour y accéder, mais notez bien qu’il ne vous sera pas possible de revenir en arrière.

Pour un widget pop-in :

Pour un widget intégré :

[Revenir en haut]

Email de confirmation

Vous pouvez personnaliser l’email envoyé aux nouveaux abonnés en leur demandant de valider leur abonnement à votre newsletter. Il comprendra un bouton incluant un lien, qui dirigera les destinataires vers votre page de validation.

Éditez l’en-tête et le corps du texte. Souvenez-vous que le message doit juste servir à valider l’abonnement. Votre message doit rester bref et concis.

[Revenir en haut]

Page de confirmation

L'email de confirmation envoyé aux nouveaux abonnés contiendra un lien vers la page de confirmation. Si vous avez sélectionné « Utiliser une page de confirmation via Mailjet » dans la section « Paramètres du widget », vous pouvez utiliser l'éditeur en glisser-déposer :

  • Lui donner un titre et définir les couleur d’en-tête et d’arrière-plan
  • Modifier l'en-tête de la page et le corps du texte pour informer le nouvel abonné que sa confirmation a été réussie

Une fois que vous aurez personnalisé chaque élément, cliquez sur « Suivant » pour continuer vers la prochaine étape.

[Revenir en haut]

Mode expert (mode HTML avancé)

Le Mode expert est uniquement recommandé aux utilisateurs qui connaissent le code HTML.

En Mode expert, vous pouvez visualiser et éditer le code HTML du widget et ajouter des éléments avancés au formulaire, notamment des listes déroulantes, des boutons radio et des cases à cocher. L'interface du « Mode expert » n'est pas compatible avec le glisser-déposer. Le système de création de widgets est composé de fenêtres HTML :

Subscription Widget

Pour passer en « Mode expert », cliquez sur le bouton < / > dans la barre de création :

Subscription Widget

Remarque : une fois que vous passez en « Mode expert », vous ne pouvez pas revenir à l'interface en glisser-déposer.

[Revenir en haut]

Créer une liste déroulante

Cette fonctionnalité avancée est uniquement recommandée aux utilisateurs qui connaissent le code HTML.

Vous pouvez ajouter une liste déroulante à votre widget avec du code HTML en Mode expert.

Ajoutez d'abord un champ de type « String » qui servira de liste déroulante.

Subscription Widget

Créez et personnalisez tous les composants de votre widget (bouton, formulaire, email et page de confirmation) à l'aide de l’outil de création de widget.

Une fois cette étape terminée, passez en « Mode expert ». Remarque : une fois que vous passez en « Mode expert », vous ne pouvez pas revenir à l'interface en glisser-déposer.

Subscription Widget

Validez le message de confirmation pour activer le « Mode expert ».

Subscription Widget

Dans la fenêtre de code HTML, identifiez la propriété de contact qui servira de liste déroulante, car il faut effectuer des modifications dans le code :

Subscription Widget

Remplacez d'abord la balise “input” par “select” :


   <input id="w-preview-fields-content-cell-field-46229" type="text" ...

   devient:
                     
   <select id="w-preview-fields-content-cell-field-46229" type="text" ...

Ajoutez ensuite le code ci-dessous pour créer les options de la liste :

Subscription Widget

Explication :

  • Chaque ligne “option” crée une entrée dans la liste déroulante.
  • Le texte qui apparait dans la liste est situé entre chaque balise “option”.
  • La première option « En-tête déroulant » n'est pas sélectionnable : elle informe l'utilisateur sur la nature de la liste.
  • (facultatif) Le paramètre « Valeur » est transmis au serveur Mailjet si l'abonné choisit cette option.

Attention, veillez à ne pas changer les valeurs id et name dans la balise “select”. De manière générale, ne modifiez aucune balise dans le code HTML. Si vous éditez ces valeurs vous-même, les informations de l'utilisateur abonné ne pourront pas être transmises à Mailjet. Vous pouvez par contre modifier les sections CSS du code.

Exemple de code pour une liste déroulante de « tranches d'âge » :

Subscription Widget

Liste déroulante intégrée au widget :

Subscription Widget

Assurez-vous de tester votre widget en conditions réelles avant de l'intégrer à votre site.

[Revenir en haut]

Créer une case à cocher

Cette fonctionnalité avancée est uniquement recommandée aux utilisateurs connaissant le code HTML.

En Mode expert, vous pouvez ajouter des cases à cocher à votre widget. Pour chaque case, vous devez ajouter une propriété de contact de type « Bool ».

Dans cet exemple, nous allons créer un widget avec 2 cases à cocher pour permettre à l'utilisateur de choisir les sujets de la newsletter.

Subscription Widget

Commencez par ajouter les champs « Bool » à votre widget.

Subscription Widget

Créez et personnalisez tous les composants de votre widget (bouton, formulaire, email et page de confirmation) à l'aide de l’outil de création de widget. Une fois cette étape terminée, passez en « Mode expert ».

Subscription Widget

Remarque : une fois que vous passez en « Mode expert », vous ne pouvez pas revenir à l'interface glisser-déposer.

Validez le message de confirmation pour activer le « Mode expert ».

Subscription Widget

Dans la fenêtre de code HTML, identifiez les champs « Boolean » qui créeront les cases à cocher et effectuez les modifications suivantes :

Tout d'abord, modifiez le type de donnée de "text" à "checkbox", et ajoutez l'attribut : value="true"


   <input id="w-preview-fields-content-cell-field-46167" type="text" ...

   devient: 

   <input id="w-preview-fields-content-cell-field-46167" type="checkbox" value=”true” ...

Ensuite, dupliquez la ligne de code et changez le type en "hidden" et la valeur en "false" comme ci-après :

Subscription Widget

Pour ajouter une référence textuelle à côté d'une case à cocher, ajoutez la balise “label” directement après la balise “input” :

Subscription Widget

Remplacez ensuite « Field ID » par l'id de la balise “input” :

Subscription Widget

Pour changer l'apparence de la case à cocher, modifiez l'attribut « style » de la balise “input”. Dans cet exemple, l'attribut « style » a été supprimé pour afficher l'apparence par défaut de la case à cocher (petit format) :

Subscription Widget

Attention, veillez à ne pas changer les valeurs id et name dans la balise “select”. De manière générale, ne modifiez aucune balise dans le code HTML. Si vous éditez ces valeurs vous-même, les informations de l'utilisateur abonné ne pourront pas être transmises à Mailjet. Vous pouvez par contre modifier les sections CSS du code.

Exemple de code pour deux cases à cocher :

Subscription Widget

Cases à cocher intégrées au widget :

Subscription Widget

Assurez-vous de tester votre widget en conditions réelles avant de l'intégrer à votre site.

[Revenir en haut]

Récapitulatif du widget

Vous retrouverez sur cette page tous les paramètres du widget que vous venez de mettre en place (nom, liste de contacts, langue). Si vous souhaitez apporter un dernier changement, cliquez simplement sur le bouton Modifier les paramètres.

Entrez le nom de l’expéditeur et le sujet du mail dans la section Infos du mail de confirmation. Nous vous recommandons d’être le plus transparent possible et de faire en sorte que le sujet précise qu’il s’agit d’un mail de confirmation d’inscription.

Vous pouvez également avoir un aperçu de la page de confirmation ainsi que du mail de confirmation dans de nouvelles fenêtres.

Une fois que vous avez terminé, cliquez sur le bouton « Sauvegarder le widget » en bas à gauche de la page.

Bravo, vous venez de créer votre premier widget !

Il ne vous reste plus qu’à intégrer le code HTML du widget sur votre site. Il contient aussi bien le bouton d’inscription que la fenêtre du widget, tout ce que vous avez à faire est de le copier-coller sur votre site !

NB : le widget pop-in peut également apparaître depuis un lien hypertexte, une image ou n’importe quel élément HTML pouvant lancer une fonction Javascript. La deuxième fenêtre d’exemple vous montre un exemple de code pour un lien hypertexte.

[Revenir en haut]

Intégrer votre Widget dans WordPress

Vous pouvez ajouter le code de votre widget d’abonnement directement sur un post, une page, ou l’ajouter depuis le propre widget WordPress.

Pour notre exemple, nous allons créer une nouvelle page et ajouter un formulaire d’inscription.

Dans le menu, choisissez Pages → Ajouter

Subscription Widget

Entrez sur la page de titre, et collez le code de votre formulaire d’inscription dans l’onglet Texte.

Subscription Widget

Cliquez sur « Publier » et c’est fini ! Votre formulaire apparaîtra sur la nouvelle page.

Votre formulaire d’inscription peut également être ajouté à la barre latérale de votre WordPress via les Widgets Wordpress.

Dans le menu principal, cliquez sur Apparence → Widgets

Subscription Widget

La liste des widgets disponibles (archives, calendriers, menu, texte…) sera visible dans la barre de gauche de la page Widgets. Les emplacements disponibles sont affichés dans la partie droite de la page. Attention, tous les thèmes WordPress ne disposent pas tous du même nombre d’emplacements disponibles ! Pour notre thème, deux emplacements sont utilisables : la section de widget principale, et la section secondaire.

Subscription Widget

Pour afficher le formulaire d’inscription il faut ajouter le widget Texte. Cliquez dessus, puis choisissez son emplacement.

Subscription Widget

Collez ensuite le code HTML de votre formulaire dans la partie Contenu, puis cliquez sur Sauvegarder.

Subscription Widget

Et voilà ! Vous pouvez maintenant vérifier que le widget apparaît bien sur votre site.

[Revenir en haut]

Aperçu du Widget

Pour un aperçu rapide de votre formulaire d’inscription, rendez-vous sur la page « Gérez vos Widgets d’abonnement » puis passez votre souris sur la partie Gérer et cliquez sur l’icône du milieu.

Afficher le code du widget

Sur la même page, cliquez sur la deuxième icône lorsque vous passez votre souris sur Gérer.

Modifier un widget

Cliquez sur la dernière icône pour ouvrir l’outil d’édition de votre widget.

Dupliquer un widget

Cliquez sur l’avant-dernière icône.

Vous entrerez alors dans l’outil d’édition de votre widget, mais le widget que vous enregistrerez sera en fait le double de celui que vous avez sélectionné.

Supprimer un widget

Cliquez sur la première icône qui apparaît après être passé sur Gérer.

Pour supprimer plusieurs widgets, cochez leur case dans la liste puis cliquez sur la corbeille.

Dépannage

Si vous avez implémenté un widget sur votre site et qu’il s’arrêtre de fonctionner, vérifiez simplement que vous n’avez pas modifié ou supprimé la liste de contacts correspondante sur votre compte.

Si vous avez la moindre question concernant l’utilisation de votre widget, n’hésitez pas à contacter notre équipe Support !

[Revenir en haut]

Essayer Mailjet maintenant ?
Créez un compte - sans engagement, sans frais cachés