Widget-indlejring

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

Kom godt i gang

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

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

Det er det! Jeres chatbot er nu aktiv på jeres hjemmeside.

Sådan finder De jeres Chatbot-ID

1. Gå til chatbot'ens indstillinger
2. Naviger til fanen Embed
3. Kopiér embed-koden (den indeholder ID'et)

Tilpasning af widget

Widget'ens udseende og opførsel konfigureres i jeres dashboard — ikke i embed-koden. Gå til Dashboard → Chatbots → [your chatbot] → Widget for at justere:

• Position — nederst til højre, nederst til venstre eller inline
• Farver — primær, baggrunds- og tekstfarver samt kantradius
• Størrelse — widget-bredde og højde

For at åbne chatten automatisk efter en konfigurerbar forsinkelse, aktiver Auto-Open i fanen Behavior på samme indstillingsside.

Ændringer anvendes automatisk på jeres hjemmeside — der er ikke behov for at opdatere embed-koden. Se Widget Customization guiden for alle tilgængelige muligheder.

Widget-sproget registreres automatisk fra hver besøgendes browser, baseret på de sprog De aktiverer i chatbot'ens Languages-fane.

FAQ-widget

Vis ofte stillede spørgsmål som et 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"
  async
></script>

FAQ-widget'en viser publicerede FAQs fra jeres chatbot. Farver og styling (primær, baggrunds- og tekstfarver, kantradius) konfigureres i Dashboard → FAQs → Settings.

FAQ-widget muligheder

Eksempel 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

Chat-widget'en er fuldt optimeret til mobile enheder:

• Fuld-bredde layout på små skærme
• Slide-up animation ved åbning
• iOS-tastaturhåndtering (widget'en justerer sig i forhold til on-screen tastaturet)
• Safe-area support for iPhone notch og home-indikator
• Større touch-mål for bedre brugervenlighed
• Input-skriftstørrelse forhindrer iOS auto-zoom

Platform-specifikke guider

WordPress

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

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

1. Installer et vilkårligt "Header/Footer Scripts"-plugin
2. Tilføj embed-koden i footer-sektionen
3. Gem og publicér

Shopify

Anbefalet: ChatReact Shopify App

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

1. Installer ChatReact-appen i jeres Shopify-admin
2. Indtast jeres Chatbot ID i appens indstillinger
3. Chat-widget'en vises automatisk på jeres butik
4. Administrér widget-placeringer per 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 i Footer Code
3. Publicér 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 i jeres hoved 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 widget'en programmæssigt:

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

Preview-tilstand

Før I indlejrer live:

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

Fejlfinding

Widget vises ikke

1. Tjek browserkonsollen for fejl
2. Bekræft at chatbot-ID'et er korrekt
3. Sørg for at chatbot'en er aktiv (ikke deaktiveret)
4. Tjek om adblockers forstyrrer
5. Kontroller jeres planforbrug — widget'en pauser når jeres plans månedlige grænse er nået

Caching- & optimerings-plugins

Nogle caching- eller script-optimerings-plugins omskriver script-URL'er, hvilket kan stoppe widget'en fra at loade. Hvis det sker, tilføj en eksplicit API-URL til script-tagget:

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

Samme attribut virker på FAQ- og form-widget-scripts.

Styling-konflikter

Hvis jeres sites CSS konflikter:

• Widget'en scope'er sine styles til sin egen container og bruger høj-prioritets regler for at modstå konflikter
• Tjek z-index værdier på elementer, der overlapper widget'en
• Undgå brede !important-regler i jeres site-CSS, der målretter generiske elementer

Performance

Widget'en er designet til minimal indvirkning:

• Loade asynkront — blokerer aldrig jeres side-rendering
• Letvægts: omtrent 30 KB komprimeret overførsel

Næste skridt

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — indlej standalone forms med form-widget'en