Integração com Shopify

Adicione chatbots de IA do ChatReact, formulários de contato e acordeões de FAQ à sua loja Shopify com o aplicativo oficial ChatReact para Shopify.

Instalação

Instale o aplicativo ChatReact na Shopify App Store
Abra o aplicativo no painel de administração da sua loja Shopify

Não é necessário conectar uma conta separada — você vincula o aplicativo aos seus chatbots e formulários colando seus IDs a partir do painel do ChatReact.

Recursos

O aplicativo para Shopify fornece três tipos de widget:

Widget	Descrição	Localização
Chat Widget	Chatbot de IA com suporte de chat ao vivo	Em todo o site ou páginas específicas via App Embed
Form Widget	Formulários de contato com proteção contra spam	Inline via App Block no Theme Editor
FAQ Widget	Exibição de FAQ em estilo acordeão	Inline via App Block no Theme Editor

Configurando o Chat Widget

Configurar o chat widget requer dois passos: criar uma atribuição de widget no aplicativo ChatReact e, em seguida, ativar o App Embed no seu tema.

Passo 1: Criar uma Atribuição de Widget

Abra o aplicativo ChatReact no seu admin do Shopify
Na aba Chat Widget, clique em Add Assignment
Insira seu Chatbot ID (encontrado no painel do ChatReact em Settings → Embed)
Clique em Save Assignment

Passo 2: Ativar o App Embed

Vá em Online Store → Themes → Edit theme
Clique no ícone App embeds (peça de quebra-cabeça) na barra lateral inferior esquerda
Ative ChatReact Chat Widget para ON
Clique em Save

Você só precisa ativar o App Embed uma vez. Depois disso, você gerencia totalmente onde o widget aparece a partir do aplicativo ChatReact.

O chat widget aparece em todas as páginas cobertas por uma de suas atribuições de widget.

Atribuições de Widget

Cada atribuição vincula um chatbot à sua vitrine. Existem dois tipos de atribuição:

Everywhere: O widget aparece em todas as páginas (padrão). Opcionalmente, você pode adicionar Exclude URLs — um caminho por linha, com curingas * suportados (por exemplo /blogs/*)
Specific Page: O widget aparece apenas no caminho de página que você inserir (por exemplo /pages/about)

Se uma página tiver sua própria atribuição Specific Page, esse chatbot será exibido lá em vez do chatbot configurado em Everywhere.

Adicionando os Widgets de Formulário e FAQ

Os widgets de Form e FAQ são adicionados como App Blocks no Theme Editor:

Vá em Online Store → Themes → Edit theme
Navegue até a página onde deseja o widget
Clique em Add block e pesquise por "ChatReact"
Escolha ChatReact Form ou ChatReact FAQ
Insira o Form ID ou o Chatbot ID nas configurações do bloco

Embed Manual (Liquid)

Se preferir editar os templates diretamente, você também pode adicionar os widgets a qualquer 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>

Estilização do Form Widget

Customize a aparência do formulário no Theme Editor:

Configuração	Opções
Alignment	Left, Center, Right
Max Width	200–1200px
Font Size	12–28px
Margin Bottom	0–120px
Language	Auto-detect (padrão) ou uma das 24 línguas

Estilização do FAQ Widget

Configuração	Opções
Categories	Slugs de categorias opcionais separados por vírgula (por exemplo `general,pricing`) para mostrar apenas categorias de FAQ selecionadas
Font Size	12–28px
Margin Bottom	0–120px
Language	Auto-detect (padrão) ou uma das 24 línguas

Gerenciando Widgets

O aplicativo ChatReact no seu admin do Shopify fornece três abas:

Chat Widget — Crie e gerencie as atribuições de widget que controlam quais páginas exibem o chat widget
Forms — Instruções passo a passo para embed, o snippet manual em Liquid e onde encontrar seu Form ID
FAQ Widget — Instruções de embed para o FAQ widget e onde encontrar seu Chatbot ID

A seleção de Form e FAQ ocorre no Theme Editor: insira o Form ID ou o Chatbot ID nas configurações do bloco.

Suporte de Idiomas

O aplicativo suporta todas as 24 línguas da UE:

O chat widget detecta automaticamente o idioma do navegador de cada visitante e o compara com os idiomas suportados pelo seu chatbot, retornando ao idioma principal do chatbot quando necessário
Os blocos Form e FAQ têm cada um sua própria configuração Language no Theme Editor — o padrão é Auto-detect e pode ser substituído por bloco

Desinstalação

Quando você desinstala o aplicativo ChatReact, todas as configurações de widget e dados armazenados são automaticamente removidos da sua loja Shopify.