Come aggiungere i widget delle recensioni di Klaviyo alla sua app mobile usando Tapcart

Imparerai

Scopra come aggiungere i widget delle recensioni di Klaviyo a un'applicazione mobile costruita con Tapcart. Questi widget possono essere aggiunti alla sua applicazione Tapcart utilizzando blocchi personalizzati: 

• Widget per la valutazione in stelle
  Solo per le pagine dei prodotti; mostra la valutazione complessiva in stelle di un prodotto.
• Widget delle recensioni dei prodotti
  Solo pagine di prodotti; mostra un riepilogo e un elenco di tutte le recensioni per un prodotto, oltre ai pulsanti per porre una domanda o lasciare una recensione. 
• Widget carosello di recensioni in evidenza
  Qualsiasi pagina; mostri una selezione di recensioni in primo piano su diversi prodotti. 

Tapcart è disponibile solo per i negozi costruiti con Shopify.

Prima di iniziare

Questo processo è disponibile solo per le aziende che:

• Ha già costruito un'app mobile con Tapcart
• Utilizzi un piano Tapcart Enterprise
• Avere un piano attivo di recensioni Klaviyo

Se non ha ancora configurato le recensioni di Klaviyo, consulti il nostro articolo su come iniziare con le recensioni di Klaviyo.

Aggiungere i widget delle recensioni di Klaviyo utilizzando un blocco personalizzato in Tapcart

Segua questi passaggi per aggiungere un widget di recensioni in Tapcart. Dovrà ripetere questi passaggi (cioè creare un blocco personalizzato separato) per tutti e 3 i widget. 

1. Apra l'editor di Tapcart. 
2. In App Studio, passi da Blocchi di progettazione a Blocchi personalizzati.
   
3. Clicchi su Avvia editor blocchi per creare un nuovo blocco personalizzato. 
4. Assuma un nome chiaro per il widget, come il blocco personalizzato Klaviyo Star Rating. 
5. Nella scheda JS dell'editor di blocchi, aggiunga il seguente frammento di codice. Sostituisca PUBLIC_API_KEY con il suo 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);

6. Nella scheda HTML dell'editor di blocchi, incolli lo snippet del widget che desidera aggiungere (ad esempio, il widget delle stelle). Trovi gli snippet di codice qui sotto: 
1. Codice del widget della valutazione in stelle
2. Codice del widget delle recensioni dei prodotti
3. Codice del widget carosello di recensioni in primo piano
   
7. Clicchi su Salva. 
8. Clicchi su Chiudi per uscire dall'editor. 
9. Dal menu a tendina di App Studio, selezioni Dettagli prodotto.
   
   
   Questo passaggio è necessario per i widget delle valutazioni in stelle e delle recensioni dei prodotti. Può posizionare il widget delle recensioni in evidenza su qualsiasi pagina dell'applicazione. 
10. Trascini il blocco personalizzato salvato appena creato nel suo modello. 
11. L'editor potrebbe non caricare direttamente il widget; invece, vedrà il nome del blocco come testo normale. Questo è previsto. 
12. Clicchi su Anteprima della sua applicazione e si rechi alla pagina in cui ha aggiunto la sua applicazione. Si noti che il widget appare 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 per le recensioni dei 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'app

I widget delle recensioni di Klaviyo non appariranno automaticamente nell'anteprima di Tapcart, ma verranno caricati correttamente sulla sua applicazione. Questo perché i widget richiedono un ID prodotto reale per sapere quali recensioni visualizzare. Per visualizzare l'anteprima dei widget, aggiunga una variabile ID prodotto nel campo Valori di anteprima variabili dell'editor Tapcart. 

1. In Tapcart App Studio, selezioni Personalizzato per visualizzare i suoi widget personalizzati. 
2. Clicchi sull'icona con i tre puntini accanto a uno dei suoi blocchi widget di recensioni e faccia clic su Avvia editor. 
3. Clicchi su Impostazioni. 
   
4. Scorra o cerchi nel JSON per trovare la variabile id all'interno dell'oggetto prodotto. Si noti che ci sono altre variabili id all'interno di altri oggetti; è sufficiente modificare l'ID del prodotto mostrato qui. 
   
5. Sostituisca l'ID del prodotto campione con l'ID di un prodotto del suo negozio che ha almeno 1 recensione. Per trovare l'ID di un prodotto, si rechi su Contenuto > Prodotti in Klaviyo, quindi copi l'ID di un articolo. 
   
6. Clicchi su Salva. 
7. Ripeta questi passaggi per gli altri blocchi widget di recensioni. 
8. Se le anteprime non appaiono subito correttamente, aggiorni l'editor. 

Widget dell'app di stile 

Qualsiasi modifica apportata nell'editor principale dei widget sarà applicata sia al suo sito web che alla sua applicazione. Per applicare le modifiche solo alla sua applicazione, aggiunga il CSS personalizzato nella scheda CSS dell'editor di blocchi personalizzati di Tapcart. Impari ad utilizzare i CSS personalizzati per lo stile dei widget di Klaviyo Reviews. 

Risorse aggiuntive

• Come richiedere recensioni ai suoi clienti con i flussi di recensioni di Klaviyo
• Come moderare le recensioni di Klaviyo
• Klaviyo recensisce i dati di riferimento