Creativo dialogo reattivo

Informazioni sugli editor di intercetta di dialogo reattivo

La finestra di dialogo reattiva è un tipo di editor di intercetta disponibile per i progetti Analisi sito Web / App. Questo tipo di editor di intercetta consente di rendere creativi conformi all’accessibilità che rispondono alle diverse dimensioni dei dispositivi.

L’editor di dialogo reattivo fornisce funzionalità di accessibilità pronte all’uso, senza la necessità di ulteriori aggiornamenti basati su JavaScript richiesti in passato.

Una volta ottenuto l’accesso a questa funzionalità, la finestra di dialogo Reattiva è disponibile insieme ad altri editor di intercetta.

Una volta creata la tua finestra di dialogo reattiva, ci sono sei aree che puoi personalizzare prima di impostare la tua intercetta: Dimensioni & Stile, Messaggio, Pulsanti, Logos & Immagini, Animazione e Traduzioni.

Dimensioni e stile

Nella sezione Size & Style, è possibile personalizzare l’aspetto generale dell’editor di intercetta come segue:

Dimensioni standard & opzioni di stile

Queste sono le opzioni visualizzate se non si utilizza una destinazione integrata e si lascia deselezionato Visualizza sondaggio direttamente nella finestra di dialogo.

• Spaziatura contenuto: consente di configurare la densità del testo nel proprio editor di intercetta. È possibile selezionare Compatto, Medio o Spazioso.
• Colore: configurare il colore di sfondo dell’editor di intercetta scegliendo dalla tavolozza di selezione colori.
• Forma del bordo: configura il raggio del bordo del tuo editor di intercetta. Ciò determina quanto sono arrotondati gli angoli. È possibile scegliere tra Nessuno, Leggermente arrotondato, Moderatamente arrotondato, Molto arrotondato.
• Ombreggiatura: configura l’ombreggiatura intorno al tuo editor di intercetta. È possibile scegliere tra Nessuno, Chiaro, Medio, Pesante.

Visualizza sondaggio direttamente nella finestra di dialogo

Quando selezioni Visualizza sondaggio direttamente nella finestra di dialogo, il sondaggio sarà incorporato nell’editor di intercetta, invece di essere collegato a un pulsante. Per testare l’esperienza completa e accurata del sondaggio nell’editor di intercetta, utilizza il bookmarklet. Per saperne di più, consulta Prova intercettazioni.

La selezione di questa opzione rimuove le schede Messaggio e Pulsanti perché non avrai più un messaggio o pulsanti nella finestra di dialogo reattiva, a parte ciò che è già impostato nel sondaggio di destinazione. La selezione di questa opzione significa anche che si dispone di diverse dimensioni e impostazioni di stile:

• Ridimensiona automaticamente la finestra di dialogo per adattarla al tuo sondaggio: ridimensiona automaticamente la finestra di dialogo reattiva per adattarla al sondaggio visualizzato nella finestra di dialogo. La finestra si ridimensionerà automaticamente in base alla lunghezza della prima pagina del sondaggio.

  Qtip: se desideri rendere la finestra di dialogo reattiva creativa automaticamente scalabile a dimensioni maggiori, aggiungi ulteriori domande alla tua prima pagina del sondaggio o aggiungi ulteriore spaziatura al sondaggio. Per ridurre la finestra di dialogo reattiva, sposta le domande in altre pagine successive, aggiungi interruzioni di pagina o riduci la spaziatura all’interno del sondaggio.

• Colore: configurare il colore di sfondo dell’editor di intercetta scegliendo dalla tavolozza di selezione colori.
• Forma del bordo: configura il raggio del bordo del tuo editor di intercetta. Ciò determina quanto sono arrotondati gli angoli. È possibile scegliere tra Nessuno, Leggermente arrotondato, Moderatamente arrotondato, Molto arrotondato.
• Ombreggiatura: configura l’ombreggiatura intorno al tuo editor di intercetta. È possibile scegliere tra Nessuno, Chiaro, Medio, Pesante.
• Accessibilità
  • Titolo Iframe: Questo testo sarà letto da uno screenreader quando il visitatore si dirige verso la finestra incorporata.
    Consiglio Q: la fornitura di titoli Iframe durante la creazione della finestra di dialogo garantisce che la finestra di dialogo sia accessibile agli utenti.

UTILIZZARE UN MODELLO

Se desideri importare un tema del sondaggio nelle impostazioni di stile dell’editor di intercetta, fai clic su Usa un modello.

I temi sono creati dall’Amministratore della licenza per l’uso degli utenti nel loro brand. Seleziona un marchio dal menu a discesa, quindi fai clic su Importa. Se desideri aggiungere un tema a questa lista, contatta il tuo Amministratore della licenza per maggiori informazioni.

L’importazione di un modello di tema regolerà le seguenti impostazioni per l’editor di intercetta:

• Colore primario
• Colore secondario
• Colore sfondo
• Dimensione testo domanda
• Dimensione testo della risposta
• Spaziatura domande
• Contrasto primo piano
• Logo

CSS personalizzato

È possibile personalizzare il CSS della finestra di dialogo reattiva in base alle esigenze facendo clic su Personalizza CSS pulsante. È possibile aggiungere classi e proprietà personalizzate oltre a quelle predefinite. Le modifiche apportate qui potrebbero non riflettersi nell’anteprima; ricordare di test la tua intercetta prima della distribuzione completando la configurazione guidata.

-Fare clic qui per visualizzare il CSS predefinito per le finestre di dialogo reattive –

Se si eliminano i selettori CSS o le classi all’interno del modello predefinito, non sarà possibile aggiornare o ricaricare il modello. Di seguito è riportato questo modello nel caso in cui sia necessario reimpostare il CSS della tua intercetta:

Consiglio Q: Assicurarsi di sostituire INTERCEPT_ID nello snippet seguente con il proprio ID dell’intercetta.

/* Utilizzare le classi di seguito per sostituire gli stili finestra di dialogo reattiva.
Attenzione: il seguente codice viene fornito così com'è
e richiede conoscenze di programmazione da implementare.
Il Supporto Qualtrics non offre assistenza o consulenza riguardo alla programmazione personalizzata.
Puoi invece provare a domandare alla nostra community di utenti esperti .
Per assistenza con il codice personalizzato, passare a https://community.qualtrics.com/custom-code-12 */
/* Finestra di dialogo stile visualizzata dietro la finestra di dialogo. NOTA: le modifiche a questa shadowbox non saranno riflesse nel visualizzatore anteprima */
.QSIWebResponsiveShadowBox {
/* tipo di carattere: Arial, Helvetica, sans-serif; */
/* indice z: 1; */
/* margin-top: 10px !importante; */
/* spazio bianco: normale !importante; */
}
/* Modella la dissolvenza del contenitore */
.QSIWebResponsive-creative-container-fade {
/* */
}
/* Modella il contenitore principale della finestra di dialogo reattiva */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_content {
/* altezza riga: 1em !importante; */
/* margine: 0 0.5em 0 0 !importante; */
/* larghezza: auto !importante; */
/* dimensione carattere: eredita !importante; */
/* tipo di carattere: normale !importante; */
/* tipo di carattere: normale !importante; */
/* visualizzazione: inline !importante; */
/* colore: #000000 !importante; */
}
/* Modella la sezione contenitore logo del editor di intercetta */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_logo-container {
/* visualizzazione: blocco interno !importante; */
/* margin-right: 5px !importante; */
}
/* Modella la sezione contenitore di testo dell'editor di intercetta. Ciò include la sezione di intestazione e la sezione di descrizione */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_text-container {
/* visualizzazione: blocco interno !importante; */
}
/* Modella la sezione titolo dell'editor di intercetta */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_headline {
carattere /*: eredita !importante; */
}
/* Modella la sezione descrizione del editor di intercetta */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_description {
carattere /*: eredita !importante; */
/* sfondo: trasparente !importante; */
/* bordo: nessuno !importante; */
/* padding: 0 !importante; */
/* allineamento verticale: centrale !importante; */
/* margine: 0 0.4em 0 0 !importante; */
/* cursore: puntatore !importante; */
}
/* Modella il contenitore che ospita il/i pulsante/i */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-container {
/* visualizzazione: blocco interno !importante; */
}
/* Modella il primo pulsante nella finestra di dialogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-1 {
carattere /*: eredita !importante; */
/* padding: .4em .4em !importante; */
/* larghezza min: 3em !importante; */
/* altezza riga: 1em !importante; */
/* raggio di bordo: 4px !importante; */
/* larghezza bordo: 1px !importante; */
/* stile bordo: solido !importante; */
/* cursore: puntatore !importante; */
/* sfondo: #FFF !importante; */
/* colore: #000 !importante; */
/* border-color: #000 !importante; */
}
/* Modella il secondo pulsante nella finestra di dialogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-2 {
carattere /*: eredita !importante; */
/* padding: .4em .4em !importante; */
/* larghezza min: 3em !importante; */
/* altezza riga: 1em !importante; */
/* raggio di bordo: 4px !importante; */
/* larghezza bordo: 1px !importante; */
/* stile bordo: solido !importante; */
/* cursore: puntatore !importante; */
/* sfondo: #FFF !importante; */
/* colore: #000 !importante; */
/* border-color: #000 !importante; */
}
/* Modella il pulsante che chiude la finestra di dialogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_close-btn {
/* visualizzazione: blocco interno !importante; */
/* margin-right: 5px !importante; */
}
}

Messaggio

Nella sezione Messaggio, puoi configurare il Titolo e la Descrizione che appaiono sul tuo editor di intercetta. Il titolo dovrebbe essere generalmente una breve frase che cattura l’attenzione del visitatore, mentre la descrizione fornisce maggiori dettagli sul perché il creativo sia apparso loro.

Il carattere sarà adottato dal sito web che visualizza l’editor di intercetta. Sia per Titolo che per Descrizione, è possibile personalizzare il testo effettivo, la dimensione e il peso del carattere.

Pulsanti

Nella sezione Pulsanti è possibile configurare opzioni specifiche del numero, dell’aspetto e della destinazione di ogni pulsante.

1. Inizia scegliendo il numero di pulsanti che desideri sul tuo editor di intercetta.
2. Specificare la Forma pulsante per ogni pulsante scegliendo tra Nessuno, Arrotondato leggermente, Moderatamente arrotondato o Arrotondato completamente.
3. Specificare la Dimensione del testo.
4. Per ogni pulsante:
   • Specificare il proprio Testo. Questo è ciò che dice il pulsante.
   • Seleziona il pulsante Azione per aprire la destinazione o scartare l’intercettazione. Apri destinazione indica che questo pulsante aprirà la destinazione specificata nei criteri dell’intercettazione. Ignora intercettazione chiuderà semplicemente l’intercettazione.
   • Scegliere Colore etichetta, Colore di sfondo e Colore bordo utilizzando la tavolozza di selezione colori.
   • Designare un‘etichetta ARIA. Per impostazione predefinita, i programmi di lettura dello schermo leggeranno il testo specificato per l’etichetta del pulsante. Tuttavia, in alcuni casi, è possibile che si desideri che il programma di lettura dello schermo legga un contesto aggiuntivo, ad esempio “Fare clic su questo pulsante per aprire una nuova finestra del sondaggio”. In questo caso, è possibile specificare l’etichetta ARIA per i pulsanti di comando.
     Attenzione: Per rendere accessibile il tuo editor di intercetta, l’etichetta ARIA deve corrispondere o includere il testo del pulsante.

Logos & immagini

Nella sezione Logos & Images, puoi specificare 1 o più immagini/loghi da includere nel tuo editor di intercetta.

È possibile scegliere di caricare un’immagine separata per Mobile o Desktop, in modo che vengano visualizzate immagini diverse a seconda che l’editor di intercetta venga visualizzato su un browser mobile o desktop. È anche possibile caricare la stessa immagine ma con risoluzioni diverse per ottimizzare la visualizzazione su entrambi i tipi di browser dei dispositivi.

Per rendere l’accessibilità dell’immagine conforme, è anche possibile specificare il testo Alt per andare con le immagini. (Alt Text è una funzionalità che consente ai programmi di lettura dello schermo di descrivere un’immagine agli utenti ipovedenti).

Animazione

Nella sezione Animazione puoi scegliere il tipo di animazione (Dissolvenza o Diapositiva) che desideri per il tuo editor di intercetta così come appare sullo schermo.

• Visualizza finestra di dialogo dopo: il numero di secondi dopo che l’utente soddisfa le condizioni dell’intercetta (ad esempio, fa clic nell’app) in cui viene visualizzata questa finestra di dialogo.
• Impostare timer per chiudere la finestra di dialogo: determinare quanto tempo dopo la finestra di dialogo appare che deve chiudersi da sola. Deselezionare questa opzione per forzare l’utente a chiudere la finestra di dialogo per rimuoverla dalla videata.
• Tipo di transizione: scegli se l’editor di intercetta sfuma o scivola sullo schermo quando appare. Se si sceglie Diapositiva nell’animazione, è anche possibile selezionare la posizione finale dell’editor di intercetta sullo schermo (In alto a sinistra, In alto a destra, In basso a sinistra, In basso a destra).
  Qtip: utilizzando il tipo di transizione Slide In, questo creativo si comporta come un creativo slider.
• Sfondo dissoluto: il colore dello schermo del dispositivo dietro l’editor di intercetta (None, Light, Medium o Dark).
• Visualizzazione sondaggio: dove verrà visualizzato il sondaggio (nuova finestra, finestra incorporata, finestra corrente, finestra PopUnder o scheda Nuovo).

Se necessario, puoi visualizzare in anteprima le impostazioni dell’animazione anche su questa schermata, facendo clic su Anteprima animazione.

Traduzioni

È possibile aggiungere traduzioni per tutto il testo nella finestra di dialogo reattiva. Per istruzioni dettagliate, consulta la pagina Translating Feedback Buttons & Responsive Dialogs.

Anteprima dell’editor di intercetta per la finestra di dialogo reattiva

Durante la configurazione dell’editor di intercetta di dialogo reattivo, è possibile visualizzare in anteprima l’aspetto dell’editor di intercetta su schermi di dimensioni diverse (ad es. desktop, mobile e tablet).

Salvataggio e pubblicazione dell’editor di intercetta per dialogo reattivo

Mentre aggiungi modifiche all’editor di intercetta della finestra di dialogo reattiva, assicurati di salvare periodicamente il tuo lavoro facendo clic sul pulsante Salva nell’angolo in basso a destra, appena sopra l’area di anteprima.

Configurazione delle intercette

I creativi della finestra di dialogo
reattiva possono essere utilizzati con le intercette standard. Assicurati solo che quando imposti il creativo dell’intercetta, selezioni l’editor di intercetta della finestra di dialogo reattiva nella sezione Finestra di dialogo reattiva.