Contenu des pop-ups web

Le contenu des pop-ups web est la mise en page visuelle que les visiteurs voient lorsqu’un pop-up web apparaît sur votre site web. Créez-le dans Contenu, puis associez-le à une campagne de pop-ups web.

Créer un contenu de pop-up web

Allez dans Contenu → Contenu des pop-ups web.
Cliquez sur Créer un contenu de pop-up web.
Choisissez un modèle de départ dans la galerie. Utilisez le menu déroulant des catégories en haut à droite pour filtrer par cas d’utilisation (par exemple Promotions & offers, Gaming & marketplaces, ou Feedback & surveys), ou laissez-le sur All templates. La catégorie Blank layouts contient les points de départ simples, y compris Modal + subscription form, qui est livré avec un bloc de formulaire d’abonnement déjà en place.

Une fois que vous avez choisi un modèle, personnalisez le pop-up dans l’éditeur.

Nommer le pop-up

Cliquez sur le nom du pop-up dans la barre supérieure pour le modifier. Le nom identifie ce contenu à l’intérieur de Pushwoosh, dans la liste de contenu et dans l’assistant de campagne. Les visiteurs du site web ne le voient pas.

Modifier les paramètres du pop-up

Ajustez l’apparence et la position du pop-up dans le panneau des paramètres à gauche du canevas :

Images et vidéo

Si la mise en page inclut un ou plusieurs blocs multimédias, chacun dispose de son propre bloc en haut du panneau avec un aperçu et des commandes.

Cliquez sur Change image pour choisir un fichier dans la Médiathèque de votre projet, ou réglez Media sur Video pour lire une vidéo au lieu d’une image statique.

Sous l’aperçu :

Media : Image ou Video.
Fit : comment l’image ou l’affiche remplit son cadre : Natural, Cover ou Contain. Non affiché pour une image de fond, qui couvre toujours sa zone.
Blur : adoucir l’image ou l’affiche, de 0 à 20 px.
Dim : médias de fond uniquement. Ajoute un voile sombre sur l’image ou la vidéo pour que le texte placé dessus reste lisible, de 0 à 100 %.

Régler Media sur Video ajoute quatre champs supplémentaires :

Video URL : un lien direct vers le fichier vidéo. La vidéo n’accepte qu’une URL externe. Vous ne pouvez pas télécharger de vidéo dans la Médiathèque. Exportez-la en MP4 (vidéo H.264, audio AAC) avec le “démarrage rapide” activé (parfois appelé “optimisé pour le web”), afin que le navigateur puisse commencer la lecture avant que le fichier entier ne soit téléchargé. Si l’URL ne se charge pas, les visiteurs ne voient que l’affiche.
Loop : rejouer la vidéo en continu au lieu de s’arrêter après une lecture.
Show controls : afficher les commandes de lecture, de pause et de volume intégrées du navigateur. Les vidéos commencent toujours en sourdine, et sans cette option, les visiteurs n’ont aucun moyen d’activer le son.
Poster URL : l’image affichée pendant le chargement de la vidéo. C’est facultatif mais recommandé : c’est aussi la seule chose montrée à un visiteur dont le navigateur exécute encore un ancien script de pop-up qui ne prend pas en charge la vidéo, donc le laisser vide signifie que ce visiteur ne voit rien là où la vidéo devrait être.

Certaines mises en page ajoutent également une section Layout avec des paramètres de placement pour le bloc multimédia :

Image width : part de la largeur du pop-up, en pourcentage.
Image position : Left ou Right, pour les mises en page avec des médias à côté du texte.

La section Layout n’apparaît que lorsque la mise en page actuelle a des paramètres comme ceux-ci. Sur une mise en page en barre inférieure, elle propose Buttons width au lieu des commandes d’image.

Taille et style du pop-up

Dans la section Popup :

Width, Height (empty = auto) : laissez les deux vides pour un pop-up qui s’adapte à son contenu, ou définissez une taille fixe en pixels. Dans un pop-up à plusieurs pages, chaque page a sa propre taille.
Corner radius, Shadow : l’arrondi des coins et l’ombre portée du pop-up.
Animation : comment le pop-up apparaît : None, Fade ou Slide.

Couleurs

Cliquez sur Colors pour développer la palette de couleurs du pop-up :

Background, Accent (buttons) : l’arrière-plan du pop-up et la couleur d’accentuation appliquée aux boutons.
Text, Secondary text : la couleur du corps du texte et du texte secondaire tel que les légendes et les chapeaux.
Text over image : affiché uniquement pour les mises en page avec du texte sur une image de fond. Définit la couleur utilisée pour ce texte.

Mode sombre

Activez le Mode sombre pour donner au pop-up une deuxième palette pour les visiteurs dont l’appareil est réglé sur un thème de couleurs sombres. S’il est désactivé, le pop-up s’affiche toujours avec la palette claire ci-dessus, pour chaque visiteur.

Une fois le Mode sombre activé :

Utilisez le sélecteur Light / Dark au-dessus des champs de couleur pour choisir la palette que vous modifiez. Le canevas se redessine dans ce thème, vous pouvez donc vérifier le pop-up tel qu’il apparaîtra réellement dans chaque mode.
Cliquez sur Auto from light pour (re)générer la palette sombre à partir des couleurs claires actuelles : les surfaces deviennent sombres et le texte devient clair, tandis que Accent et Text over image sont conservés sans changement. Modifiez l’un des cinq champs par la suite pour affiner le résultat.
Désactiver le Mode sombre ne supprime pas la palette sombre — elle est conservée, donc la réactiver restaure vos modifications au lieu de la régénérer à partir de zéro.

Le navigateur d’un visiteur décide de la palette qu’il voit, en fonction du paramètre de mode sombre de son système d’exploitation — il n’y a pas de bascule clair/sombre sur le pop-up lui-même. Un site peut forcer un thème pour tout le monde, quel que soit le paramètre du système d’exploitation ; voir webPopups.colorScheme dans la documentation du SDK Web.

Placement et superposition

Dans la section PLACEMENT :

Position : choisissez où le pop-up s’ancre sur la page à l’aide de la grille 3×3.
Edge offset : définissez la distance en pixels par rapport au bord sélectionné.

Dans la section OVERLAY :

Dim the page behind : activez pour assombrir le reste de la page pendant l’affichage du pop-up.
Color, Opacity : définissez la couleur et l’opacité de la superposition de 0 à 1.

Modifier le texte

Cliquez sur n’importe quel bloc de texte sur le pop-up pour le modifier en ligne. Une barre d’outils apparaît au-dessus :

Appliquez une mise en forme gras, italique ou souligné.
Ajoutez ou supprimez un lien.
Définissez l’alignement à gauche, au centre ou à droite.
Choisissez un style de texte : Icon, Eyebrow, Heading 1–3, Body ou Caption.

Modifier les boutons

Cliquez sur un bouton pour ouvrir sa barre d’outils :

Choisissez le style du bouton : Primary ou Secondary.
Choisissez ce que fait le bouton :
- Ouvrir un lien : entrez l’URL cible.
- Fermer le pop-up.
- Aller à la page : choisissez une autre page du pop-up vers laquelle basculer. Cette option apparaît une fois que le pop-up a plus d’une page. Voir Travailler avec plusieurs pages.

Ajouter un formulaire d’abonnement

Ajoutez un bloc Subscription form pour collecter les inscriptions par e-mail et d’autres champs directement dans le pop-up. En savoir plus sur les formulaires d’abonnement.

Ajouter le bloc

Sélectionnez un bloc de texte, un bouton ou un autre élément sur le canevas.
Cliquez sur Add dans sa barre d’outils.
Choisissez Subscription form. Le bloc apparaît immédiatement avec un champ Email par défaut et un bouton Subscribe.

Choisir une source de formulaire

Cliquez sur le bloc du formulaire d’abonnement pour ouvrir la barre d’outils FORM. Son premier menu déroulant lie le bloc à un formulaire d’abonnement dans votre projet. Vous pouvez créer un nouveau formulaire ou en choisir un qui existe déjà :

Option	Quand l’utiliser
Nouveau formulaire — créé à l’enregistrement (par défaut)	Démarrage le plus rapide : Pushwoosh crée le formulaire pour vous lorsque vous enregistrez le pop-up, nommé “nom du pop-up — pop-up web”.
+ Créer un nouveau formulaire…	Vous voulez nommer le formulaire et le configurer avant d’enregistrer le pop-up. Ouvre une boîte de dialogue Nouveau formulaire d’abonnement — entrez un Nom, puis définissez ses Champs, son texte de Soumission et sa Confidentialité de la même manière que ci-dessous, et cliquez sur Créer.
Un formulaire existant dans le menu déroulant	Réutilisez un formulaire qui a déjà des abonnés ou une double confirmation configurée.

Définir les champs et le comportement de soumission

Définissez le Style du bouton de soumission dans la barre d’outils FORM :
- Primary : bouton plein avec la couleur Accent du pop-up. Idéal lorsque S’abonner est l’action principale de la page.
- Secondary : bouton avec contour, une bordure et une étiquette de couleur d’accentuation. Idéal lorsque le pop-up a déjà un bouton principal ou que vous souhaitez un aspect plus léger.
Activez Privacy pour ajouter une ligne de consentement à la confidentialité sous le formulaire, puis entrez l’URL de votre politique de confidentialité dans le champ qui apparaît.

Cliquez sur Fields… pour ouvrir une fenêtre contextuelle où vous pouvez conserver Email (toujours requis) et ajouter First name, Last name, Phone ou Custom, et définir les textes Success et Confirm email affichés après la soumission d’un visiteur.

Ajouter un compte à rebours

Ajoutez un bloc Countdown pour créer un sentiment d’urgence avec une date limite qui décompte en direct sur le pop-up.

Sélectionnez un bloc de texte, un bouton ou un autre élément sur le canevas.
Cliquez sur Add dans sa barre d’outils et choisissez Countdown.
Cliquez sur le compte à rebours pour ouvrir sa barre d’outils :
- Deadline : la date et l’heure auxquelles le compte à rebours atteint zéro.
- Time zone : le fuseau horaire dans lequel la date limite est lue. Laissez-le vide pour UTC.
- Language : la langue des étiquettes d’unité (jours, heures, etc.). Laissez-le sur English (default) ou choisissez parmi 13 autres langues.
- Labels : activez pour afficher les étiquettes d’unité à côté des chiffres.
- Lorsque la date limite est passée :
  - Afficher des zéros : le compte à rebours continue d’afficher 00:00:00.
  - Ne pas afficher le pop-up : le pop-up entier est ignoré une fois la date limite passée.
  - Aller à la page : passez à une autre page du pop-up lorsque la date limite est passée. Proposé uniquement une fois que le pop-up a plus d’une page — choisissez la page cible dans le menu déroulant qui apparaît. Voir Travailler avec plusieurs pages.

Ajouter une icône

Ajoutez un bloc Icon pour insérer un petit pictogramme — un signe de pourcentage pour une vente, un cadeau pour un drop — à côté de votre texte.

Sélectionnez un élément, cliquez sur Add, et choisissez Icon.
Cliquez sur l’icône pour ouvrir sa barre d’outils :
- Icon : choisissez parmi un ensemble fixe de 20 icônes (cloche, cadeau, panier, graphique, cadenas, calendrier, coche, étoile, horloge, étiquette, courrier, téléphone, téléchargement, lecture, bouclier, étincelle, pourcentage, camion, ticket, utilisateur). Les téléchargements d’icônes personnalisées ne sont pas pris en charge.
- Size : 24, 32 ou 48 px.
- Accent : activé par défaut, pour que l’icône corresponde à la couleur d’accentuation du pop-up. Désactivez-le pour choisir une couleur personnalisée.

Ajouter un sélecteur de sujet

Ajoutez un bloc Topic picker pour permettre aux visiteurs de sélectionner eux-mêmes leurs centres d’intérêt sous forme de cases à cocher ou de puces. Leurs choix sont écrits dans un tag sur leur appareil.

Ajouter le bloc et lier un tag

Sélectionnez un élément, cliquez sur Add, et choisissez Topic picker. Il arrive avec deux options de remplacement et aucun tag lié — il n’écrira rien tant que vous n’en aurez pas choisi un.
Cliquez sur le bloc pour ouvrir sa barre d’outils. Le premier menu déroulant le lie à un tag de type Liste dans votre projet — choisissez-en un existant, ou choisissez Créer un tag de liste pour en créer un sans quitter l’éditeur.

Définir les options et les limites

Toujours dans la barre d’outils :

Control : affichez les options sous forme de Cases à cocher ou de Puces.
Minimum / Maximum picks : combien d’options un visiteur doit ou peut sélectionner. 0 à chaque extrémité signifie aucune limite — bien qu’au moins un choix soit toujours requis pour soumettre, même avec un minimum de 0. Choisir au-delà du maximum, ou essayer de soumettre en dessous du minimum, affiche un message en ligne à côté du bloc au lieu d’envoyer quoi que ce soit.
Cliquez sur Options pour ouvrir le panneau des options :
- Modifiez le Label de chaque option (ce que le visiteur lit) et la Tag value (ce qui est écrit dans le tag). Laissez Tag value vide et Pushwoosh écrit l’ID interne de l’option à la place (option-1, option-2, etc.) — remplissez-le si vous avez besoin d’une valeur lisible dans le tag.
- + Option ajoute une autre ligne, jusqu’à 12 options au total.
- Définissez le Label du bouton et le Message après envoi.

Ajouter une évaluation

Ajoutez un bloc Rating pour collecter une note rapide — NPS, étoiles ou pouces — en tant qu’événement personnalisé.

Ajouter le bloc et définir l’événement

Sélectionnez un élément, cliquez sur Add, et choisissez Rating. Il arrive sans événement défini — il n’enverra rien tant que vous n’en aurez pas choisi un.
Cliquez sur le bloc pour ouvrir sa barre d’outils et choisissez un Événement parmi les événements existants de votre projet, ou choisissez Créer un événement pour en définir un nouveau sans quitter le pop-up — Pushwoosh le configure avec les attributs score, scale et slotKey que le bloc envoie. Le score est publié sur Pushwoosh en tant que cet événement — utilisez-le dans des segments ou des Customer Journeys de la même manière que n’importe quel autre événement.

Si un événement lié au bloc est renommé ou supprimé ultérieurement ailleurs — ou a été tapé dans ce champ avant qu’il ne devienne un sélecteur — le sélecteur l’affiche comme Manquant : <nom de l’événement> au lieu de le supprimer ou de le remplacer silencieusement. Choisissez un autre événement pour corriger la liaison.

Configurer l’échelle

Toujours dans la barre d’outils :

Scale : NPS 0–10, Étoiles (1 à 5), ou Pouces (haut ou bas).

Quand le score est envoyé : Au clic envoie le score dès qu’un visiteur choisit une valeur. Avec un bouton attend qu’il clique également sur un bouton de soumission — définissez son étiquette une fois cette option sélectionnée.
Étiquettes facultatives aux deux extrémités de l’échelle, et le Message après envoi.

Travailler avec plusieurs pages

Un pop-up web peut avoir plusieurs pages, par exemple pour guider les visiteurs à travers une courte offre en plusieurs étapes.

Ajouter une page

Cliquez sur + Ajouter une page pour ouvrir le menu d’ajout de page :

Dupliquer la page actuelle : copie la page active, y compris toutes les modifications que vous avez apportées, en tant que nouvelle page. Si la page source a un formulaire d’abonnement, la copie est créée sans celui-ci — un pop-up ne peut en avoir qu’un seul.
Choisissez l’une des mises en page d’une seule page pour ajouter une nouvelle page avec le contenu de démonstration de cette mise en page. La nouvelle page est indépendante des autres, elle peut donc utiliser une mise en page différente. Modale + formulaire d’abonnement est l’une de ces mises en page — elle est livrée avec un bloc de formulaire d’abonnement déjà en place.

Chaque onglet est une page. Cliquez sur un onglet pour y accéder.

Définir la page de démarrage

L’onglet marqué d’une ★ est la page de démarrage, la page que les visiteurs voient en premier. Pour la changer, ouvrez un autre onglet et cliquez sur ☆ sur cet onglet.

Supprimer une page

Sur l’onglet actif, cliquez sur ✕. Une boîte de dialogue de confirmation s’ouvre. Cliquez sur Supprimer pour supprimer la page. Cette action est irréversible.

Enregistrer le contenu

Passez en revue le contenu, les images et la vidéo, ainsi que les actions des boutons. Lorsque vous avez terminé, cliquez sur Enregistrer dans la barre supérieure.

Utiliser le contenu dans une campagne

Après l’enregistrement, le contenu apparaît dans Contenu → Contenu des pop-ups web. Ouvrez-le depuis la liste pour continuer à le modifier.

Pour l’afficher sur le site, allez dans Campagnes → Pop-ups web, créez ou modifiez une campagne, et choisissez ce contenu à l’étape Contenu.

Configurez ensuite l’audience, les paramètres d’affichage, la fréquence et les options de lancement. Pour le processus complet, voir Créer des campagnes de pop-ups web.