Центр допомоги
Інтеграції чатбота

Інтеграція з Shopify

Останнє оновлення:

Підключіть свій чат-бот ChatLab до магазину Shopify, щоб надати клієнтам доступ до інформації про товари та відстеження замовлень у реальному часі безпосередньо в чаті.

Важливо: найкращі практики для E-Commerce

Після завершення наведеної нижче інтеграції ознайомтеся з вичерпним посібником щодо оптимізації вашого чат-бота для електронної комерції: How to set up ChatLab for your E-commerce store

Що надає інтеграція

Пошук товарів - клієнти можуть шукати товари у вашому каталозі Shopify, вводячи запит. Чат-бот здійснює пошук за назвами, описами, типами, тегами та постачальниками товарів, повертаючи відповідні активні товари з такими даними:

  • Назва, опис і тип товару
  • Постачальник і теги
  • Ціна або діапазон цін (для товарів із кількома варіантами)
  • Доступні варіанти з артикулом (SKU), початковою ціною (compare-at price), кількістю на складі та статусом наявності
  • Зображення товару та пряме посилання на ваш магазин

Ви можете налаштувати пошук так, щоб відображалися лише товари в наявності. Якщо цю опцію ввімкнено, товари, яких немає на складі, виключаються з результатів. Додаткова опція дозволяє показувати товари, доступні для попереднього замовлення, навіть коли активний фільтр наявності. Докладніше див. у розділі Крок 4.

Деталі замовлення - клієнти можуть перевірити статус замовлення, вказавши номер замовлення та свою електронну адресу. Обидва значення перевіряються за записами вашого магазину Shopify. Чат-бот повертає:

  • Номер замовлення, дату, підсумкову суму та валюту
  • Замовлені позиції із зазначенням назв, кількості, цін, SKU, назви варіанта та постачальника
  • Статус виконання замовлення та інформацію для відстеження (номер трекінгу, служба доставки, URL-адреса)
  • Адресу доставки та платіжну адресу
  • Спосіб доставки та її вартість
  • Контактну інформацію клієнта (електронна пошта, ім'я, номер телефону)
  • Причину та дату скасування (для скасованих замовлень)

Крок 1: створіть облікові дані Shopify API

Важливо для агенцій і партнерів Shopify: застосунок Shopify ОБОВ'ЯЗКОВО має бути створений у панелі Dev Dashboard тієї організації, якій належить магазин - завжди починайте з власної панелі керування магазину (Settings > Apps > Develop apps > Build apps in Dev Dashboard). Застосунок, створений іншою організацією (наприклад, агенцією чи партнером Shopify, який працює у власному Dev Dashboard) і встановлений у магазині за спеціальним посиланням для встановлення, НЕ працюватиме з ChatLab, навіть якщо процес інсталяції пройшов успішно й застосунок відображається серед встановлених у магазині з усіма належними дозволами. Причина: ChatLab підключається за допомогою Client ID та Secret (механізм client credentials grant у Shopify), а Shopify дозволяє цей тип авторизації лише для застосунків, створених тією самою організацією, яка володіє магазином: "Client credentials is only available for apps developed by your own organization and installed in stores that you own" (документація Shopify). Це обмеження платформи Shopify, а не ChatLab. Ознакою цієї проблеми є помилка підключення в ChatLab із повідомленням "The app cannot access this store. Create the app in the Dev Dashboard of the organization that owns this store" (через помилку OAuth shop_not_permitted із боку Shopify), навіть якщо Client ID, Secret і піддомен магазину введені правильно, а застосунок установлено. Характерна ознака застосунку від іншої організації: у панелі керування магазину відображається повідомлення "This custom app was built by a Shopify partner for your store." Рішення для агенцій: вам не потрібна участь розробника мерчанта - попросіть власника магазину додати вашого користувача до СВОЄЇ організації з роллю App developer ("To give a user in a merchant store access to the Dev Dashboard, assign them the App developer role" - документація Shopify), а потім створіть застосунок, перебуваючи в організації мерчанта. Лише доступу Collaborator недостатньо - застосунки, створені під час роботи у вашій власній організації, залишаються прив'язаними до неї.

  1. Увійдіть у панель керування Shopify
  2. Перейдіть до Settings > Apps
  3. Натисніть Develop apps
  4. На сторінці App Development натисніть Build apps in Dev Dashboard - відкриється сторінка dev.shopify.com/dashboard
  5. Натисніть Create app і введіть назву (наприклад, "ChatLab Integration")

App development in Shopify

  1. Після створення прокрутіть сторінку до розділу Access і натисніть Select scopes

App access scopes in Shopify

  1. У розділі прав доступу Admin API знайдіть і ввімкніть такі дозволи:
    • read_products
    • read_orders
  2. Натисніть Done

App access scopes to read products and orders in Shopify

  1. Натисніть кнопку Release, щоб опублікувати версію вашого застосунку
  2. Перейдіть до App settings і скопіюйте Client ID та Secret - збережіть їх у надійному місці, вони знадобляться для підключення до ChatLab

App settings in Shopify

  1. Перейдіть до розділу Home і натисніть кнопку встановлення застосунку у вашому магазині

App install in Shopify

  1. Виберіть свій магазин і підтвердьте дію, натиснувши Install

App install confirm in Shopify

Крок 2: знайдіть піддомен вашого магазину

Ваш піддомен - це частина адреси перед .myshopify.com в URL-адресі панелі керування Shopify. Наприклад, якщо адреса вашої панелі керування - https://pizza-delicious.myshopify.com/admin, то вашим піддоменом є pizza-delicious.

Крок 3: підключіть Shopify у ChatLab

  1. Увійдіть у ChatLab і виберіть свого бота
  2. Перейдіть на вкладку Connect (Підключення)

Connect tab showing the Shopify integration tile

  1. Натисніть Connect (Підключити) на картці Shopify
  2. Введіть свій Client ID (з кроку 1)
  3. Введіть свій Secret (з кроку 1)
  4. Введіть свій Shopify subdomain (з кроку 2)

Shopify integration form with Client ID, Secret, and subdomain fields

  1. Натисніть Connect (Підключити)

ChatLab автоматично перевірить з'єднання та наявність необхідних прав доступу в облікових даних API. У разі успіху ви побачите підтвердження.

Крок 4: налаштуйте дії Shopify

Після підключення ви можете активувати та налаштувати окремі дії штучного інтелекту. Перейдіть до Settings > Actions (Налаштування > Дії) та відфільтруйте за платформою Shopify.

Shopify actions in Settings showing product search and order details

Доступні дві дії:

  • Shopify - product search - дозволяє чат-боту шукати інформацію у вашому каталозі товарів
  • Shopify - order details - дозволяє чат-боту перевіряти дані про замовлення

Натисніть кнопку активації біля кожної дії, щоб увімкнути її. Ви також можете змінити назву дії (повідомлення, яке відображається користувачам під час виконання операції) та інструкції, які визначають, як саме ШІ використовує кожну дію.

Пошук товарів - налаштування запасів

Дія пошуку товарів містить параметри фільтрації за наявністю на вкладці Product Search Settings (Налаштування пошуку товарів):

  • Products in stock only (Лише товари в наявності) - коли цей параметр увімкнено, чат-бот повертає лише ті товари, які зараз є на складі. Товари без залишків виключаються з результатів пошуку.
  • Show products available for pre-order (Показувати товари, доступні для попереднього замовлення) - ця опція з'являється, якщо активовано пункт "Products in stock only". Якщо її ввімкнено, товари, яких немає в наявності, але для яких у Shopify дозволено продаж у разі відсутності на складі (попереднє замовлення), будуть відображатися в результатах із відповідною позначкою.

Тестування інтеграції

Після активації дій відкрийте віджет чат-бота та спробуйте запитати:

  • "Покажи кросівки для бігу" (перевіряє пошук товарів)
  • "Який статус мого замовлення #1001?" (перевіряє деталі замовлення)

Переконайтеся, що відповіді відповідають даним вашого магазину Shopify, а посилання на товари відкриваються коректно.

Встановлення чат-бота у вашому магазині Shopify

Щоб додати віджет чату на вітрину вашого магазину Shopify:

  1. У ChatLab перейдіть на вкладку Deploy (Розгортання) для вашого бота
  2. Виберіть вкладку платформи Shopify
  3. Скопіюйте фрагмент коду
  4. У панелі керування Shopify перейдіть до Online Store > Themes
  5. Натисніть кнопку з трьома крапками на активній темі та виберіть Edit code
  6. Відкрийте файл theme.liquid у розділі Layout
  7. Вставте фрагмент коду перед закриваючим тегом у розділ <head>
  8. Натисніть Save

На завершення переконайтеся, що ви ввімкнули доступні дії AI Actions для Shopify - Order details та Product Search.