Personnalisation de la pop-in

La personnalisation de la pop-in fonctionne sur le même principe que l'éditeur HTML, avec une interface en glisser-déposer (drag and drop).

Vous pouvez construire votre pop-in en ajoutant et en organisant différents blocs directement dans l'éditeur.

Deux types de contenus sont disponibles : 

• Les blocs de base : ils correspondent aux blocs que vous retrouvez habituellement dans l'éditeur HTML (textes, boutons, images...)
• Les champs de formulaires : ils permettent d'ajouter les différents champs nécessaires à la création d'un formulaire, comme des champs de saisie de texte, des listes déroulantes etc.

Chaque bloc peut ensuite être personnalité directement depuis l'éditeur afin d'adapter son contenu et son apparence aux besoins du formulaire.

Réglages de la pop-in

La section Réglages permet de personnaliser l'apparence et le comportement de la pop-in. Ces paramètres s'appliquent à l'ensemble de la pop-in et permettent notamment de gérer ses dimensions, son arrière-plan, son positionnement et des animations.
 

Dimensions et apparence

Les premiers paramètres permettent de définir les caractéristiques visuelles de la pop-in :

• Largeur : permet de définir la largeur de la pop-in.
• Hauteur : permet de définir la hauteur de la pop-in. Si la valeur est définie sur 0, la hauteur est automatiquement adaptée au contenu de la pop-in.
• Couleur de fond : permet de définir la couleur d’arrière-plan de la pop-in.
• Rayon de bordure : permet d’arrondir plus ou moins les angles de la pop-in.
• Marge intérieure : permet de définir l’espace entre le contenu et les bords de la pop-in.

Voile

Le voile correspond à l’arrière-plan affiché entre le site et la pop-in lorsqu’elle est ouverte. Il permet notamment de mettre la pop-in en avant en atténuant visuellement le contenu de la page.

Les paramètres disponibles sont :

• Couleur du voile : permet de choisir la couleur du voile.
• Opacité : permet de définir le niveau de transparence du voile.
• Flou : permet d’appliquer un effet de flou au contenu situé derrière le voile. La valeur est exprimée en pixels (px).

Apparition et fermeture

Cette section permet de personnaliser la manière dont la pop-in apparaît et disparaît à l’écran.

• Position : permet de définir l’emplacement de la pop-in sur la page.
• Animation à l’ouverture : permet de choisir l’animation utilisée lors de l’apparition de la pop-in.
• Animation à la fermeture : permet de choisir l’animation utilisée lorsque la pop-in se ferme.
• Durée de l’animation : permet de définir la durée des animations d’ouverture et de fermeture.
• Bouton de fermeture : permet d’afficher ou de masquer le bouton permettant au visiteur de fermer la pop-in.

Polices et liens

Les derniers paramètres permettent de définir les styles appliqués par défaut au contenu de la pop-in :

• Police par défaut : permet de définir la police utilisée par défaut dans la pop-in.
• Couleur des liens : permet de définir la couleur appliquée aux liens.
• Soulignage des liens : permet d’activer ou de désactiver le soulignage des liens.

Champs de formulaire

Les blocs de formulaire permettent de construire les formulaires directement dans la pop-in. Chaque bloc correspond à un type de champ et dispose de ses propres options de configuration.
 

Personnalisation des champs

Tous les champs de formulaire sont également personnalisables visuellement afin de s’adapter à la charte graphique du site.

Ces paramètres permettent de personnaliser l'apparence des champs tout en conservant une cohérence avec le reste du contenu de la pop-in.
 

Champ de saisie

Le champ de saisie permet au visiteur de renseigner une information sur une seule ligne, par exemple son nom, son adresse e-mail ou son numéro de téléphone.

Plusieurs paramètres peuvent être configurés :

• Libellé : permet d'ajouter un intitulé affiché au-dessus du champ.
• Texte indicatif : permet d'afficher un texte d'aide ou un exemple directement dans le champ.
• Type de saisie : permet de définir le type d'information attendu :
  • Texte
  • E-mail
  • Téléphone
  • Nombre
  • Date
  • Mot de passe
  • URL
• Champ CRM : permet d'associer la valeur saisie à un champ CRM existant. Par exemple, pour un champ permettant de saisir une adresse e-mail, il est possible de l'associer au champ CRM Email. Le même principe s'applique notamment aux champs Nom, Prénom, etc.

Zone de texte

La zone de texte fonctionne sur le même principe que le champ de saisie, mais permet au visiteur de renseigner un contenu plus long sur plusieurs lignes.

Elle dispose des mêmes paramètres :

• Libellé
• Texte indicatif
• Type de saisie
• Champ CRM

Elle possède également un paramètre supplémentaire :

• Nombre de lignes : permet de définir la hauteur de la zone de texte en fonction du nombre de lignes affichées.

Liste déroulante

La liste déroulante permet au visiteur de sélectionner une valeur parmi plusieurs options.

Deux modes de fonctionnement sont disponibles :

• Statique : les différentes valeurs proposées sont renseignées manuellement lors de la configuration du champ.
• Dynamique : les valeurs sont récupérées automatiquement depuis les données disponibles dans le CRM. Par exemple, il est possible de proposer la liste des magasins associés au client.

Boutons radio

Les boutons radio permettent au visiteur de sélectionner une seule valeur parmi plusieurs options.

Les paramètres disponibles permettent notamment de :

• Associer le champ à un champ CRM afin d'enregistrer la valeur sélectionnée dans le CRM.
• Rendre la saisie obligatoire ou facultative.
• Afficher les options sur une seule ligne ou les répartir sur plusieurs lignes.

Cases à cocher

Les cases à cocher permettent au visiteur de sélectionner une ou plusieurs options.

Il est possible de configurer :

• L'affichage des options sur une seule ligne ou sur plusieurs lignes.
• L'association à un champ CRM afin d'enregistrer les choix effectués.
• Le caractère obligatoire de la saisie.
• L'état par défaut des options, afin de définir si certaines cases sont cochées automatiquement à l'affichage du formulaire.

Bouton d'envoi

Le bouton d'envoi permet au visiteur de valider et d'envoyer le formulaire.

Il est notamment possible de définir une URL de redirection vers laquelle le visiteur sera automatiquement redirigé après l'envoi du formulaire.