Creare Pop-up con HTML personalizzato offre al tuo team completa libertà creativa per adattarli esattamente alle linee guida del tuo brand e ai requisiti di design. Se preferisci un'alternativa visiva e senza codice, puoi progettare i Pop-up utilizzando il visual builder in "Website Experience".
Quando utilizzi HTML personalizzato, seguire le regole di interazione descritte in questa guida garantisce che i dettagli dei contatti vengano mappati correttamente nel tuo workspace e che le statistiche sulle prestazioni del tuo Pop-up (comprese le interazioni mostrate, cliccate e inviate) vengano registrate con precisione.
I campi di input di base nei Pop-up raccolgono i dettagli essenziali dei contatti, come nomi, indirizzi email o numeri di telefono. Per garantire una corretta mappatura dei dati in Positive User, l'attributo name di ogni campo di input deve corrispondere al nome del campo del contatto associato. Positive User supporta campi standard come "First name", "Last name" e "Phone number", oltre a campi personalizzati definiti per esigenze specifiche di business come consensi marketing o statistiche e-commerce. Specificare il tipo di campo (come text, email o number) e aggiungere un testo segnaposto descrittivo guida i contatti e garantisce una raccolta dati accurata.
I campi di input obbligatori garantiscono che i contatti forniscano informazioni essenziali prima di inviare un form del Pop-up. Includi l'attributo required nell'elemento input per abilitare la validazione a livello di browser, invitando i contatti a completare il campo prima dell'invio. Abbinare questo a un testo segnaposto o a etichette chiare ne migliora l'usabilità.
Esempio: input obbligatorio
<input type="email" name="email" placeholder="Enter your email address" required>In questo esempio:
type="email" garantisce che l'input venga validato come indirizzo email.
name="email" mappa il campo all'attributo email del contatto nel tuo workspace Positive User.
"required" garantisce che il campo debba essere compilato prima dell'invio del form.
placeholder="Enter your email address" guida il contatto.
I campi di input facoltativi completano quelli obbligatori consentendo ai contatti di fornire dati aggiuntivi non obbligatori. Per configurare un campo facoltativo, includi l'attributo name per la mappatura dei dati, ma ometti l'attributo required.
Esempio: configurazione di campi di input obbligatori e facoltativi
<input type="email" name="email" placeholder="Enter your email address" required>
<input type="text" name="first_name" placeholder="Enter your first name (optional)">In questo esempio:
L'input "email" è obbligatorio perché include l'attributo required.
L'input "first name" è facoltativo perché l'attributo required è omesso.
name="email" e name="first_name" garantiscono che i dati vengano mappati sui campi corretti in Positive User.
Una singola casella di controllo viene spesso utilizzata per scelte binarie, come concedere un consenso. Utilizza <input type="checkbox"> e mappa l'attributo name al campo del contatto in Positive User. Quando la casella viene selezionata, il valore "true" viene inviato a Positive User. Racchiudere l'input in un tag <label> rende il testo cliccabile e migliora l'usabilità.
Esempio: casella di controllo per il consenso alla newsletter
<label>
<input type="checkbox" name="newsletter_consent">
I agree to receive the newsletter.
</label>In questo esempio:
type="checkbox" crea una singola casella di controllo.
name="newsletter_consent" mappa l'input al campo del contatto "newsletter_consent".
<label> rende il testo cliccabile, migliorando l'usabilità.
Gli input a scelta fissa consentono ai contatti di selezionare una o più opzioni predefinite da un elenco, ideali per raccogliere dati su interessi o preferenze di comunicazione. Utilizza più elementi <input type="checkbox"> che condividono lo stesso attributo name, in modo che tutti i valori selezionati vengano mappati su quell'unico campo del contatto. Prima di aggiungerli al codice, vai su "Workspace Settings" → "Attributes" per creare il campo personalizzato e definirne le opzioni. Il valore dell'attributo nel tuo HTML deve corrispondere esattamente al nome dell'opzione creata nelle impostazioni del workspace.
Esempio: configurazione di input a scelta multipla
<p>What topics are you interested in?</p>
<label>
<input type="checkbox" name="interests" value="product_updates">
Product Updates
</label>
<br>
<label>
<input type="checkbox" name="interests" value="monthly_newsletter">
Monthly Newsletter
</label>
<br>
<label>
<input type="checkbox" name="interests" value="special_offers">
Special Offers
</label>In questo esempio:
type="checkbox" crea una casella selezionabile per ciascuna opzione.
name="interests" è uguale per tutti e tre gli input. Questo li raggruppa, garantendo che tutti i valori selezionati vengano salvati nel campo del contatto "Interests".
value="..." specifica il testo univoco che verrà salvato per ciascuna opzione quando viene selezionata. Importante: i valori forniti nell'attributo value (ad esempio "product_updates") devono essere stati creati in precedenza come opzioni per il corrispondente campo personalizzato (ad esempio "Interests") all'interno del tuo workspace. Il valore nell'HTML deve corrispondere esattamente all'opzione creata nell'app.
L'elemento <label> migliora l'usabilità consentendo ai contatti di cliccare sul testo per selezionare la casella di controllo corrispondente.
Configura i pulsanti di invio per elaborare le sottomissioni dei form e raccogliere statistiche importanti sulle prestazioni del tuo Pop-up.
Assegna id="submitButton" a un elemento pulsante all'interno del tuo tag <form>. Questo ID specifico è fondamentale per attivare il reindirizzamento e per raccogliere le statistiche di invio del Pop-up in Positive User. Permette di validare gli input, mappare i campi, monitorare le statistiche di invio e avviare workflow automatizzati.
Esempio: form con input e pulsante di invio
<form>
<input type="email" name="email" placeholder="Enter your email address" required>
<button id="submitButton">Submit</button>
</form>Configura un pulsante di invio che reindirizzi i contatti a un'altra pagina utilizzando un tag anchor <a> con id="submitButton". Questo ID specifico è fondamentale perché attiva il reindirizzamento consentendo al contempo a Positive User di raccogliere le statistiche di invio del Pop-up. Utilizza l'attributo href nel tag <a> per specificare l'URL di destinazione, rendendo questa configurazione ideale per indirizzare i contatti a pagine di ringraziamento o offerte speciali dopo il clic.
Se il tuo pulsante include elementi annidati complessi (come testo stilizzato o immagini), assicurati che solo il tag <a> stesso riceva l'evento clic. Applica pointer-events: none; tramite CSS a tutti gli elementi all'interno del tag <a> per evitare che gli elementi interni blocchino il reindirizzamento o il tracciamento dei clic.
Esempio: configurazione di un pulsante di reindirizzamento con elementi annidati
<a id="submitButton" href="https://example.com/thank-you">
<b>Click here to continue</b>
<img src="https://example.com/image.png" alt="Submit" onerror="this.style.display='none'">
</a>
<style>
#submitButton * {
/* This prevents any element inside the link from capturing the click event. */
pointer-events: none;
}
</style>Consenti ai contatti di chiudere i Pop-up in modo pulito senza inviare dati.
Aggiungi l'attributo data-dismiss="true" a qualsiasi elemento HTML valido, come un'icona di chiusura <span> o <svg>. Cliccando su questo elemento si segnala a Positive User di chiudere il Pop-up e di tracciare l'azione di chiusura.
Esempio: configurazione di un pulsante di chiusura
<!-- Using a span element -->
<span data-dismiss="true" class="close-icon">×</span>Per impostazione predefinita, l'overlay (l'area di sfondo esterna al contenuto del Pop-up) può anch'esso chiudere il Pop-up. Tuttavia, se un contatto clicca accidentalmente all'interno del Pop-up e il suo clic finisce sull'area dell'overlay all'interno dell'iframe, può chiuderlo involontariamente. Per evitarlo, puoi aggiungere uno script che garantisca che solo i clic diretti sullo sfondo dell'overlay attivino un'azione di chiusura.
// Handle overlay clicks to close popup
document.querySelector('.ue-overlay').addEventListener('click', function (event) {
// Only close if clicking directly on the overlay background
if (event.target === this) {
// Find and click the close button to trigger User.com's close function
const closeBtn = document.querySelector('[data-dismiss="true"]');
if (closeBtn) {
closeBtn.click();
}
}
});L'unico metodo valido per chiudere un Pop-up in Positive User è utilizzare l'attributo data-dismiss="true". Non devi mai scrivere JavaScript personalizzato per nascondere manualmente il Pop-up.
Poiché il Pop-up viene visualizzato all'interno di un <iframe> che copre l'intera pagina, utilizzare codice personalizzato per nascondere il contenuto del Pop-up lo renderà semplicemente invisibile. L'<iframe> stesso rimarrà attivo, coprendo la pagina sottostante e bloccando tutti i clic. Si tratta di un errore critico che può rendere il tuo sito web inutilizzabile per i visitatori.