Come aggiungere i widget di Klaviyo Reviews alla tua app mobile usando Tapcart

Cosa imparerai

Scopri come aggiungere i widget Klaviyo Reviews a un'app mobile creata con Tapcart. Questi widget possono essere aggiunti alla tua app Tapcart usando blocchi personalizzati:

• Widget di valutazione a stelle
  Solo pagine prodotto; mostra la valutazione a stelle complessiva di un prodotto
• Widget per le recensioni sui prodotti
  Solo pagine prodotto; mostra un riepilogo e l'elenco di tutte le recensioni per un prodotto, oltre ai pulsanti per fare una domanda o lasciare una recensione
• Widget carosello di recensioni in primo piano
  Qualsiasi pagina; mostra una selezione di recensioni in primo piano su più prodotti

Tapcart è disponibile solo per i negozi creati con Shopify.

Prima di iniziare

Questo processo è disponibile solo per le aziende che:

• Hai già creato un’app mobile con Tapcart
• Usa un piano Tapcart Enterprise
• Avere un piano Klaviyo Reviews attivo

Se non hai ancora configurato Klaviyo Reviews, consulta il nostro articolo sui Primi passi con Klaviyo Reviews.

Aggiungi i widget di Klaviyo Reviews usando un blocco personalizzato in Tapcart

Segui questi passaggi per aggiungere qualsiasi widget di recensioni in Tapcart. Dovrai ripetere questi passaggi (ovvero creare un blocco personalizzato separato) per tutti e 3 i widget.

1. Apri l'editor Tapcart.
2. In App Studio, passa da Blocchi di progettazione a Blocchi personalizzati.
   

3. Fai clic su Avvia l'editor Blocchi per creare un nuovo blocco personalizzato.
4. Assegna al widget un nome chiaro, ad esempio Blocco personalizzato Valutazione a stelle di Klaviyo.
5. Nella scheda JS dell’editor di blocchi, aggiungi il seguente snippet di codice. Sostituisci PUBLIC_API_KEY con il tuo ID sito Klaviyo di 6 caratteri.
   

var script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.src = 'https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js&module=reviews';
document.head.appendChild(script);

1. Nella scheda HTML dell’editor dei blocchi, incolla lo snippet del widget che vuoi aggiungere (ad es. il widget di valutazione a stelle). Trova gli snippet di codice qui sotto:
   1. Codice widget di valutazione a stelle
   2. Codice del widget delle recensioni di prodotti
   3. Codice del widget con carosello di recensioni in evidenza
      

2. Clicca su Salva.
3. Fai clic su Chiudi per uscire dall'editor.
4. Dal menu a discesa App Studio, seleziona Dettaglio prodotto.
   
   

1. Trascina nel tuo modello il blocco personalizzato salvato che hai appena creato.
2. L’editor potrebbe non caricare il widget direttamente; invece, vedrai il nome del blocco come testo normale. È previsto.
3. Fai clic su Anteprima della tua app e vai alla pagina in cui hai aggiunto la tua app. Assicurati che il widget venga visualizzato correttamente.

snippet di codice

Widget di valutazione a stelle

<div class="klaviyo-star-rating-widget" data-id="{{product.id}}" data-product-title="{{product.title}}" data-product-type="{{product.type}}"></div>

Widget delle recensioni di prodotti

<div id="klaviyo-reviews-all" data-id="{{product.id}}"></div>

Carosello di recensioni in evidenza

<div id="klaviyo-featured-reviews-carousel"></div>

Anteprima dei widget dell'applicazione

I widget di Klaviyo Reviews non verranno visualizzati automaticamente nell’anteprima di Tapcart, ma verranno caricati correttamente nella tua app. Questo perché i widget richiedono un ID prodotto reale per sapere quali recensioni mostrare. Per visualizzare in anteprima i widget, aggiungi una variabile ID prodotto nel campo Variable Preview Values nell’editor di Tapcart.

1. In Tapcart App Studio, seleziona Personalizzato per visualizzare i tuoi widget personalizzati.
2. Fai clic sull’icona con i tre puntini accanto a uno dei tuoi blocchi widget di recensione e fai clic su Avvia editor.
3. Fai clic su Impostazioni.
   

4. Scorri o cerca nel JSON per trovare la variabile id all’interno dell’oggetto product. Tieni presente che ci sono altre variabili id in altri oggetti; devi modificare solo l’ID prodotto mostrato qui.
   

5. Sostituisci l’ID prodotto di esempio con l’ID di un prodotto nel tuo negozio che abbia almeno 1 recensione. Per trovare un ID prodotto, vai a Contenuti > Prodotti in Klaviyo, quindi copia l’ID di un articolo.
   

6. Clicca su Salva.
7. Ripeti questi passaggi per gli altri blocchi widget di recensione.
8. Se le anteprime non vengono visualizzate correttamente subito, aggiorna l'editor.

Stile dei widget dell’app

Eventuali modifiche apportate nell’editor principale del widget si applicheranno sia al tuo sito web che alla tua app. Per applicare le modifiche solo alla tua app, aggiungi CSS personalizzato alla scheda CSS dell’editor dei blocchi personalizzati in Tapcart. Scopri come usare CSS personalizzato per applicare uno stile ai widget di Klaviyo Reviews.

Risorse aggiuntive