Ce tutoriel vous expliquera comment intégrer un formulaire d’inscription aux newsletters dans une fenêtre contextuelle avec le module Probance pop-ups.
Pré-requis:
- Le module Probance pop-ups doit être installé sur votre projet.
- Le formulaire d’inscription newsletter de Probance doit être configuré dans votre back-office Woocommerce avant de poursuivre. Consultez notre guide dédié pour savoir comment procéder.
1. Créer la pop-up
Pour créer une nouvelle pop-up, ouvrez le menu Probance pop-ups et cliquez sur Add new.
- Dans le champ Titre, saisissez le nom de votre pop-up.
- Dans l’éditeur, saisissez le contenu de votre pop-up. Intégrez ici le short code du formulaire d’inscription à la newsletter avec les paramètres que vous souhaitez lui afficher dans cette version.
Vous pouvez également inclure d’autres éléments à votre pop-up, comme des titres ou des textes, et le mettre en forme dans l’éditeur. L’onglet Texte vous permet de passer l’éditeur en mode HTML et d’organiser le contenu de votre pop-up avec plus de souplesse.
Important : si le shortcode est déjà utilisé ailleurs dans votre site, ajoutez un paramètre id et incrémentez le à chaque intégration. Utilisez par exemple [probance_newsletter id=’1′]
- Dans la liste Displayed on pages de la section Displaying, cochez les pages du site dans lesquelles la pop-up doit s’afficher. Nous vous conseillons de ne pas cocher les pages dans lesquelles le formulaire est déjà intégré.
- Toujours dans la section Displaying, cochez l’option Check optin. Celle-ci vous permet de restreindre l’affichage de la pop-up aux visiteurs qui ne sont pas identifiés comme inscrits à la newsletter..
- Dans le champ Displaying trigger de la section Custom style, sélectionnez le mode de déclenchement de la pop-up. 3 options sont disponibles :
- Delay : la pop-up s’affiche après d’une certaine durée sur la page. Renseignez le temps d’attente avant l’affichage dans le champ Delay, en secondes
- Scroll : la pop-up s’affiche lorsque le visiteur atteint un niveau de défilement dans la page. Renseignez le niveau de défilement dans le champ Scroll, en pourcentage.
- Manual : ce mode vous permet d’annuler l’affichage automatique de la pop-up, afin de définir votre propres déclencheurs au niveau de votre thème.
- Dans le champ Frequency of display, spécifiez le délai d’attente entre deux affichages de la pop-up pour un même visiteur. Cette durée peut être définie en minutes, en heures ou en jours.
- Cliquez sur Enregistrer le brouillon ou Publier pour sauvegarder vos modifications.
Note : Une pop-up publiée ne s’affichera pas aux visiteurs tant qu’elle n’est pas activée.
Vous pouvez générer un aperçu de votre pop-up pendant sa construction à tout moment en cliquant sur Prévisualiser.
2. Configurer une image
La section Image settings vous permet de configurer une image, qui sera affichée dans la pop-up, à droite ou à gauche du contenu.
- Cliquez sur Upload pour sélectionner une image dans votre galerie, ou en importer une de votre répertoire.
- Dans le champ Image position, sélectionnez où l’image sera placée par rapport au contenu.
- Les champs Width et Height vous permettent de spécifier les dimensions de l’image dans la pop-up. Vous pouvez saisir des valeurs en pixels ou en pourcentages.
- Pour générer un aperçu de la pop-up avec l’image, cliquez sur Prévisualiser.
- Cliquez sur Enregistrer le brouillon ou Publier pour sauvegarder vos modifications.
3. Modifier l’apparence de la pop-up
Par défaut, la pop-up construite avec le module reprend les styles de votre thème WordPress. Si des règles de style sont définies dans la page de configuration de votre formulaire, celle-ci sont également appliquées dans la pop-up.
Vous pouvez ajouter des règles de style à vos pop-up via le menu Custom CSS: cette section vous permet de définir du CSS à appliquer sur vos pop-ups, sans avoir à modifier votre thème wordpress.
4. Activer la pop-up
Dans la page d’édition de votre pop-up, cochez l’option Enabled dans la section Displaying.
Si la pop-up est toujours au statut brouillon, cliquez sur Publier. Sinon, cliquez sur Mettre à jour pour sauvegarder votre modification.