Passer au contenu principal

Mettre en place une pop-in

Mise en place d'une pop-in / popin

Mis à jour il y a plus d'un mois

Vous souhaitez afficher des informations au clic sur un mot, un bouton ou une image ? Pour cela, il faut utiliser une pop-in. Une pop-in est un cadre d'informations qui s'affiche au-dessus du contenu de votre campagne.

Design du pop-in

Avant de configurer votre pop-in, il vous faudra avoir créé les différents éléments graphiques nécessaires. Cliquez sur le bouton ci-dessous pour voir nos recommandations graphiques pour la réalisation de votre pop-in :


Ajouter une pop-in

Pour ajouter une pop-in sur votre page, suivez ces étapes :

  1. Allez dans l'onglet Boutons

  2. Ajoutez un bouton sur votre page

  3. Cliquez sur le bouton pour accéder à sa configuration

  4. Dans Actions, choisissez Afficher une pop-in dans la liste déroulante


Définir la largeur de votre pop-in

Vous pouvez choisir parmi trois tailles : petite (350 px), normale (650 px) ou large (1200 px).


Choisir le type de contenu à afficher

  • Pop-in image : la largeur s’adapte automatiquement à l’image importée. Par exemple, si votre image fait 650 px × 300 px, la pop-in aura 650 px de large et 300 px de hauteur. Il est recommandé de choisir la largeur avant de télécharger l’image. La hauteur du visuel est libre. Au-delà de 870 px de hauteur, une barre de scroll sera ajoutée automatiquement.

  • Pop-in vidéo : choisissez l’une des trois largeurs disponibles, puis ajoutez le lien de votre vidéo (YouTube, Dailymotion ou Vimeo). La vidéo doit être en mode public pour être visible par tous.

  • Pop-in iFrame : choisissez une des trois largeurs et indiquez la hauteur souhaitée pour l’iFrame. La hauteur maximale affichable est de 870 px. Si la page de votre site est plus haute que la hauteur choisie, elle sera coupée et aucune barre de scroll ne sera ajoutée automatiquement. Pour afficher l’intégralité de la page, indiquez la hauteur totale de votre site. Dans ce cas, la pop-in aura une hauteur maximale de 870 px mais inclura une barre de scroll permettant à l’utilisateur de naviguer sur l’ensemble du contenu.

✍️ A savoir :

  • Un cache blanc à 70% d’opacité est intercalé automatiquement entre l’écran et la pop-in.

  • Une lueur externe noire est appliquée automatiquement pour faire ressortir la pop-in.

  • Un bandeau blanc de 35 px avec une croix pour fermer la pop-in est automatiquement placé en haut du visuel exporté.

  • La pop-in se place automatiquement à 50 px en dessous du haut de l’écran.

  • Il ne peut pas y avoir de bouton dans la pop-in


Exemple

Exemple de pop-in d'une campagne Kiabi

Avez-vous trouvé la réponse à votre question ?