Integrazione con Shopify

Aggiunga i chatbot AI di ChatReact, moduli di contatto e FAQ ad accordion al suo negozio Shopify con l'app ufficiale ChatReact per Shopify.

Installazione

1. Installi l'app ChatReact dallo Shopify App Store
2. Apra l'appnel pannello di amministrazione di Shopify

Non è necessaria una connessione account separata — colleghi l'app ai suoi chatbot e moduli incollandone gli ID dalla dashboard di ChatReact.

Funzionalità

L'app Shopify fornisce tre tipi di widget:

Configurazione del Chat Widget

La configurazione del chat widget richiede due passaggi: creare un'assegnazione del widget nell'app ChatReact, quindi abilitare l'App Embed nel suo tema.

Passo 1: Creare un'assegnazione del widget

1. Apra l'app ChatReact nel suo pannello di amministrazione Shopify
2. Nella scheda Chat Widget, clicchi su Add Assignment
3. Inserisca il suo Chatbot ID (trovabile nella dashboard di ChatReact sotto Settings → Embed)
4. Clicchi su Save Assignment

Passo 2: Abilitare l'App Embed

1. Vada su Online Store → Themes → Edit theme
2. Clicchi l'icona App embeds (pezzo di puzzle) nella barra laterale in basso a sinistra
3. Attivi ChatReact Chat Widget su ON
4. Clicchi Save

Il chat widget appare su ogni pagina coperta da una delle sue assegnazioni del widget.

Assegnazioni dei widget

Ogni assegnazione collega un chatbot al suo storefront. Ci sono due tipi di assegnazione:

• Everywhere: il widget appare su tutte le pagine (predefinito). Può opzionalmente aggiungere Exclude URLs — un percorso per riga, con supporto per wildcard * (es. /blogs/*)
• Specific Page: il widget appare solo sul percorso di pagina che inserisce (es. /pages/about)

Se una pagina ha la propria assegnazione Specific Page, quel chatbot viene mostrato lì invece del chatbot Everywhere.

Aggiunta dei widget Form e FAQ

I widget Form e FAQ vengono aggiunti come App Blocks nell'Editor del Tema:

1. Vada su Online Store → Themes → Edit theme
2. Navighi alla pagina dove desidera il widget
3. Clicchi Add block e cerchi "ChatReact"
4. Scegliere ChatReact Form o ChatReact FAQ
5. Inserisca il Form ID o il Chatbot ID nelle impostazioni del blocco

Embed manuale (Liquid)

Se preferisce modificare direttamente i template, può anche aggiungere i widget a qualsiasi template Liquid:

<!-- Form widget -->
<div id="chatreact-form"></div>
<script src="https://www.chatreact.ai/embed/form.js"
  data-form-id="YOUR_FORM_ID"
  data-container="chatreact-form"
  async></script>

<!-- FAQ widget -->
<div id="chatreact-faq"></div>
<script src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-container="chatreact-faq"
  async></script>

Styling del Form Widget

Personalizzi l'aspetto del modulo nell'Editor del Tema:

Styling del FAQ Widget

Gestione dei widget

L'app ChatReact nel suo pannello di amministrazione Shopify fornisce tre schede:

1. Chat Widget — Crei e gestisca le assegnazioni dei widget che controllano quali pagine mostrano il chat widget
2. Forms — Istruzioni passo passo per l'embed, lo snippet manuale Liquid e dove trovare il suo Form ID
3. FAQ Widget — Istruzioni per l'embed del widget FAQ e dove trovare il suo Chatbot ID

La selezione di Form e FAQ avviene nell'Editor del Tema: inserisca il Form ID o il Chatbot ID nelle impostazioni del blocco.

Supporto linguistico

L'app supporta tutte e 24 le lingue UE:

• Il chat widget rileva automaticamente la lingua del browser di ogni visitatore e la confronta con le lingue supportate dal suo chatbot, tornando alla lingua primaria del chatbot se nessuna corrisponde
• I blocchi Form e FAQ hanno ciascuno la propria impostazione Language nell'Editor del Tema — predefinita su Auto-detect e può essere sovrascritta per blocco

Disinstallazione

Quando disinstalla l'app ChatReact, tutte le configurazioni dei widget e i dati memorizzati vengono automaticamente rimossi dal suo negozio Shopify.

Passaggi successivi

• Widget Embedding →
• FAQ Management →
• Form Configuration →