Come utilizzare un deep link per aprire la finestra della chat (senza modificare il codice del tema)

Puoi aprire la finestra della chat utilizzando un deep link senza modificare il codice del tema. Nell’editor del tema Shopify, aggiungi semplicemente 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 apre automaticamente.

Esempio dal vivo: demo.shoplyai.ai

Passaggi:

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

Esempi:

Utilizzare un pulsante per aprire la finestra della chat:

Utilizzare un testo collegato per aprire la finestra della chat:

Aprire la chat con una domanda precompilata

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

È perfetto per creare link diretti ad argomenti comuni come la politica di spedizione, la politica dei resi o domande sui prodotti.

Consigliato: frammento hash (nessun ricaricamento della pagina)

Utilizza il frammento hash #shoply_question=. Poiché l’hash viene elaborato interamente nel browser, facendo clic su questo link la pagina non verrà ricaricata e la 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 dei prodotti: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Puoi combinarlo con qualsiasi pagina del tuo negozio. Ad esempio, per aprire il chatbot con una domanda sulla pagina di un prodotto specifico:

plaintext


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

Legacy: parametro di query nell’URL

Il parametro di query ?shoply_question= è ancora supportato per la compatibilità con le versioni precedenti. Tieni presente che aggiungere un parametro di query a un URL sulla pagina in cui si trova già il cliente 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 utilizzi caratteri speciali o spazi. La maggior parte dei browser lo gestirà automaticamente, ma se aggiungi link a livello programmatico, utilizza 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 apre automaticamente e la domanda viene inviata al chatbot AI, che fornisce una risposta immediata.

Casi d’uso:

Aggiungere nel piè di pagina un link “Chiedi informazioni sulla spedizione”
Creare codici QR che aprono il chatbot con domande specifiche
Includere link utili nelle campagne email o nelle conferme d’ordine
Aggiungere link di assistenza contestuale nelle pagine dei prodotti (ad esempio, “Chiedi informazioni sulle taglie”)

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

Nella sezione precedente abbiamo spiegato come utilizzare l’hashtag (deep link) per attivare la finestra della chat aggiungendolo direttamente a qualsiasi pulsante, icona o testo dall’editor del tema, senza modificare il codice del tema.

Tuttavia, se desideri la massima flessibilità per aggiungere il deep link in qualsiasi punto del tuo negozio (ad esempio, creando una nuova icona nell’intestazione), dovrai modificare il codice del modello.

Di seguito sono riportati alcuni semplici esempi di codice HTML che puoi utilizzare per creare nuove icone nel modello del tema:

Esempi di codice

1. Icona della chat

Il codice seguente aggiunge un’icona della 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 a stella AI

Il codice seguente 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 a una funzione

Oltre a utilizzare gli hashtag, puoi anche inserire la chiamata alla funzione openShoplyAIChatBot() nell’attributo onclick di qualsiasi pulsante/icona, in modo che la finestra della chat venga mostrata ai clienti quando fanno clic sul pulsante/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>

Serve aiuto?

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

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

Sentiti libero di prenotare un incontro con noi : saremo lieti di aiutarti a configurare l’icona perfetta nel punto ideale, in modo che si adatti allo stile unico del tuo negozio.

Come nascondere l’icona mobile?

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

Nella sezione “Personalizza la chat AI” della console di amministrazione dell’app, nelle impostazioni Seleziona un’icona della chat, ora puoi selezionare l’opzione:

“Nascondi l’icona mobile e utilizza il deep link per aprire la chat”.

In questo modo puoi nascondere l’icona mobile mantenendo la possibilità di aprire la finestra della chat tramite un deep link.