Integracja z Shopify

Dodaj chatboty AI ChatReact, formularze kontaktowe i akordeony FAQ do swojego sklepu Shopify za pomocą oficjalnej aplikacji ChatReact dla Shopify.

Instalacja

1. Zainstaluj aplikację ChatReact ze sklepu Shopify App Store
2. Otwórz aplikację w panelu administracyjnym Shopify

Nie jest wymagane oddzielne połączenie konta — powiąż aplikację ze swoimi chatbotami i formularzami, wklejając ich identyfikatory (ID) z panelu ChatReact.

Funkcje

Aplikacja Shopify zapewnia trzy typy widżetów:

Konfiguracja widżetu czatu

Konfiguracja widżetu czatu wymaga dwóch kroków: utworzyć przypisanie widżetu w aplikacji ChatReact, a następnie włączyć App Embed w motywie.

Krok 1: Utwórz przypisanie widżetu

1. Otwórz aplikację ChatReact w panelu administracyjnym Shopify
2. Na karcie Chat Widget kliknij Add Assignment
3. Wprowadź swój Chatbot ID (znajduje się w panelu ChatReact w Settings → Embed)
4. Kliknij Save Assignment

Krok 2: Włącz App Embed

1. Przejdź do Online Store → Themes → Edit theme
2. Kliknij ikonę App embeds (element układanki) w dolnym lewym pasku bocznym
3. Przełącz ChatReact Chat Widget na ON
4. Kliknij Save

Widżet czatu pojawia się na każdej stronie objętej jednym z Twoich przypisań widżetu.

Przypisania widżetów

Każde przypisanie łączy chatbota z Twoim sklepem. Istnieją dwa typy przypisań:

• Everywhere: Widżet pojawia się na wszystkich stronach (domyślnie). Opcjonalnie można dodać Exclude URLs — jedna ścieżka na linię, z obsługą wildcard * (np. /blogs/*)
• Specific Page: Widżet pojawia się tylko na wpisanej ścieżce strony (np. /pages/about)

Jeśli strona ma przypisanie Specific Page, to na niej zostanie wyświetlony chat bot z tego przypisania zamiast chatbota z przypisania Everywhere.

Dodawanie widżetów Formularza i FAQ

Widżety Formularza i FAQ dodaje się jako App Blocks w Edytorze motywu:

1. Przejdź do Online Store → Themes → Edit theme
2. Przejdź do strony, na której chcesz umieścić widżet
3. Kliknij Add block i wyszukaj "ChatReact"
4. Wybierz ChatReact Form lub ChatReact FAQ
5. Wprowadź Form ID lub Chatbot ID w ustawieniach bloku

Ręczne osadzenie (Liquid)

Jeśli wolisz edytować szablony bezpośrednio, możesz również dodać widżety do dowolnego szablonu 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>

Stylowanie widżetu Formularza

Dostosuj wygląd formularza w Edytorze motywu:

Stylowanie widżetu FAQ

Zarządzanie widżetami

Aplikacja ChatReact w panelu administracyjnym Shopify udostępnia trzy karty:

1. Chat Widget — Twórz i zarządzaj przypisaniami widżetów, które kontrolują, na których stronach wyświetla się widżet czatu
2. Forms — Instrukcje krok po kroku dotyczące osadzania, ręczny fragment Liquid oraz miejsce, gdzie znaleźć Form ID
3. FAQ Widget — Instrukcje osadzania widżetu FAQ oraz miejsce, gdzie znaleźć Chatbot ID

Wybór formularza i FAQ odbywa się w Edytorze motywu: wprowadź Form ID lub Chatbot ID w ustawieniach bloku.

Obsługa języków

Aplikacja obsługuje wszystkie 24 języki UE:

• Chat widget automatycznie wykrywa język przeglądarki odwiedzającego i dopasowuje go do obsługiwanych języków Twojego chatbota, w razie potrzeby wracając do języka podstawowego chatbota
• Bloki Formularza i FAQ mają własne ustawienie Language w Edytorze motywu — domyślnie ustawione na Auto-detect i można je nadpisać dla każdego bloku

Odinstalowywanie

Po odinstalowaniu aplikacji ChatReact wszystkie konfiguracje widżetów i przechowywane dane są automatycznie usuwane z Twojego sklepu Shopify.

Kolejne kroki

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