Shopify Integration

Add ChatReact AI chatbots, contact forms, and FAQ accordions to your Shopify store with the official ChatReact Shopify App.

Installation

1. Install the ChatReact app from the Shopify App Store
2. Open the app in your Shopify admin panel

No separate account connection is needed — you link the app to your chatbots and forms by pasting their IDs from the ChatReact dashboard.

Features

The Shopify app provides three widget types:

Setting Up the Chat Widget

Setting up the chat widget takes two steps: create a widget assignment in the ChatReact app, then enable the App Embed in your theme.

Step 1: Create a Widget Assignment

1. Open the ChatReact app in your Shopify admin
2. On the Chat Widget tab, click Add Assignment
3. Enter your Chatbot ID (found in the ChatReact dashboard under Settings → Embed)
4. Click Save Assignment

Step 2: Enable the App Embed

1. Go to Online Store → Themes → Edit theme
2. Click the App embeds icon (puzzle piece) in the bottom-left sidebar
3. Toggle ChatReact Chat Widget to ON
4. Click Save

The chat widget appears on every page covered by one of your widget assignments.

Widget Assignments

Each assignment links a chatbot to your storefront. There are two assignment types:

• Everywhere: Widget appears on all pages (default). You can optionally add Exclude URLs — one path per line, with * wildcards supported (e.g. /blogs/*)
• Specific Page: Widget only appears on the page path you enter (e.g. /pages/about)

If a page has its own Specific Page assignment, that chatbot is shown there instead of the Everywhere chatbot.

Adding Form and FAQ Widgets

Form and FAQ widgets are added as App Blocks in the Theme Editor:

1. Go to Online Store → Themes → Edit theme
2. Navigate to the page where you want the widget
3. Click Add block and search for "ChatReact"
4. Choose ChatReact Form or ChatReact FAQ
5. Enter the Form ID or Chatbot ID in the block settings

Manual Embed (Liquid)

If you prefer editing templates directly, you can also add the widgets to any Liquid template:

<!-- 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 Styling

Customize the form appearance in the Theme Editor:

FAQ Widget Styling

Managing Widgets

The ChatReact app in your Shopify admin provides three tabs:

1. Chat Widget — Create and manage the widget assignments that control which pages show the chat widget
2. Forms — Step-by-step embedding instructions, the manual Liquid snippet, and where to find your Form ID
3. FAQ Widget — Embedding instructions for the FAQ widget and where to find your Chatbot ID

Form and FAQ selection happens in the Theme Editor: enter the Form ID or Chatbot ID in the block settings.

Language Support

The app supports all 24 EU languages:

• The chat widget automatically detects each visitor's browser language and matches it against your chatbot's supported languages, falling back to the chatbot's primary language
• The Form and FAQ blocks each have their own Language setting in the Theme Editor — it defaults to Auto-detect and can be overridden per block

Uninstalling

When you uninstall the ChatReact app, all widget configurations and stored data are automatically cleaned up from your Shopify store.

Next Steps

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