Créatif de dialogue réactif

À propos des créatifs de dialogue réactifs

La boîte de dialogue réactive est un type de créatif disponible pour les projets Website/App Insights. Ce type de créatif vous permet de créer des créatifs conformes à l’accessibilité qui sont réactifs à différentes tailles d’appareils.

Le créatif de dialogue réactif fournit des fonctionnalités d’accessibilité prêtes à l’emploi, sans avoir besoin de mises à jour JavaScript supplémentaires qui étaient nécessaires dans le passé.

Une fois que vous avez accès à cette fonctionnalité, la boîte de dialogue réactive est disponible avec d’autres créatifs.

Une fois que vous avez créé votre boîte de dialogue réactive, vous pouvez personnaliser six zones avant de configurer votre intercept : Taille & Style, Message, Boutons, Logos & Images, Animation et Traductions.

Taille & Style

Dans la section Taille et style, vous pouvez personnaliser l’apparence générale du créatif comme suit :

Options de taille standard et de style

Il s’agit des options qui apparaissent si vous n’utilisez pas de cible intégrée et que vous laissez Afficher l’enquête directement dans la boîte de dialogue désélectionnée.

• Espacement du contenu : configurez la densité du texte sur votre créatif. Vous pouvez choisir Compact, Moyen ou Spacieux.
• Couleur : configurez la couleur d’arrière-plan du Creative en le sélectionnant dans la palette du sélecteur de couleurs.
• Forme de la bordure : Configurez le rayon de bordure de votre créatif. Cela détermine le degré d’arrondi des angles. Vous avez le choix entre Aucun, Légèrement arrondi, Moyennement arrondi, Très arrondi.
• Ombre portée : Configurez l’ombre portée entourant votre créatif. Vous avez le choix entre Aucun, Léger, Moyen, Heavy.

Afficher l’enquête directement dans la boîte de dialogue

Lorsque vous sélectionnez Afficher l’enquête directement dans la boîte de dialogue, l’enquête est intégrée au créatif, au lieu d’être liée à un bouton. Pour tester l’expérience complète et précise de l’enquête dans le créatif, utilisez le marque-page. Voir Tester les intercepts pour plus d’informations.

La sélection de cette option supprime les onglets Message et Boutons, car vous n’aurez plus de message ou de boutons dans la boîte de dialogue réactive, à l’exception de ce qui est déjà défini dans votre enquête cible. La sélection de cette option signifie également que vous avez des paramètres de taille et de style différents :

• Redimensionner automatiquement la boîte de dialogue pour l’adapter à votre enquête : redimensionnez automatiquement la boîte de dialogue réactive pour l’adapter à l’enquête que vous affichez dans la boîte de dialogue. La fenêtre sera automatiquement redimensionnée en fonction de la longueur de la première page de votre enquête.

  Astuce Qualtrics : si vous souhaitez que le Creative Dialogue réactif s’adapte automatiquement à une plus grande taille, ajoutez des questions supplémentaires à votre première page de l’enquête ou ajoutez un espace supplémentaire à votre enquête. Pour rendre la boîte de dialogue réactive plus petite, déplacez les questions vers les autres pages suivantes, ajoutez des sauts de page ou réduisez l’espacement dans votre enquête.

• Couleur : configurez la couleur d’arrière-plan du Creative en le sélectionnant dans la palette du sélecteur de couleurs.
• Forme de la bordure : Configurez le rayon de bordure de votre créatif. Cela détermine le degré d’arrondi des angles. Vous avez le choix entre Aucun, Légèrement arrondi, Moyennement arrondi, Très arrondi.
• Ombre portée : Configurez l’ombre portée entourant votre créatif. Vous avez le choix entre Aucun, Léger, Moyen, Heavy.
• Accessibilité
  • Titre Iframe : ce texte sera lu par un lecteur d’écran lorsque le visiteur naviguera vers la fenêtre intégrée.
    Astuce: en fournissant des titres Iframe lors de la création de votre boîte de dialogue, vous garantissez que votre boîte de dialogue est accessible aux utilisateurs.

UTILISER UN MODÈLE

Si vous souhaitez importer un thème d’enquête dans les paramètres de style du créatif, cliquez sur Utiliser un modèle.

Les thèmes sont créés par l’Administrateur de Marque pour l’usage des utilisateurs dans leur marque. Sélectionnez une marque dans le menu déroulant, puis cliquez sur Importer. Si vous souhaitez ajouter un thème à cette liste, contactez votre Administrateur de marque pour en savoir plus.

L’importation d’un modèle de thème ajustera les options suivantes pour le créatif :

• Couleur principale
• Couleur secondaire
• Couleur d’arrière-plan
• Taille du texte de la question
• Taille du texte de réponse
• Espacement des questions
• Contraste d’avant-plan
• Logo

CSS personnalisé

Vous pouvez personnaliser la CSS de la dialogue réactif comme vous le souhaitez en cliquant sur Personnaliser CSS sur le bouton. Vous pouvez ajouter des classes et des propriétés personnalisées en plus des classes et propriétés par défaut. Les modifications apportées ici peuvent ne pas être reflétées dans l’aperçu ; n’oubliez pas de test votre intercept avant le déploiement en complétant la configuration guidée.

-Cliquez ici pour afficher la CSS par défaut pour les boîtes de dialogue réactives –

Si vous supprimez les sélecteurs CSS ou les classes dans le modèle prédéfini, vous ne pourrez pas actualiser ou recharger le modèle. Vous trouverez ci-dessous ce modèle si vous devez réinitialiser la CSS de votre intercept :

Astuce : Assurez-vous de remplacer le INTERCEPT_ID dans l’extrait de code ci-dessous avec votre IDENTIFIANT de l’intercept.

/* Utilisez les classes ci-dessous pour remplacer les styles dialogue réactif.
Attention : le code suivant est fourni tel quel.
et nécessite des connaissances en programmation à mettre en œuvre.
Le support de Qualtrics ne propose pas d'assistance ou de consultation sur le codage personnalisé.
Vous pouvez vous adresser à notre communauté d’utilisateurs spécialisés.
Pour obtenir de l'aide sur le code personnalisé, accédez à https://community.qualtrics.com/custom-code-12 */
/* Style shadowbox qui apparaît derrière la boîte de dialogue. REMARQUE : les modifications apportées à cette boîte d'ombre ne seront pas reflétées dans le prévisualiseur */
.QSIWebResponsiveShadowBox {
/* font-family: Arial, Helvetica, sans-serif; */
/* z-index: 1; */
/* margin-top : 10px !important ; */
/* espace blanc : normal !important ; */
}
/* Style de fondu du conteneur */
.QSIWebResponsive-creative-container-fade {
/* */
}
/* Style du conteneur principal de la dialogue réactif Web */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_content {
/* hauteur de ligne: 1em !important; */
/* marge : 0 0.5em 0 0 !important ; */
/* largeur : auto !important ; */
/* font-size : hérite !important ; */
/* font-weight : normal !important ; */
/* font-style : normal !important ; */
/* affichage : en ligne !important ; */
/* couleur : #000000 !important ; */
}
/* Style de la section contenant le logo du créatif */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_logo-container {
/* affichage : bloc en ligne !important; */
/* marge droite : 5px !important ; */
}
/* Appliquez un style à la section contenant le texte du créatif. Cela inclut la section d'en-tête et la section de description */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_text-container {
/* affichage : bloc en ligne !important; */
}
/* Style de la section titre du créatif */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_headline {
/* police : hérite !important ; */
}
/* Style de la section description du créatif */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_description {
/* police : hérite !important ; */
/* arrière-plan : transparent !important; */
/* bordure: néant !important; */
/* remplissage : 0 !important ; */
/* alignement vertical : milieu !important; */
/* marge : 0 0.4em 0 0 !important ; */
/* curseur : pointeur !important ; */
}
/* Style du conteneur qui abrite le(s) bouton(s) */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-container {
/* affichage : bloc en ligne !important; */
}
/* Style du premier bouton de la boîte de dialogue */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-1 {
/* police : hérite !important ; */
/* remplissage : .4em .4em !important; */
/* min-width: 3em !important; */
/* hauteur de ligne: 1em !important; */
/* rayon de bordure : 4px !important ; */
/* largeur de la bordure : 1px !important ; */
/* style de bordure: solide !important; */
/* curseur : pointeur !important ; */
/* arrière-plan : #FFF !important ; */
/* couleur : #000 !important ; */
/* couleur de bordure : #000 !important ; */
}
/* Style du deuxième bouton dans la boîte de dialogue */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-2 {
/* police : hérite !important ; */
/* remplissage : .4em .4em !important; */
/* min-width: 3em !important; */
/* hauteur de ligne: 1em !important; */
/* rayon de bordure : 4px !important ; */
/* largeur de la bordure : 1px !important ; */
/* style de bordure: solide !important; */
/* curseur : pointeur !important ; */
/* arrière-plan : #FFF !important ; */
/* couleur : #000 !important ; */
/* couleur de bordure : #000 !important ; */
}
/* Style du bouton qui ferme la boîte de dialogue */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_close-btn {
/* affichage : bloc en ligne !important; */
/* marge droite : 5px !important ; */
}
}

Message

Dans la section Message, vous pouvez configurer le Titre et la Description qui s’affichent sur votre créatif. Le titre devrait généralement être une courte phrase qui capte l’attention du visiteur, tandis que la description donne plus de détails sur la raison pour laquelle le créatif leur est apparu.

La police sera adoptée à partir du site web qui affiche le créatif. Pour le Titre et la Description, vous pouvez personnaliser le texte réel, la taille de la police et la pondération de la police.

Boutons

Dans la section Boutons, vous pouvez configurer des options spécifiques au nombre, à l’apparence et à la cible pour chaque bouton.

1. Commencez par choisir le nombre de boutons de votre Creative.
2. Indiquez la forme du bouton pour chaque bouton en sélectionnant Aucun, Arrondi légèrement, Moyennement arrondi ou Totalement arrondi.
3. Indiquez la taille du texte.
4. Pour chaque bouton :
   • Indiquez votre texte. C’est ce que dit le bouton.
   • Cliquez sur le bouton Action pour ouvrir la cible ou Rejeter l’intercept. Ouvrir la cible indique que ce bouton ouvrira la cible que vous indiquez dans vos critères d’interception. Rejeter l’Intercept fermera simplement l’intercept.
   • Sélectionnez votre Couleur d’étiquette, Couleur d’arrière-plan et Couleur de bordure à l’aide de la palette du sélecteur de couleurs.
   • Désigner une étiquette ARIA. Par défaut, les lecteurs d’écran lisent le texte que vous indiquez pour l’étiquette du bouton. Cependant, dans certains cas, vous pouvez souhaiter que le lecteur d’écran lise un contexte supplémentaire, comme “Cliquez sur ce bouton pour ouvrir une nouvelle fenêtre d’enquête”. Dans ce cas, vous pouvez indiquer le descripteur ARIA pour les commandes de boutons de commande.
     Attention : Pour rendre votre créatif accessible, l’étiquette ARIA doit correspondre ou inclure le texte du bouton.

Logos et images

Dans la section Logos & Images, vous pouvez spécifier 1 ou plusieurs images/logos à inclure sur votre créatif.

Vous pouvez choisir de charger une image distincte pour les appareils mobiles ou de bureau, afin que différentes images s’affichent selon que le créatif est affiché sur un navigateur mobile ou de bureau. Vous pouvez également télécharger la même image mais avec des résolutions différentes pour optimiser l’affichage sur n’importe quel type de navigateur d’appareil.

Pour rendre l’accessibilité de l’image conforme, vous avez également la possibilité de spécifier le texte alternatif à utiliser avec les images. (Alt Text est une fonctionnalité qui permet aux lecteurs d’écran de décrire une image aux utilisateurs malvoyants.)

Transition

Dans la section Animation, vous pouvez choisir le type d’animation (Fade ou Slide In) que vous souhaitez pour votre créatif tel qu’il apparaît à l’écran.

• Afficher la boîte de dialogue après : nombre de secondes après lequel l’utilisateur remplit les conditions de l’intercept (par exemple, clics dans l’application) pendant lesquelles cette boîte de dialogue apparaît.
• Définir le temporisateur pour fermer la boîte de dialogue : déterminer combien de temps après l’affichage de la boîte de dialogue il doit se fermer lui-même. Désélectionnez cette option pour forcer l’utilisateur à fermer la boîte de dialogue pour la supprimer de l’écran.
• Type de transition : choisissez si le Creative disparaît ou glisse sur l’écran lorsqu’il apparaît. Si vous sélectionnez Diaporama dans l’animation, vous pouvez également sélectionner la position finale du Creative à l’écran (en haut à gauche, en haut à droite, en bas à gauche, en bas à droite).
  Astuce Qualtrics : l’utilisation du type de transition Diaporama in fait que ce Creative se comporte comme un Creative Curseur.
• Fond de fondu : couleur de l’écran de l’appareil derrière le créatif (Néant, Clair, Moyen ou Sombre).
• Affichage de l’enquête : emplacement où l’enquête s’affichera (nouvelle fenêtre, fenêtre intégrée, fenêtre actuelle, fenêtre pop-under ou nouvel onglet).

Si nécessaire, vous pouvez également prévisualiser vos paramètres d’animation sur cet écran, en cliquant sur Aperçu de l’animation.

Traductions

Vous pouvez ajouter des traductions pour tout le texte dans votre boîte de dialogue réactive. Consultez la page Traduire les boutons de feedback et les boîtes de dialogue réactives pour obtenir des instructions détaillées.

Aperçu du Creative Dialogue réactif

Lorsque vous configurez le créatif de dialogue réactif, vous pouvez prévisualiser l’apparence du Creative sur différentes tailles d’écran (par exemple, ordinateur de bureau, mobile et tablette).

Sauvegarde et publication du Creative Dialogue réactif

Lorsque vous ajoutez des modifications au créatif de dialogue réactif, veillez à enregistrer périodiquement votre travail en cliquant sur le bouton Enregistrer en bas à droite, juste au-dessus de la zone d’aperçu.

Configuration des Intercepts

Les créatifs de dialogue réactifs peuvent être utilisés avec des intercepts standard. Assurez-vous simplement que lorsque vous définissez le Creative de l’intercept, vous sélectionnez le Creative de dialogue réactif sous la section Dialogue réactif.