Widget-indlejring

Tilføj Deres AI-chatbot til enhver hjemmeside på få sekunder med vores simple embed-kode.

Hurtig start

Tilføj denne kode før den afsluttende </body>-tag:

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

Så er det gjort! Deres chatbot er nu live på Deres hjemmeside.

Find Deres chatbot-ID

1. Gå til Deres chatbots indstillinger
2. Gå til fanen Embed
3. Kopier embed-koden (inkluderer Deres ID)

Eller find ID'et i Deres dashboard-URL: /dashboard/company/chatbots/[CHATBOT_ID]

Widgetindstillinger

Tilpas widgeten med data attributes:

Grundlæggende indstillinger

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

Farveoverskrivelser

Overskriv dashboard-indstillinger med inline-farver:

<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

Vis FAQs som en accordion på enhver side:

<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 viser publicerede FAQ'er fra Deres chatbot.

FAQ Widget-indstillinger

Eksempel 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

Chat-widgetten er fuldt optimeret til mobile enheder:

• Fuld bredde på små skærme
• Slide-op animation ved åbning
• iOS-tastaturhåndtering (widgetten tilpasser sig skærmtastaturet)
• Safe area-understøttelse for iPhone-notch og hjemindikator
• Større berøringsmål for bedre brugbarhed
• Inputskriftstørrelse forhindrer iOS auto-zoom

Platform-specifikke vejledninger

WordPress

Anbefalet: Brug det officielle ChatReact WordPress Plugin for den nemmeste integration med Gutenberg-blokke, Elementor-widgets og shortcodes.

Alternativ: Manuel indlejring via et "Header/Footer Scripts"-plugin:

1. Installer et hvilket som helst "Header/Footer Scripts" plugin
2. Tilføj embed-koden til footer-sektionen
3. Gem og udgiv

Shopify

Anbefalet: ChatReact Shopify App

Installer ChatReact-appen fra Shopify App Store for den nemmeste integration:

1. Installer ChatReact-appen i Deres Shopify-admin
2. Indtast Deres Chatbot ID i app-indstillingerne
3. Chat-widgetten vises automatisk på Deres butik
4. Administrer widget-tildelinger pr. side, eller aktiver den overalt

Appen understøtter også Form- og FAQ-widgets som App Blocks i Theme Editor.

Alternativ: Manuel indlejring

1. Gå til Online Store → Themes → Edit Code
2. Åbn theme.liquid
3. Tilføj koden før </body>
4. Gem

Webflow

1. Gå til Project Settings → Custom Code
2. Tilføj til Footer Code
3. Udgiv sitet

Next.js / React

Brug 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

Tilføj til Deres primære 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

Interager med widgeten programmatisk:

// 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]'
});

Test

Forhåndsvisning

Før De integrerer live:

1. Brug Preview-funktionen i Deres dashboard
2. Test forskellige scenarier
3. Bekræft, at svarene er korrekte

Lokal udvikling

Til lokal testning, brug localhost-URL'er:

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

Fejlfinding

Widget vises ikke

1. Tjek browserkonsollen for fejl
2. Bekræft, at chatbot-ID'et er korrekt
3. Sørg for, at chatbotten er aktiv (ikke deaktiveret)
4. Kontrollér, om annonceblokkere forstyrrer

Stilkonflikter

Hvis Deres sides CSS er i konflikt:

• Widgeten bruger shadow DOM til isolation
• Tjek z-index-værdier
• Sørg for, at der ikke er !important-overstyringer

Ydeevne

Widgeten er designet til minimal påvirkning:

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

Næste skridt

• WordPress Plugin →
• Shopify Integration →
• FAQ Management →