Widget di Visual UGC

In questo articolo:

Cosa sono i Widget di Visual UGC?

Come creare un nuovo Widget di Visual UGC?

Che tipologia di Widget è possibile creare?

Come posso integrare i widget sul mio sito?

Attributi ulteriori dei widget Visual UGC

Il widget comporta rallentamenti del sito?

Cosa sono i Widget di Visual UGC?

I widget di Visual UGC sono i caroselli o i wall ispirazionali costituiti dai contenuti Visual UGC che puoi inserire sul tuo sito per guidare i potenziali clienti

Come creare un nuovo Widget di Visual UGC?

Accedi all’Area Riservata di Feedaty alla sezione Visual UGC che trovi nel menù a sinistra. Clicca sulla voce “Crea widget”. In questa sezione troverai i widget già creati e la possibilità di crearne di nuovi (nota bene, se è il tuo primo utilizzo, non vedrai alcun widget preesistente) cliccando sul bottone Nuovo widget.

Cliccando su “Nuovo widget” si apre il configuratore dedicato, dove potrai editare i seguenti campi:

• Titolo e descrizione
• Tipologia: potrai scegliere tra “Tag” e “SKU Prodotto” (scopri la differenza qui)
• Tags album: inserisci i tag creati nella sezione “album” per integrare le foto appartenenti a specifici album
• Tags contenuti: inserisci i tag associati alle singole immagini per integrare le immagini nel widget
• Formato e impostazioni: seleziona e personalizza il formato widget che preferisci

Widget tag e SKU prodotto

Widget per “Tag”: questa tipologia di widget non è collegata a uno specifico prodotto, bensì è composta da immagini che sono state precedentemente organizzate associando dei tag diretti oppure organizzate in specifici album.

Compilando la voce ‘tag contenuti’ verranno automaticamente inserite nel widget tutte le immagini precedentemente associate a quel tag.

Compilando la voce ‘tag album’ verrà selezionato lo specifico album precedentemente creato con quel tag.

Consigliamo di integrare questi widget in pagine generiche del tuo sito web, come la home page, la pagina del carrello, il blog, la pagina delle categorie, … e mostrare ove possibile, almeno un prodotto associato per ogni contenuto.

Widget per “SKU Prodotto”: questa tipologia di widget mostrerà dinamicamente (parametrizzando il codice integrato con il valore “SKU” presente sul tuo sito web) tutte le immagini che sono state precedentemente associate ad uno o più specifici prodotti.

Consigliamo di integrare questi widget all’interno delle schede prodotto, così da mostrare dinamicamente le immagini associate a quel prodotto.

Il Widget una volta creato è modificabile?

Sì, il widget è sempre modificabile anche dopo essere stato creato e pubblicato sul tuo sito: in questo modo sarà sempre possibile adattarlo alle tue esigenze specifiche dopo la creazione iniziale, senza necessità di ulteriori interventi tecnici sul sito.

Basterà ritornare nella tua area riservata andare nella sezione di Visual UGC, "Crea Widget" e cliccare sul widget a cui si vogliono apportare modifiche.

I campi modificabili sono quelli appena visti sopra.

Che tipologia di Widget è possibile creare?

Che tipologia di Widget è possibile creare? 

1. il Widget Carosello incentrato sulla visualizzazione di contenuti Visual UGC in un formato di scorrimento, disponibile in 3 dimensioni diverse. 
2. il Widget Social Wall dedicato invece all'aggregazione e alla visualizzazione di contenuti provenienti dai social media, con un formato che si può definire come una "parete di immagini virtuali". Puoi decidere se avere tutte le immagini della stessa dimensione oppure più immagini in un unico riquadro, per mostrarne di più. 

Come posso integrare i widget sul mio sito? 

Una volta selezionate le foto e creato il widget, è tempo di integrarlo sul tuo sito. Alla sezione Visual UGC > Script widget trovi la libreria di anteprime disponibili per ciascun widget che hai creato. 

Scegli il widget dal primo elenco a tendina. Decidi la variante che ti piace di più tra le disponibili: 

Carosello 

• Variante 1: foto lasciate a proporzione reale. 

• Variante 2: foto adattate alla proporzione 1:1, come su Instagram. Dimensione piccola. 

• Variante 3: foto adattate alla proporzione 1:1, come su Instagram. Dimensione media. 
• Variante 4: foto adattate alla proporzione 1:1, come su Instagram. Dimensione grande. 

Wall 

• Variante 1: tutte le foto della stessa dimensione. 

• Variante 2: Blocchi alternati da foto intere e 4 foto insieme. 

 Infine scegli la lingua da utilizzare per l’interfaccia (l’opzione ‘All’ lascia la lingua di default del tuo account Feedaty). 

Scelti questi 3 parametri, puoi creare il codice cliccando su ‘Crea codice’, copiarlo, e andarlo a inserire dove preferisci sul tuo sito! 

Come posso integrare i widget sul mio sito?

Per inserire i widget sul sito devi inserire il codice seguente nella pagina in cui vuoi pubblicare la galleria ispirazionale.

<script class="feedaty_sdk" async type="text/javascript" src= https://widget.feedaty.com/v3.0.0/js/ugc/MERCHANT_CODE/feedaty_ugc.min.js></script>
<div class="feedaty_ugc_widget" data-type="ugc" data-variant="carosello-1" data-id="selettore1" data-gui="all" data-lang="all" data-sku="INSERT_SKU" data-secret="DATA_SECRET"></div>

Ogni widget creato genera una chiave univoca ( "data-secret").

Per la tipologia Widget SKU occorre valorizzare anche l'attributo "data-sku" con lo SKU/ Product ID presente in Feedaty.

Per costruire il codice corretto da inserire nel tuo sito devi sostituire all'interno del codice di esempio sopra indicato questi dati:

• Sostituire la parte evidenziata /MERCHANT_CODE/ nella chiamata al file JS con il merchant code presente in area riservata su “Pubblica le recensioni" > API”

• Sostituire l'attributo "DATA_SECRET" con la chiave di sicurezza che trovi in area riservata Feedaty nel tab "codice" della sezione "Widgets" dentro Visual UGC, il data secret è univoco e varia per ogni widget che viene creato in area riservata

Attributi ulteriori dei widget Visual UGC

• data-type: determina la tipologia di widget, i widget di Visual UGC devono avere questo attributo valorizzato con "ugc"
• data-variant: identifica la variante: carosello-1, carosello-2, wall-1, wall-2

Esistono due possibilità di visualizzazione del Widget carosello Visual UGC:

• Versione senza crop immagine "carosello-1": ogni immagine visualizzata all'interno del widget mantiene la sua dimensione originale

• Versione con il crop immagine "carosello-2": tutte le immagini vengono adattate per essere mostrate con la stessa dimensione

Esistono due possibilità di visualizzazione del widget Social Wall:

• Versione con il crop immagine "wall-1": tutte le immagini vengono adattate per essere mostrate con la stessa dimensione e in file simmetriche

• Versione senza Crop Immagine: "wall-2": le immagini vengono mostrate con dimensioni differenti e in modo asimmetrico.

• data-id: Indica l'id UNIVOCO del widget (formato stringa) - serve ad evitare conflitti tra più widget Feedaty
• data-gui="all": *Parametro obbligatorio - Determina la lingua della User Interface del widget, parametri disponibili:
  • null (in questo caso viene utilizzata la lingua di default dell'account del merchant Feedaty)
  • it-IT
  • en-US
  • es-ES
  • fr-FR
  • de-DE

Il widget comporta rallentamenti del sito?

Il widget funziona in modo asincrono, il che significa che non rallenta la visualizzazione della pagina. Questo perché il widget viene elaborato in background, mentre la pagina viene visualizzata nel browser. L'implementazione corretta del widget, garantendo la sua compatibilità con i principali browser, contribuirà a massimizzare i benefici forniti dal widget stesso senza causare svantaggi in termini di Google Score o della performance complessiva del sito.

In altre parole, il widget non rallenta la pagina perché viene elaborato mentre la pagina viene caricata. Questo significa che puoi usare il widget senza preoccuparti di rallentare la tua pagina web.

Per attivare Visual UGC scrivi a success@feedaty.com

Per supporto tecnico scrivi a support@feedaty.com