Le varianti del Trustbadge
Le varianti reviews e default
Variante reviews (con e senza sigillo di qualità)
Variante default
Mentre la variante reviews visualizza sia le stelle di valutazione sia il tuo sigillo di qualità, con la variante default puoi limitarti alla presentazione del tuo sigillo di qualità.
Tramite i seguenti parametri del codice del Trustbadge hai la possibilità di configurare le varianti reviews e default in base alle tue esigenze individuali:
'yOffset': '0', /* offset from page bottom */
Per impostazione predefinita, il Trustbadge sarà visualizzato nell’angolo in basso a destra del tuo negozio. Tramite il parametro 'yOffset' puoi spostare il Trustbadge sull’asse verticale. Inserisci semplicemente il numero di pixel desiderato al posto dello 0 per spostare il Trustbadge verso l’alto. Naturalmente è anche possibile spostare il Trustbadge verso il basso. Inserisci a tal fine semplicemente un valore negativo corrispondente.
'variant': 'reviews', /* default, reviews, custom, custom_reviews */
Il Trustbadge esiste in quattro varianti. Tramite il parametro 'variant’ decidi quale delle varianti deve essere visualizzata nel tuo negozio. Per impostazione predefinita è selezionata la variante reviews. Se preferisci un’altra variante, sostituisci il valore reviews con default, custom_reviews o custom nella riga di codice.
'disableResponsive': 'false', /* deactivate responsive behaviour */
Per impostazione predefinita, il Trustbadge si adatta in modo automatico alla dimensione dello schermo utilizzata dai tuoi clienti. Il Trustbadge è ottimizzato anche per i dispositivi mobile. Si trasforma automaticamente nella varante mobile per gli schermi pari o inferiori a 648 px. Se cambi il valore da false a true nel parametro 'disableResponsive', questa modifica automatica sarà impedita. Sarà invece mostrata la versione desktop del Trustbadge anche sul dispositivo mobile.
'disableTrustbadge': 'false' /* deactivate trustbadge */
Tramite questo parametro puoi gestire la visualizzazione del Trustbadge nel tuo negozio. Se imposti il valore del parametro da false a true, il Trustbadge sarà nascosto. Tuttavia, la Trustcard apparirà sulla pagina di conferma d’ordine, consentendo ai tuoi clienti di dare il proprio consenso agli inviti di recensione e di potersi iscrivere alla garanzia.
Le varianti custom e custom_reviews
La variante custom
La variante custom_reviews (con e senza sigillo di qualità)
Al contrario delle varianti reviews e default fisse sul bordo destro del tuo negozio, le varianti custom e custom_reviews sono posizionabili in modo flessibile. Se desideri incorporare una di queste varianti nel tuo negozio, esegui i passaggi delle seguenti istruzioni per l’integrazione.
Passaggio 1: Crea un elemento DIV
Per poter utilizzare una delle due varianti del Trustbadge custom e custom_reviews, devi creare innanzitutto un elemento DIV. A questo scopo, copia il seguente codice HTML nel punto del tuo sistema negozio in cui deve apparire il Trustbadge. Le posizioni possibili sarebbero, ad esempio, nell’intestazione o nel piè di pagina.
<div id="MyCustomTrustbadge" style="width:160px;height:80px"></div>
All’interno di questo codice HTML hai due possibilità di personalizzazione.
- Puoi assegnare un nuovo ID per l’elemento DIV. A questo scopo sostituisci semplicemente il valore MyCustomTrustbadge con un nome a tua scelta. Se effettui una modifica dell’ID a questo punto, annota bene l’ID che definisci. Ti servirà poi di nuovo nel passaggio 3.
- Tramite le proprietà width e height puoi adattare la larghezza e l’altezza del Trustbadge. Sostituisci quindi i valori delle cifre dietro a width (larghezza) e height (altezza) in base alle tue esigenze. Fai attenzione alle proporzioni originarie (larghezza:altezza) del Trustbadge pari a 2:1 nella variante custom_reviews rispetto alla variante custom 1:1.
Passaggio 2: Seleziona la tua variante preferita del Trustbadge
Vai nel plugin o nel file template in cui hai memorizzato il codice del Trustbadge.
Definisci all’interno del codice del Trustbadge tramite il parametro 'variant’ quale variante di Trustbadge vuoi utilizzare nel tuo negozio. Inserisci il valore custom o custom_reviews per il parametro. Dopo la modifica, la riga di codice dovrebbe apparire come segue:
'variant': 'custom', /* reviews, default, custom, custom_reviews */
oppure così:
'variant': 'custom_reviews', /* reviews, default, custom, custom_reviews */
Passaggio 3: Collega il codice del Trustbadge e l’elemento DIV
Inserisci infine, nel caso non fosse già presente, la seguente riga di codice nel codice del Trustbadge:
'customElementId': 'MyCustomTrustbadge', /* required for variants custom and custom_reviews */
Il parametro 'customElementId' è il punto di riferimento per l’elemento DIV creato nel passaggio 1 e lo collega con il tuo codice Trustbadge. Se hai effettuato una modifica dell’ID nel passaggio 1, sostituisci il valore MyCustomTrustbadge anche all’interno di questo parametro tramite l’ID dell’elemento DIV che hai definito.
Passaggio opzionale 4: Determina la direzione dell’apertura del Trustbadge
Il Trustbadge minimizzato accompagna costantemente la clientela nel tuo negozio online. Tramite un clic sul Trustbadge i tuoi clienti possono ingrandirlo per ottenere ulteriori informazioni sul tuo sigillo di qualità o su tutte le recensioni raccolte. A prescindere dal punto in cui l’hai posizionato nel tuo negozio online, il Trustbadge si ingrandisce per impostazione predefinita nella direzione in cui ha maggiore spazio.
Tuttavia puoi assegnare al Trustbadge anche una direzione fissa in cui si deve ingrandire. Come prima cosa devi inserire – nel caso non fosse ancora presente – la seguente riga di codice nel codice del Trustbadge:
'trustcardDirection': '', /* topRight, topLeft, bottomRight, bottomLeft */
Stabilisci ora la direzione inserendo uno dei codici seguenti per il parametro:
- 'topRight' per un ingrandimento verso l’alto a destra.
- 'topLeft' per un ingrandimento verso l’alto a destra.
- 'bottomRight' per un ingrandimento verso il basso a destra.
- 'bottomLeft' per un ingrandimento verso il basso a sinistra.
Per un ingrandimento verso l’alto a destra, la riga di codice dovrebbe apparire come segue dopo le tue personalizzazioni.
'trustcardDirection': 'topRight', /* topRight, topLeft, bottomRight, bottomLeft */
In questo modo hai concluso l’integrazione della variante custom o custom_reviews e ora puoi verificare la visualizzazione del Trustbadge nel tuo negozio online.
Nota: il Trustbadge appare ancora nell’angolo in basso a destra? Allora verifica
- se nel parametro 'variant' hai effettivamente inserito custom o custom_reviews come valore,
- oppure se nel parametro 'customElementId' hai indicato l’ID dell’elemento DIV creato nel passaggio 1;
- se hai definito l’altezza e la larghezza dell’elemento DIV come descritto nel passaggio 1.
In questi casi, nella console dello sviluppatore del tuo browser dovresti ottenere segnalazioni con ulteriori note.
Le varianti mobili del Trustbadge floating, floating_reviews e topbar
Naturalmente, Trusted Shops ti offre anche varianti di visualizzazione mobili del Trustbadge. Queste saranno visualizzate per impostazione predefinita - quindi se non hai cambiato il valore per il parametro 'disableResponsive' in true - più piccole e con una dimensione dello schermo di 648 px.
La variante floating qui raffigurata è la variante mobile standard del Trustbadge. Al contrario delle varianti reviews e default sarà visualizzata per impostazione predefinita nell’angolo in basso a sinistra. Inoltre, mostra esclusivamente il sigillo di qualità.
Se desideri presentare anche le stelle di valutazione hai due possibilità:
- La variante floating_reviews: come la variante floating, anche questa sarà visualizzata per impostazione predefinita nell’angolo in basso a sinistra del tuo negozio online. Al contrario della variante floating, saranno tuttavia rappresentate anche le stelle di valutazione.
- La variante topbar: si tratta di una barra orizzontale posizionata sopra l'intestazione, che mostra sia il sigillo di qualità sia le recensioni.
Per configurare la visualizzazione del tuo Trustbadge mobile, copia la seguente riga di codice e inseriscila sotto il parametro 'variant' nel codice del Trustbadge:
'responsive': {'variant':'floating', 'position':'left', 'yOffset':'0'},
All’interno di questo parametro hai tre possibilità di configurazione:
- Tramite il valore che inserisci per 'variant' determini quale variante del Trustbadge desideri offrire per le dimensioni dello schermo inferiori a 648 px. Sono disponibili le varianti floating e floating_reviews, nonché quella topbar. Inserisci la tua variante preferita come valore per 'variant’.
- Le varianti floating e floating_reviews non sono fisse sul bordo sinistro del tuo negozio. Tramite il valore che inserisci per 'position', definisci il posizionamento orizzontale di queste due varianti. Oltre al valore predefinito 'left' puoi anche scegliere 'center’ per un posizionamento centrale e 'right’ per un posizionamento sul bordo destro. Invece per la variante topbar non è possibile il posizionamento orizzontale, in quanto la barra si estende per l’ampiezza totale dello schermo.
- Per le varianti floating e floating_reviews, è possibile inoltre modificare il posizionamento verticale, tramite il valore per 'yOffset'. Sostituisci semplicemente lo 0 con un numero di pixel a piacere per spostare il Trustbadge mobile verso l’alto. Anche per la variante topbar non è possibile definire il posizionamento verticale. La variante è fissa sul bordo superiore dello schermo.
Parametro aggiuntivo
Posizionamento flessibile della Trustcard (custom-checkout)
Ovviamente puoi posizionare liberamente la Trustcard anche sulla pagina di conferma d’ordine. Questa impostazione non è legata alle varianti custom e custom_reviews, ma può essere impiegata anche con le varianti reviews e default. Segui le istruzioni presentate qui sotto.
Passaggio 1: Crea un elemento DIV sulla pagina di conferma d’ordine
Innanzitutto devi creare un elemento DIV nel punto della pagina di conferma d’ordine in cui deve apparire la Trustcard. Inserisci quindi semplicemente la riga di codice seguente nella posizione corrispondente:
<div id="customCheckoutDiv"></div>
customCheckoutDiv è l’ID predefinito dell’elemento DIV. Naturalmente puoi anche sostituire questo ID con un nome a tua scelta. In questo caso, comunque, ricordati di utilizzare questo ID nel passaggio successivo anche nel codice del Trustbadge.
Passaggio 2: Collega il codice del Trustbadge e l’elemento DIV
Inserisci sotto la riga del codice 'variant' la seguente riga di codice nel codice del tuo Trustbadge:
'customCheckoutElementId': 'customCheckoutDiv',
Il parametro 'customCheckoutElementId' è il punto di riferimento per l’elemento DIV creato nel passaggio 1 e lo collega con il codice del tuo Trustbadge. Se nel passaggio 1 hai effettuato una modifica dell’ID, sostituisci il valore customCheckoutDiv anche all’interno di questo parametro tramite l’ID dell’elemento DIV che hai definito.
In questo modo hai posizionato la Trustcard in modo efficace nel punto che hai scelto. Ora verifica l’impostazione eseguendo un ordine di prova nel tuo negozio. Se la Trustcard appare nella posizione desiderata, l’integrazione è avvenuta con successo.