Widget d'abonnement

N.Makarov

18 juin 2020 08:26
Mise à jour

Sommaire

Comment ça marche ?
Créer un widget
Aperçu du Widget
Afficher le code du widget
Modifier un widget
Dupliquer un widget
Supprimer un widget
Dépannage
Liens utiles

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.

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 !

Dans le menu, sélectionnez Contacts → 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]

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]

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 ».

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.

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.

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

Recueillir le consentement explicite de vos abonnés pour être conforme au RGPD

Afin d’être conforme au RGPD, vous devez inclure dans votre widget d’abonnement une case à cocher pour recueillir le consentement de vos utilisateurs. Ces derniers devront cocher cette case s’ils souhaitent s’inscrire à votre newsletter.

Lorsqu'un utilisateur s'abonne à votre newsletter, les informations concernant son consentement (nom du widget et texte de consentement) seront ajoutées à son profil.

[Revenir en haut]

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é.

[Revenir en haut]

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 +

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]

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]

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]

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]

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]

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 :

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

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

[Revenir en haut]

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.

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.

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

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 :

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 :

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 » :

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

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

[Revenir en haut]

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.

Commencez par ajouter les champs « Bool » à votre 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 glisser-déposer.

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

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 :

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

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

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) :

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 :

Cases à cocher intégrées au widget :

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

[Revenir en haut]

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]

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

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

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

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.

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

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

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

[Revenir en haut]

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.

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

Cliquez sur la dernière icône pour ouvrir l’outil d’édition de votre 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é.

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.

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]

Réalisé par Zendesk