Quali varianti di visualizzazione del Trustbadge® esistono e come le integro nel mio negozio?

Una piccola nota: nel seguente tutorial ti illustreremo tutte le varianti di visualizzazione del Trustbadge con tutti i parametri disponibili, nonché i passaggi necessari per l’integrazione e la configurazione. L’introduzione si basa su questo tutorial, in cui ti spieghiamo come funziona la nostra integrazione standard: Cosa devo fare per inserire senza plugin il Trustbadge nel mio negozio online? Ti consigliamo quindi di portare a termine l’integrazione standard, prima di occuparti di questo tutorial.

Le varianti del Trustbadge

Le varianti reviews e default

trustbadge_trustmark_reviews_IT.pngtrustbadge_reviews_IT.png

Variante reviews (con e senza sigillo di qualità)

trustbadge_no_reviews_IT.png

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à.

In questo tutorial ti spieghiamo in dettaglio come puoi integrare una di queste varianti nel tuo negozio: Cosa devo fare per inserire senza plugin il Trustbadge nel mio negozio online?

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.

Il Trustbadge è impostato di default a 54 px ed è quindi visualizzato lontano dal bordo inferiore. Di conseguenza, per il parametro 'yOffset' non dovresti inserire un valore inferiore a -54.
'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

helpcenter_BILD.png

La variante custom

TB5-custom-trustmark-only_IT.pngreviews-only_IT.png

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.

Le seguenti istruzioni per l’integrazione si basano su questo tutorial: Cosa devo fare per inserire senza plugin il Trustbadge nel mio negozio online? Prima di continuare con le possibili modifiche illustrate di seguito, è essenziale che tu abbia prima completato tutti i passaggi dell'integrazione spiegati nel video.

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.

  1. 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.
  2. 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.

Se non hai ancora generato il codice del Trustbadge e non lo hai integrato nel tuo negozio, esegui icome prima cosa i passaggi contenuti in queste istruzioni: Cosa devo fare per inserire senza plugin il Trustbadge nel mio negozio online?

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.

La variante custom è disponibile solamente per i negozi con il sigillo di qualità Trusted Shops ed è visibile soltanto con il sigillo di qualità attivo. Se il tuo sigillo di qualità non è ancora stato attivato, ma vorresti vedere un’anteprima, puoi farlo per mezzo della console dello sviluppatore del tuo browser. Esegui semplicemente il comando trustbadge.showIntegrationPlaceholder();.

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.

mobile-trustmark-only.png

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.

mobile-trustmark_reviews.png

  • La variante topbar: si tratta di una barra orizzontale posizionata sopra l'intestazione, che mostra sia il sigillo di qualità sia le recensioni.

trustbadge-mobile-topbar_IT.jpg

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.
Oltre a queste varianti Trustbadge sviluppate appositamente per i dispositivi mobili, puoi utilizzare anche le varianti custom o custom_reviews nella presentazione mobile del tuo negozio online. Per scoprire come configurare queste varianti per le schermate mobili, puoi leggere questo articolo: Come posso modificare la visualizzazione del mio Trustbadge®?

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.


Questo articolo ti è stato utile?

Utenti che ritengono sia utile: 4 su 12