Creative für responsiven Dialog

Informationen zu Responsive Dialog Creatives

Der responsive Dialog ist ein kreativer Typ, der für Website-/App-Insights-Projekte verfügbar ist. Dieser Creative-Typ ermöglicht es Ihnen, barrierefreiheitskonforme Creatives zu erstellen, die auf verschiedene Gerätegrößen reagieren.

Das Creative des responsiven Dialogs bietet sofort einsatzbereite Funktionen für die Barrierefreiheit, ohne dass zusätzliche JavaScript-basierte Aktualisierungen erforderlich waren, die in der Vergangenheit erforderlich waren.

Sobald Sie Zugriff auf diese Funktion haben, ist der Dialog Responsive neben anderen Creatives verfügbar.

Sobald Sie Ihren flexiblen Dialog erstellt haben, können Sie sechs Bereiche anpassen, bevor Sie Ihr Intercept einrichten: Größe & Stil, Nachricht, Schaltflächen, Logos & Bilder, Animation und Übersetzungen.

Größe & Stil

Im Abschnitt Größe & Stil können Sie das allgemeine Erscheinungsbild des Creatives wie folgt anpassen:

Standardgröße & Stiloptionen

Dies sind die Optionen, die angezeigt werden, wenn Sie kein eingebettetes Ziel verwenden und Umfrage direkt im Dialog anzeigen entmarkiert lassen.

• Inhaltsabstand: Konfigurieren Sie die Dichte des Texts auf Ihrem Creative. Sie können entweder Kompakt, Mittel oder Leer wählen.
• Farbe: Konfigurieren Sie die Hintergrundfarbe des Creatives, indem Sie aus der Farbauswahlpalette auswählen.
• Rahmenform: Konfigurieren Sie den Rahmenradius Ihres Creatives. Dies bestimmt, wie abgerundet die Ecken sind. Sie können zwischen Keine, Leicht gerundet, Teilweise gerundet und Sehr gerundet wählen.
• Schatten ablegen: Konfigurieren Sie den Schatten, der Ihr Creative umgibt. Sie können zwischen None, Light, Medium, Heavy wählen.

Umfrage direkt im Dialog anzeigen

Wenn Sie Umfrage direkt im Dialog anzeigen auswählen, wird die Umfrage in das Creative eingebettet, anstatt mit einer Schaltfläche verknüpft zu werden. Um die vollständige und genaue Erfahrung der Umfrage im Creative zu testen, verwenden Sie das Bookmarklet. Weitere Informationen finden Sie unter Test Intercepts.

Wenn Sie diese Option auswählen, werden die Registerkarten „Nachricht“ und „Schaltflächen“ entfernt, da im flexiblen Dialog keine Nachricht oder Schaltflächen mehr vorhanden sind, abgesehen von den bereits in Ihrer Zielumfrage festgelegten Einstellungen. Wenn Sie diese Option auswählen, haben Sie auch andere Größe & Style-Einstellungen:

• Dialog automatisch an Ihre Umfrage anpassen: Passen Sie die Größe des Dialogfensters „Flexibel“ automatisch an die Umfrage an, die Sie im Dialogfeld anzeigen. Die Größe des Fensters wird automatisch an die Länge der ersten Seite Ihrer Umfrage angepasst.

  Tipp: Wenn Sie den kreativen Dialog so gestalten möchten, dass es automatisch größer skaliert wird, fügen Sie zusätzliche Fragen zu Ihrer ersten Seite der Umfrage hinzu, oder fügen Sie zusätzliche Abstände zu Ihrer Umfrage hinzu. Um den Dialog zu verkleinern, verschieben Sie Fragen auf andere Folgeseiten, fügen Sie Seitenumbrüche hinzu oder verringern Sie den Abstand innerhalb Ihrer Umfrage.

• Farbe: Konfigurieren Sie die Hintergrundfarbe des Creatives, indem Sie aus der Farbauswahlpalette auswählen.
• Rahmenform: Konfigurieren Sie den Rahmenradius Ihres Creatives. Dies bestimmt, wie abgerundet die Ecken sind. Sie können zwischen Keine, Leicht gerundet, Teilweise gerundet und Sehr gerundet wählen.
• Schatten ablegen: Konfigurieren Sie den Schatten, der Ihr Creative umgibt. Sie können zwischen None, Light, Medium, Heavy wählen.
• Zugänglichkeit
  • Iframe-Titel: Dieser Text wird von einem Bildschirmausleseprogramm vorgelesen, wenn der Besucher zum eingebetteten Fenster navigiert.
    Tipp: Durch das Bereitstellen von Iframe-Titeln während der Dialoganlage wird sichergestellt, dass Ihr Dialog für Benutzer zugänglich ist.

VORLAGE VERWENDEN

Wenn Sie ein Umfragedesign in die Stileinstellungen des Creative importieren möchten, klicken Sie auf Vorlage verwenden.

Themes werden vom Administrator für die Verwendung von Benutzern in ihrer Instanz angelegt. Wählen Sie eine Marke aus dem Dropdown-Menü aus, und klicken Sie dann auf Importieren. Wenn Sie dieser Liste ein Design hinzufügen möchten, wenden Sie sich an Ihren Administrator, um weitere Informationen zu erhalten.

Wenn Sie eine Motivvorlage importieren, werden die folgenden Einstellungen für das Creative angepasst:

• Primäre Farbe
• Sekundäre Farbe
• Hintergrundfarbe
• Fragentextgröße
• Größe des Antworttexts
• Fragenabstand
• Vordergrundkontrast
• Logo

Benutzerdefiniertes CSS

Sie können das CSS des responsiven Dialogs nach Belieben anpassen, indem Sie auf die Schaltfläche CSS anpassen klicken. Sie können zusätzlich zu den Standardklassen und -eigenschaften benutzerdefinierte Klassen und Eigenschaften hinzufügen. Die hier vorgenommenen Änderungen werden möglicherweise nicht in der Vorschau angezeigt; denken Sie daran, Ihre Abfangvorrichtung vor der Bereitstellung zu testen, indem Sie die geführte Einrichtung abschließen.

-Klicken Sie hier, um das Standard-CSS für responsive Dialoge anzuzeigen

Wenn Sie die CSS-Selektoren oder Klassen innerhalb der vordefinierten Vorlage löschen, können Sie die Vorlage nicht aktualisieren oder neu laden. Nachfolgend finden Sie diese Vorlage für den Fall, dass Sie das CSS Ihres Intercepts zurücksetzen müssen:

Qtip: Stellen Sie sicher, dass Sie die INTERCEPT_ID in dem folgenden Ausschnitt durch die ID Ihres Intercepts ersetzen.

/* Verwenden Sie die folgenden Klassen, um die Stile für responsive Dialoge zu überschreiben.
Achtung! Der folgende Code wird so zur Verfügung gestellt, wie er ist
und erfordert Programmierkenntnisse, um ihn zu implementieren.
Der Qualtrics Support bietet keinerlei Hilfestellung oder Beratung im Zusammenhang mit eigenem Programmcode an.
Stattdessen können Sie sich gerne in unserer engagierten Benutzer-Community erkundigen.
Hilfe zum benutzerdefinierten Code finden Sie unter https://community.qualtrics.com/custom-code-12 */
/* Stil Schattenbox, die hinter dem Dialog erscheint. HINWEIS: Änderungen an dieser Shadowbox werden nicht in der Vorschau angezeigt */
.QSIWebResponsiveShadowBox {
/* font-family: Arial, Helvetica, sans-serif; */
/* z-index: 1; */
/* margin-top: 10px !important; */
/* white-space: normal !important; */
}
/* Überblendung des Containers gestalten */
.QSIWebResponsive-creative-container-fade {
/* */
}
/* Style den Hauptcontainer des Web Responsive Dialogs */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_content {
/* line-height: 1em !important; */
/* margin: 0 0.5em 0 0 !important; */
/* width: auto !important; */
/* font-size: inherit !important; */
/* font-weight: normal !important; */
/* font-style: normal !important; */
/* display: inline !important; */
/* color: #000000 !important; */
}
/* Stil für den Logo-Container-Abschnitt der Grafik */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_logo-container {
/* display: inline-block !important; */
/* margin-right: 5px !important; */
}
/* Stil für den Text-Container-Abschnitt der Grafik. Dies umfasst den Kopfzeilen- und den Beschreibungsabschnitt */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_text-container {
/* display: inline-block !important; */
}
/* Stil für den Überschriftenabschnitt des Werbemittels */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_headline {
/* font: inherit !*/
}
/* Stil für den Beschreibungsabschnitt des Motivs */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_description {
/* font: inherit !important; */
/* background: transparent !important; */
/* border: none !important; */
/* padding: 0 !important; */
/* vertical-align: middle !important; */
/* margin: 0 0.4em 0 0 !important; */
/* cursor: pointer !important; */
}
/* Style den Container, der den/die Button(s) enthält */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-container {
/* display: inline-block !important; */
}
/* Style der ersten Schaltfläche im Dialog */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-1 {
/* font: inherit !important; */
/* padding: .4em .4em !important; */
/* min-width: 3em !important; */
/* line-height: 1em !important; */
/* border-radius: 4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: pointer !important; */
/* background: #FFF !important; */
/* color: #000 !important; */
/* border-color: #000 !important; */
}
/* Stil der zweiten Schaltfläche im Dialog */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-2 {
/* font: inherit !important; */
/* padding: .4em .4em !important; */
/* min-width: 3em !important; */
/* line-height: 1em !important; */
/* border-radius: 4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: pointer !important; */
/* background: #FFF !important; */
/* color: #000 !important; */
/* border-color: #000 !important; */
}
/* Stil der Schaltfläche zum Schließen des Dialogs */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_close-btn {
/* display: inline-block !important; */
/* margin-right: 5px !important; */
}
}

Nachricht

Im Abschnitt Nachricht können Sie die Überschrift und die Beschreibung konfigurieren, die in Ihrem Creative angezeigt werden. Die Überschrift sollte in der Regel ein kurzer Satz sein, der die Aufmerksamkeit des Besuchers erfasst, während die Beschreibung mehr Details darüber enthält, warum das Creative ihnen aufgefallen ist.

Die Schriftart wird von der Website übernommen, auf der das Creative angezeigt wird. Sowohl für die Überschrift als auch für die Beschreibung können Sie den tatsächlichen Text, die Schriftgröße und die Schriftbreite anpassen.

Schaltflächen

Im Abschnitt Drucktasten können Sie Optionen konfigurieren, die für die Anzahl, das Erscheinungsbild und das Ziel der einzelnen Drucktasten spezifisch sind.

1. Beginnen Sie, indem Sie die Anzahl der Drucktasten wählen, die Sie für Ihr Creative verwenden möchten.
2. Geben Sie die Drucktastenform für jede Drucktaste an, indem Sie Keine, Leicht gerundet, Teilweise gerundet oder Vollständig gerundet wählen.
3. Geben Sie die Textgröße an.
4. Für jede Drucktaste:
   • Geben Sie Ihren Text an. Das sagt der Knopf.
   • Wählen Sie die Drucktaste Aktion, um das Ziel zu öffnen oder das Intercept zu verwerfen. Ziel öffnen gibt an, dass mit dieser Drucktaste das Ziel geöffnet wird, das Sie in Ihren Achsenabschnittskriterien angeben. Mit Intercept verwerfen wird das Intercept einfach geschlossen.
   • Wählen Sie Ihre Beschriftungsfarbe, Hintergrundfarbe und Rahmenfarbe über die Farbauswahlpalette aus.
   • Benennen Sie ein ARIA-Label. Standardmäßig lesen Bildschirmausleseprogramme den Text, den Sie für die Drucktastenbeschriftung angeben. In einigen Fällen möchten Sie jedoch, dass das Bildschirmausleseprogramm zusätzlichen Kontext liest, z.B. “Klicken Sie auf diese Schaltfläche, um ein neues Umfragefenster zu öffnen.” In diesem Fall können Sie den ARIA-Bezeichner für die Drucktastenelemente angeben.
     Achtung: Um Ihr Creative zugänglich zu machen, muss das ARIA-Label mit dem Drucktastentext übereinstimmen oder darin enthalten sein.

Logos & Bilder

Im Abschnitt Logos & Bilder können Sie ein oder mehrere Bilder/Logos angeben, die in Ihrem Creative enthalten sein sollen.

Sie können ein separates Bild für Mobile oder Desktop hochladen, sodass unterschiedliche Bilder angezeigt werden, je nachdem, ob das Creative in einem Mobile- oder Desktop-Browser angezeigt wird. Sie können dasselbe Bild auch hochladen, jedoch mit unterschiedlichen Auflösungen, um die Anzeige auf beiden Arten von Gerätebrowsern zu optimieren.

Um die Barrierefreiheit des Bildes konform zu machen, können Sie auch den Alternativtext angeben, der mit den Bildern verwendet werden soll. (Alt Text ist eine Funktion, mit der Bildschirmausleseprogramme ein Bild für sehbehinderte Benutzer beschreiben können.)

Animation

Im Abschnitt Animation können Sie den Animationstyp (Einblenden oder Einblenden) auswählen, den Sie für Ihr Creative verwenden möchten, wie es auf dem Bildschirm angezeigt wird.

• Dialog anzeigen nach: Die Anzahl der Sekunden, nachdem der Benutzer die Achsenabschnittsbedingungen (z.B. Klicks in die App) erfüllt hat, die in diesem Dialog angezeigt werden.
• Timer zum Schließen des Dialogs festlegen: Legen Sie fest, wie lange der Dialog angezeigt wird, um sich selbst zu schließen. Heben Sie die Auswahl dieser Option auf, um den Benutzer zu zwingen, das Dialogfenster zu schließen, um es aus dem Bild zu entfernen.
• Übergangstyp: Wählen Sie aus, ob das Creative beim Anzeigen auf dem Bildschirm erscheinen soll. Wenn Sie Folie in Animation wählen, können Sie auch die letzte Position des Creatives auf dem Bild auswählen (oben links, oben rechts, unten links, unten rechts).
  Tipp: Mit dem Transitionstyp „Slide In“ verhält sich dieses Creative wie ein Slider Creative.
• Hintergrund ausblenden: Die Farbe des Bildschirms des Geräts hinter dem Creative (None, Light, Medium oder Dark).
• Survey-Anzeige: Wo die Umfrage angezeigt wird (Neues Fenster, Eingebettetes Fenster, Aktuelles Fenster, PopUnder -Fenster oder Neue Registerkarte).

Bei Bedarf können Sie auch auf diesem Bild eine Vorschau Ihrer Animationseinstellungen anzeigen, indem Sie auf Animationsvorschau klicken.

Übersetzungen

Sie können Übersetzungen für alle Texte in Ihrem flexiblen Dialog hinzufügen. Eine Schritt-für-Schritt-Anleitung finden Sie auf der Seite Feedback-Schaltflächen übersetzen und Responsive Dialoge.

Vorschau des Responsive-Dialog-Creatives anzeigen

Wenn Sie das Creative des flexiblen Dialogs konfigurieren, können Sie eine Vorschau darauf anzeigen, wie das Creative auf verschiedenen Bildschirmgrößen (z. B. Desktop, Mobiltelefon und Tablet) aussehen wird.

Sichern und Veröffentlichen des Responsive-Dialog-Creatives

Wenn Sie Änderungen am Responsive-Dialog-Creative vornehmen, sollten Sie Ihre Arbeit regelmäßig speichern, indem Sie in der unteren rechten Ecke über dem Vorschaubereich auf die Schaltfläche Speichern klicken.

Intercepts konfigurieren

Responsive Dialog-Creatives können mit Standard-Intercepts verwendet werden. Stellen Sie sicher, dass Sie, wenn Sie das Creative des Intercepts festlegen, das Creative des responsiven Dialogs im Abschnitt Responsiver Dialog auswählen.