Shopify Integration

Lägg till ChatReact AI-chattbotar, kontaktformulär och FAQ-accordioner i din Shopify-butik med den officiella ChatReact Shopify App.

Installation

1. Installera ChatReact-appen från Shopify App Store
2. Öppna appen i din Shopify-administrationspanel

Ingen separat kontokoppling krävs — du länkar appen till dina chattbotar och formulär genom att klistra in deras ID:n från ChatReact-instrumentpanelen.

Funktioner

Shopify-appen tillhandahåller tre widgettyper:

Konfigurera Chat Widget

Att konfigurera chattwidgeten sker i två steg: skapa en widgettilldelning i ChatReact-appen, och aktivera App Embed i ditt tema.

Steg 1: Skapa en widgettilldelning

1. Öppna ChatReact-appen i din Shopify-administration
2. På fliken Chat Widget, klicka på Add Assignment
3. Ange ditt Chatbot ID (finns i ChatReact-instrumentpanelen under Settings → Embed)
4. Klicka på Save Assignment

Steg 2: Aktivera App Embed

1. Gå till Online Store → Themes → Edit theme
2. Klicka på ikonen App embeds (pusselbit) i den vänstra nedersta sidofältet
3. Växla ChatReact Chat Widget till ON
4. Klicka på Save

Chattwidgeten visas på varje sida som omfattas av en av dina widgettilldelningar.

Widgettilldelningar

Varje tilldelning länkar en chattbot till din butik. Det finns två tilldelningstyper:

• Everywhere: Widgeten visas på alla sidor (standard). Du kan frivilligt lägga till Exclude URLs — en sökväg per rad, med stöd för *-wildcards (t.ex. /blogs/*)
• Specific Page: Widgeten visas endast på den sidväg du anger (t.ex. /pages/about)

Om en sida har sin egen Specific Page-tilldelning visas den chattboten där istället för Everywhere-chattboten.

Lägga till Form- och FAQ-widgets

Form- och FAQ-widgets läggs till som App Blocks i Theme Editor:

1. Gå till Online Store → Themes → Edit theme
2. Navigera till sidan där du vill ha widgeten
3. Klicka på Add block och sök efter "ChatReact"
4. Välj ChatReact Form eller ChatReact FAQ
5. Ange Form ID eller Chatbot ID i blockinställningarna

Manuell inbäddning (Liquid)

Om du föredrar att redigera mallar direkt kan du även lägga till widgets i vilken Liquid-mall som helst:

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

Anpassa formulärets utseende i Theme Editor:

FAQ Widget Styling

Hantera widgets

ChatReact-appen i din Shopify-administration erbjuder tre flikar:

1. Chat Widget — Skapa och hantera widgettilldelningar som styr vilka sidor som visar chattwidgeten
2. Forms — Steg-för-steg-instruktioner för inbäddning, den manuella Liquid-snippeten och var du hittar ditt Form ID
3. FAQ Widget — Inbäddningsinstruktioner för FAQ-widgeten och var du hittar ditt Chatbot ID

Form- och FAQ-val sker i Theme Editor: ange Form ID eller Chatbot ID i blockinställningarna.

Språkstöd

Appen stöder alla 24 EU-språk:

• Chat widget upptäcker automatiskt varje besökares webbläsarspråk och matchar det mot din chattbots stödjade språk, med fallback till chattbotens primära språk
• Form- och FAQ-blocken har vardera sin egen Language-inställning i Theme Editor — den är som standard Auto-detect och kan åsidosättas per block

Avinstallation

När du avinstallerar ChatReact-appen tas alla widgetkonfigurationer och lagrade data automatiskt bort från din Shopify-butik.

Nästa steg

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