Widgetinbäddning

Lägg till er AI-chatbot på vilken webbplats som helst på några sekunder med vår enkla embed code.

Kom igång snabbt

Lägg till denna kod före den avslutande </body>-taggen:

<script
  src="https://www.chatreact.ai/embed/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Klart! Er chatbot är nu live på er webbplats.

Hitta ert chatbot-ID

1. Gå till er chatbots inställningar
2. Öppna fliken Embed
3. Kopiera embed-koden (inkluderar ert ID)

Eller hitta ID:t i er dashboard-URL: /dashboard/company/chatbots/[CHATBOT_ID]

Widget Options

Anpassa widgeten med data-attribut:

Grundläggande alternativ

<script
  src="https://www.chatreact.ai/embed/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-position="bottom-right"
  data-language="en"
  async
></script>

Färgöverskrivningar

Åsidosätt dashboard-inställningarna med inline-färger:

<script
  src="https://www.chatreact.ai/embed/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Visa FAQs som ett accordion på valfri sida:

<div id="chatreact-faq"></div>
<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ-widgeten visar publicerade FAQs från er chatbot.

FAQ Widget-alternativ

Exempel på kategorifilter

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Mobiloptimering

Chattwidgeten är fullt optimerad för mobila enheter:

• Full-bredd layout på små skärmar
• Slide-up-animation vid öppning
• iOS-tangentbordshantering (widgeten anpassas till skärmtangentbordet)
• Safe-area-stöd för iPhone-notch och hemindikator
• Större tryckytor för bättre användbarhet
• Inmatningsteckensnittsstorlek förhindrar iOS automatisk zoom

Plattformsspecifika guider

WordPress

Rekommenderat: Använd det officiella ChatReact WordPress-pluginet för den enklaste integrationen med Gutenberg-block, Elementor-widgets och shortcodes.

Alternativ: Manuell inbäddning via ett "Header/Footer Scripts"-plugin:

1. Installera ett valfritt "Header/Footer Scripts"-plugin
2. Lägg till embed-koden i footer-sektionen
3. Spara och publicera

Shopify

Rekommenderat: ChatReact Shopify-appen

Installera ChatReact-appen från Shopify App Store för den enklaste integrationen:

1. Installera ChatReact-appen i er Shopify-admin
2. Ange ert Chatbot ID i appinställningarna
3. Chattwidgeten visas automatiskt i er butik
4. Hantera widget-tilldelningar per sida, eller aktivera den överallt

Appen stöder även Form- och FAQ-widgets som App Blocks i Theme Editor.

Alternativ: Manuell inbäddning

1. Gå till Online Store → Themes → Edit Code
2. Öppna theme.liquid
3. Lägg till koden före </body>
4. Spara

Webflow

1. Gå till Project Settings → Custom Code
2. Lägg till i Footer Code
3. Publicera webbplatsen

Next.js / React

Använd Script-komponenten:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Lägg till i er huvudfil App.vue eller i layouten:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript API

Interagera med widgeten programmässigt:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testing

Preview Mode

Innan ni bäddar in i live:

1. Använd funktionen Preview i er dashboard
2. Testa olika scenarier
3. Verifiera att svaren är korrekta

Local Development

För lokal testning, använd localhost-adresser:

<script
  src="http://localhost:3000/embed/widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Felsökning

Widgeten visas inte

1. Kontrollera webbläsarkonsolen efter fel
2. Verifiera att chatbot-ID är korrekt
3. Säkerställ att chatboten är aktiv (inte avstängd)
4. Kontrollera om annonsblockerare stör

Stilkonflikter

Om webbplatsens CSS krockar:

• Widgeten använder shadow DOM för isolering
• Kontrollera z-index-värden
• Säkerställ att det inte finns !important-överstyrningar

Prestanda

Widgeten är designad för minimal påverkan:

• Lazy loaded
• < 50KB total storlek
• Non-blocking
• Cached aggressively

Nästa steg

• WordPress-plugin →
• Shopify-integration →
• FAQ-hantering →