Shopify интеграция

Добавете AI чатботове на ChatReact, контактни формуляри и FAQ акордеони към Вашия Shopify магазин с официалното ChatReact Shopify приложение.

Инсталация

1. Инсталирайте приложението ChatReact от Shopify App Store
2. Отворете приложението в администраторския панел на Shopify

Не е необходима отделна връзка на акаунт — свързвате приложението с Вашите чатботове и формуляри, като поставите техните ID-та от таблото на ChatReact.

Функции

Shopify приложението предоставя три типа джаджи:

Настройка на Chat Widget

Настройката на чат джаджата изисква две стъпки: създаване на widget assignment в приложението ChatReact и след това активиране на App Embed в темата Ви.

Стъпка 1: Създаване на Widget Assignment

1. Отворете приложението ChatReact в администраторския панел на Shopify
2. В раздела Chat Widget кликнете върху Add Assignment
3. Въведете Вашия Chatbot ID (намира се в таблото на ChatReact под Settings → Embed)
4. Кликнете Save Assignment

Стъпка 2: Активиране на App Embed

1. Отидете на Online Store → Themes → Edit theme
2. Кликнете иконата App embeds (парче пъзел) в долно-лявия страничен панел
3. Превключете ChatReact Chat Widget на ON
4. Кликнете Save

Чат джаджата се появява на всяка страница, покрита от някое от Вашите widget assignments.

Widget Assignments

Всяко назначение свързва чатбот с Вашия storefront. Има два типа назначения:

• Everywhere: Джаджата се показва на всички страници (по подразбиране). По избор можете да добавите Exclude URLs — един път на ред, със застъпващи се * wildcard-и (например /blogs/*)
• Specific Page: Джаджата се показва само на страницата, чиито път въведете (например /pages/about)

Ако дадена страница има свое собствено Specific Page назначение, на нея се показва този чатбот вместо Everywhere чатбота.

Добавяне на Form и FAQ джаджи

Form и FAQ джаджите се добавят като App Blocks в Theme Editor:

1. Отидете на Online Store → Themes → Edit theme
2. Навигирайте до страницата, на която искате да сложите джаджата
3. Кликнете Add block и потърсете "ChatReact"
4. Изберете ChatReact Form или ChatReact FAQ
5. Въведете Form ID или Chatbot ID в настройките на блока

Ръчно вграждане (Liquid)

Ако предпочитате да редактирате темплейтите директно, можете също да добавите джаджите във всеки 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>

Оформление на Form Widget

Персонализирайте външния вид на формата в Theme Editor:

Оформление на FAQ Widget

Управление на джаджите

Приложението ChatReact в администраторския панел на Shopify предоставя три таба:

1. Chat Widget — Създаване и управление на widget assignments, които контролират на кои страници се показва чат джаджата
2. Forms — Подробни инструкции за вграждане, ръчния Liquid фрагмент и къде да намерите Вашия Form ID
3. FAQ Widget — Инструкции за вграждане на FAQ джаджата и къде да намерите Вашия Chatbot ID

Изборът на Form и FAQ става в Theme Editor: въведете Form ID или Chatbot ID в настройките на блока.

Поддръжка на езици

Приложението поддържа всички 24 езика на ЕС:

• Chat widget автоматично открива езика на браузъра на всеки посетител и го сравнява със списъка от поддържани езици на Вашия чатбот, като при необходимост се връща към основния език на чатбота
• Form и FAQ blocks имат собствена настройка Language в Theme Editor — по подразбиране е Auto-detect и може да бъде променена за всеки блок

Деинсталиране

При деинсталиране на приложението ChatReact всички конфигурации на джаджи и съхранени данни се почистват автоматично от Вашия Shopify магазин.

Следващи стъпки

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