Come aprire la finestra della chat con un link

Puoi aprire la finestra della chat usando un deep link senza modificare il codice del tuo tema. Nel Theme Editor di Shopify, ti basta aggiungere l’hashtag #shoply-ai-chatbot a qualsiasi pulsante, icona o elemento di testo. Quando i clienti fanno clic su questi elementi, la finestra della chat si aprirà automaticamente.

Esempio dal vivo: demo.shoplyai.ai

Passaggi:

Modifica il pulsante, il testo o l’icona desiderati nel tuo editor del tema.
Imposta il link o l’URL su #shoply-ai-chatbot.

Esempi:

Usa un pulsante per aprire la finestra della chat:

Usa un testo con link per aprire la finestra della chat:

Aprire la chat con domande specifiche sul prodotto

Aggiungi un pulsante “Domande su questo prodotto?” a una pagina prodotto per aiutare i visitatori a fare domande su quell’articolo. Imposta il suo link su #shoply_product_questions. Facendo clic, si apre la chat con il nome del prodotto, un breve punto saliente del prodotto e domande generate automaticamente pertinenti a quel prodotto.

Nel Theme Editor di Shopify, apri il template del prodotto e aggiungi o modifica un pulsante o un testo con link che supporti un URL.
Imposta l’etichetta su “Domande su questo prodotto?” e il link su #shoply_product_questions.
Salva, visita una pagina prodotto e fai clic sul link per verificare le domande sul prodotto.

Se il tuo tema non offre un’impostazione adatta per pulsanti o link, aggiungi questo link nell’HTML del template del prodotto:

html


<a href="#shoply_product_questions">Question About This Product?</a>

Usa questo link su una pagina prodotto in modo che Shoply abbia il contesto del prodotto. Puoi anche condividere un URL completo del prodotto che termina con #shoply_product_questions.

Prova la chat con domande sul prodotto per Bent 85 Skis . I suggerimenti includono domande su peso degli sci, anima, profilo rocker e grafica del topsheet. I visitatori possono selezionare un suggerimento oppure digitare la propria domanda.

Per esempi su dove usare questi link, consulta domande sui prodotti basate sull’AI nella nostra guida per sostituire la pagina FAQ.

Queste domande sul prodotto vengono generate automaticamente. Le domande iniziali che configuri in Customize AI Chat si applicano invece all’apertura standard della chat.

Aprire la chat con una domanda precompilata

Vuoi aprire la finestra della chat e inviare automaticamente una domanda? Puoi farlo usando un frammento hash (consigliato) oppure un parametro query dell’URL.

È perfetto per creare link diretti verso argomenti comuni come politica di spedizione, politica di reso o richieste sui prodotti.

Consigliato: frammento hash (senza ricaricare la pagina)

Usa il frammento hash #shoply_question=. Poiché l’hash viene elaborato interamente nel browser, facendo clic su questo link la pagina non verrà ricaricata, e l’eventuale cronologia della chat esistente verrà preservata.

Formato:

plaintext


https://your-store.com#shoply_question=your question here

Esempi:

Politica di spedizione: https://your-store.com#shoply_question=What is your shipping policy?
Resi: https://your-store.com#shoply_question=How do I return an item?
Stato dell’ordine: https://your-store.com#shoply_question=Where is my order?
Scoperta prodotti: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Puoi combinarlo con qualsiasi pagina del tuo negozio. Per esempio, per aprire il chatbot con una domanda in una pagina prodotto specifica:

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

Legacy: parametro query dell’URL

Il parametro query ?shoply_question= è ancora supportato per compatibilità con le versioni precedenti. Tieni presente che aggiungere un parametro query a un URL in cui il cliente si trova già causerà un ricaricamento della pagina.

Formato:

plaintext


https://your-store.com?shoply_question=your question here

Nota: Ricorda di codificare l’URL della tua domanda quando usi caratteri speciali o spazi. La maggior parte dei browser lo gestisce automaticamente, ma se stai aggiungendo i link in modo programmatico, usa una codifica URL corretta (ad esempio, gli spazi diventano %20).

Quando un cliente fa clic su uno dei due tipi di link, la finestra della chat si aprirà automaticamente e la domanda verrà inviata al chatbot AI, fornendo una risposta immediata.

Casi d’uso:

Aggiungi un link “Chiedi informazioni sulla spedizione” nel footer
Crea codici QR che aprono il chatbot con domande specifiche
Includi link utili nelle tue campagne email o nelle conferme d’ordine
Aggiungi link di aiuto contestuali nelle pagine prodotto (ad esempio, “Chiedi informazioni sulle taglie”)

Come usare un deep link per aprire la finestra della chat (è necessario modificare il codice nel template del tema)

Nella sezione precedente, abbiamo visto come usare l’hashtag (deep link) per attivare la finestra della chat aggiungendolo a qualsiasi pulsante, icona o testo direttamente dal Theme Editor, senza modificare il codice del tema.

Tuttavia, se desideri avere piena flessibilità per aggiungere il deep link in qualsiasi punto del tuo negozio (ad esempio creando una nuova icona nell’header), dovrai modificare il codice del template.

Di seguito trovi semplici esempi di codice HTML che puoi usare per creare nuove icone nel template del tuo tema:

Esempi di codice

1. Icona chat

Il codice qui sotto aggiunge un’icona chat:

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. Icona stella AI

Il codice qui sotto aggiunge una stella AI:

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Metodo con chiamata di funzione

Oltre a usare gli hashtag, puoi anche inserire la chiamata di funzione openShoplyAIChatBot() nell’attributo onclick di qualsiasi pulsante/icona, in modo che i clienti vedano la finestra della chat quando fanno clic sul pulsante/sull’icona.

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

Hai bisogno di aiuto?

Puoi usare uno qualsiasi degli esempi sopra e inserire il codice accanto all’icona di ricerca nel file sections/header.liquid, per aggiungere il deep link della chat all’header del tuo negozio.

Tuttavia, se non ti senti del tutto a tuo agio a modificare il codice nel template del tuo tema, non preoccuparti!

Sentiti libero di prenotare un incontro con noi , e saremo felici di aiutarti a configurare l’icona perfetta nel punto ideale per adattarsi allo stile unico del tuo negozio.

Come nascondere l’icona flottante?

Una volta configurato il deep link per aprire la finestra della chat, potresti voler nascondere l’icona flottante. Inoltre, i proprietari dei negozi spesso dicono che avere troppe icone flottanti sui loro siti web può risultare opprimente. Comprendiamo le tue preoccupazioni! Ecco perché abbiamo introdotto una funzione per nascondere l’icona della chat.

Nella sezione “Customize AI Chat” della console di amministrazione dell’app, nelle impostazioni Select a Chat Icon, ora puoi selezionare l’opzione:

“Hide floating icon and use deep link to open chat”.

Questo ti permette di nascondere l’icona flottante continuando comunque a consentire l’apertura della finestra della chat tramite un deep link.