Widget-embeddning

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

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>

Det är allt! Er chattbot är nu live på er webbplats.

Hitta er Chatbot ID

1. Gå till er chattbots inställningar
2. Navigera till fliken Embed
3. Kopiera embed-koden (innehåller ert ID)

Anpassa widgeten

Widgetens utseende och beteende konfigureras i er instrumentpanel — inte i embed-koden. Gå till Dashboard → Chatbots → [your chatbot] → Widget för att justera:

• Position — nedre högra, nedre vänstra eller inline
• Färger — primärfärg, bakgrunds- och textfärger, samt hörnradie
• Storlek — widgetens bredd och höjd

För att öppna chatten automatiskt efter en konfigurerbar fördröjning, aktivera Auto-Open i fliken Behavior på samma inställningssida.

Ändringar tillämpas automatiskt på er webbplats — ingen uppdatering av embed-koden krävs. Se guiden Widget Customization för alla tillgängliga alternativ.

Widgetens språk upptäcks automatiskt från varje besökares webbläsare, baserat på de språk ni aktiverar i er chattbots flik Languages.

FAQ-widget

Visa vanliga frågor som ett accordion på vilken sida som helst:

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

FAQ-widgeten visar publicerade FAQ från er chattbot. Färger och styling (primärfärg, bakgrunds- och textfärger, hörnradie) konfigureras i Dashboard → FAQs → Settings.

FAQ-widgetalternativ

Exempel på kategori-filter

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

• Fullbreddslayout på små skärmar
• Slide-up-animation vid öppning
• iOS-tangentbords-hantering (widgeten anpassar sig till skärmtangentbordet)
• Safe-area-stöd för iPhone-notch och home-indicator
• Större touchmål för bättre användbarhet
• Inmatningsfontstorlek förhindrar iOS auto-zoom

Plattformsspecifika guider

WordPress

Rekommenderat: Använd den officiella ChatReact WordPress Plugin för enklast integration med Gutenberg-block, Elementor-widgets och shortcodes.

Alternativ: Manuell embed via ett "Header/Footer Scripts"-plugin:

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

Shopify

Rekommenderat: ChatReact Shopify App

Installera ChatReact-appen från Shopify App Store för enklast integration:

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-placering per sida, eller aktivera överallt

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

Alternativ: Manuell embed

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 huvudsakliga App.vue eller layout:

<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 programatiskt:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testning

Förhandsgranskningsläge

Innan ni bäddar in live:

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

Felsökning

Widgeten visas inte

1. Kontrollera webbläsarkonsolen för fel
2. Verifiera att chatbot-ID:t är korrekt
3. Säkerställ att chattboten är aktiv (inte inaktiverad)
4. Kontrollera om adblockers stör
5. Kontrollera er plananvändning — widgeten pausas när er plans månatliga gräns nås

Cache- & optimeringsplugins

Vissa cache- eller script-optimeringsplugins skriver om skript-URL:er, vilket kan göra att widgeten inte laddas. Om det händer, lägg till en explicit API-URL i skript-taggen:

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

Samma attribut fungerar för FAQ- och form-widget-skripten.

Stylingkonflikter

Om er webbplats CSS konfliktar:

• Widgeten begränsar sina stilar till sin egen behållare och använder regler med hög prioritet för att motstå konflikter
• Kontrollera z-index för element som överlappar widgeten
• Undvik breda !important-regler i er sites CSS som riktar sig mot generiska element

Prestanda

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

• Laddas asynkront — blockerar aldrig er sidrendering
• Lättviktig: cirka 30 KB komprimerad överföring

Nästa steg

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — bädda in fristående formulär med form-widgeten