1. Mailjet
  2. Support
  3. Documentation

Widget d'abonnement

Sommaire

Comment ça marche ?

Concrètement, les personnes qui visitent votre site vont tomber sur un formulaire d’inscription qu’ils devront remplir pour recevoir votre newsletter. Un message de confirmation comportant un lien de validation leur sera alors envoyé, et ils arriveront alors sur une page confirmant que l’inscription est réussie. Mailjet vous permet de personnaliser chacune de ces étapes avec un outil très facile d’utilisation.

Veuillez noter que cette version du widget n’est disponible que pour les comptes créés après avril 2014

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.

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

Comment votre widget va-t-il fonctionner ?

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 le conduira vers la page de confirmation de Mailjet, mais rien ne vous empêche de créer une page de confirmation sur votre site et d’y mener vos abonnés.

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

Passons maintenant aux différentes parties du formulaire d’inscription :

[Revenir en haut]

Le bouton

Notez que le bouton n’est disponible que pour les formulaires de type "pop-in" : en effet, un formulaire intégré à une page web n’a pas besoin d’être appelé par un bouton, puisqu’il est déjà là ;)

Sur cet écran, vous allez pouvoir choisir à quoi ressemblera votre bouton :

  • Ajoutez le texte de votre bouton et choisissez sa police de caractères
  • Définissez la taille du bouton
  • Choisissez une couleur d’arrière plan

Une fois que vous avez trouvé la bonne formule, cliquez simplement sur « Sauver ».

[Revenir en haut]

Le formulaire d’inscription

Choisissez la couleur de chaque élément et faites-la glisser sur la partie désirée. Vous pouvez bien sûr ajouter de nouvelles couleurs, en cliquant sur + dans la barre d’outils.

Modifiez le texte en cliquant dessus, puis changez son aspect comme vous le souhaitez.

Créez des colonnes pour organiser vos champs personnalisés.

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 allez enfin pouvoir personnaliser le contenu du message qui permettra à vos inscrits 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 : il doit donc être court et très clair afin que de pas trop alourdir le processus pour vos inscrits.
  • Choisissez l’aspect du bouton de validation, qui comportera le lien vers votre page. Si le bouton ne fonctionne pas, l’URL de la page figurera juste en-dessous pour pouvoir être copiée-collée par les destinataires si besoin.

[Revenir en haut]

Page de confirmation

Il s’agit de la page vers laquelle vos nouveaux inscrits seront dirigés une fois qu’ils auront rempli le formulaire. Vous allez pouvoir :

  • Lui donner un titre
  • Définir les couleur d’en-tête et d’arrière-plan
  • Écrire le texte de votre choix. Essayez de faire le plus court possible, il s’agit simplement d’informer rapidement vos inscrits que leur abonnement est validé.

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

Subscription Widget

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

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

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.

Gérer vos listes de contacts

Gérer les propriétés de vos contacts

Passport

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