Imago Car Finder

Revision 2.0
Imago Car Finder
Imago Car Finder är en inbäddningsbar AI-chattwidget som levereras som en enda JavaScript-fil — imago-chat-widget.js. Widgeten kopplas till en backend via HTTP-streaming och kräver ingen inloggning för slutanvändare. Du placerar ett eget HTML-element i din markup, laddar ett skript, och allt fungerar direkt.
Dokumentet täcker tre inbäddningslägen: Widget-läge, Embedded-läge och Frameless-läge.
Hur det fungerar
Widgeten registrerar ett Custom Element <imago-chat> som webbläsaren känner igen automatiskt när skriptet laddas. Elementet skapar en Shadow DOM-rot och injicerar all CSS inuti den — fullständigt isolerad från resten av din sida.
All JavaScript och CSS, inklusive Tailwind, kompileras och paketeras till en enda IIFE-fil. Du behöver inte ladda några externa beroenden — allt medföljer i en enda HTTP-request.
Egenskaper
Shadow DOM — Widgetens stilar läcker aldrig ut till din sida, och din sidas stilar påverkar aldrig widgeten.
Custom Element — <imago-chat> registreras globalt och aktiveras automatiskt.
En enda fil — Inga npm-paket, inga CDN-beroenden, inga konflikter.
Sessionshantering — Ett unikt UUID sparas i localStorage per webhook-URL, så konversationen återställs vid sidnavigering.
Tre lager — utifrån och in:
Diagrammet visar hur widgeten är uppbyggd i tre lager: ytterst den paketerade IIFE-filen, sedan Shadow DOM för isolering, och innerst själva Custom Elementet som körs i webbläsaren.
Snabbinstallation
Att installera Imago Car Finder kräver bara två saker: ett <imago-chat>-element med dina attribut, och en <script>-tagg som laddar widgetfilen. Placera båda precis före den avslutande </body>-taggen för bästa prestanda och korrekt DOM-initialisering.
Kom ihåg: Byt ut src-sökvägen i <script>-taggen till den faktiska URL:en där vi hostar imago-chat-widget.js.
<imago-chat
  webhook="https://gateway.imagoplatform.io/webhook/ef2f49f5"
  theme-color="#226096"
  welcome-message="Hej, hur kan jag hjälpa dig att hitta rätt bil?"
  title="Bingster Cars"
  placeholder="Fråga vad som helst!"
  avatar-url="https://media.imagoplatform.ai/Swirl_300x300.png"
  auth-token="33SJW0jRl1VH7JMb0giO7CQ1lU2c7T6Ef8r0wzsy"
  conversation-starters='["Jag vill ha lägsta ägandekostnad","Jag söker något snabbt och sportigt","Jag behöver en elbil med lång räckvidd","Jag letar efter en SUV för familjen"]'
></imago-chat>
<script src="https://carfinder.imagoplatform.ai/path/till/imago-chat-widget.js"></script>
Det är allt. Widgeten visas omedelbart som en flytande chattbubbla i det nedre högra hörnet av sidan. Användaren klickar på bubblan för att öppna chattpanelen och skriver sitt första meddelande — inget konto, ingen autentisering krävs av slutanvändaren.
Lägg till element
Infoga <imago-chat> med attribut.
Ladda skriptet
Placera <script>-taggen efter elementet.
Widgeten live
Widgeten syns i webbsidans hörn.
Hela installationen tar under en minut för en erfaren webbutvecklare. Det finns inga build-steg, inga pakethanterare och ingen konfigurationsfil att underhålla.
Attributreferens
Alla inställningar för Imago Car Finder görs via HTML-attribut direkt på <imago-chat>-elementet. Nedan finns en komplett referens över alla tillgängliga attribut, deras typ, standardvärde och funktion.
Visningslägen
Imago Car Finder stöder tre visningslägen som passar olika use cases. Välj det läge som passar din webbplats arkitektur och användarupplevelse bäst. Läget styrs via mode-attributet.
Widget-läge (standard)
Visar en flytande bubbla i hörnet av sidan. Användaren klickar på bubblan för att öppna chattpanelen. En oläst-badge visas om det finns obesvarade meddelanden. Det här är standardläget och kräver inget extra — utelämnar du mode-attributet används widget-läget automatiskt.
Embedded-läge
Visar chatten som en inbäddad komponent som fyller sitt föräldraelements hela bredd och höjd. Ingen bubbla visas — chatten är alltid synlig. Inkluderar en "Ny chatt"-knapp i headern. Perfekt för dedikerade supportsidor eller chattportaler.
Viktigt för embedded-läge: Föräldraelementet måste ha en definierad höjd (px, vh, %, etc.) — annars kollapsar det till noll pixlar och widgeten syns inte.
Frameless-läge
Visar chatten helt utan widgetens egen chrome — ingen header, ingen avatar, ingen titelrad, ingen inbyggd "Ny chatt"-knapp. Endast meddelandelistan och textinmatningen med skicka-knapp. Detta läge är designat för byråer och designteam som vill bädda in chatten i sin egen sidlayout och själva äga all omkringliggande UI (sidhuvud, branding, knappar, reset-knapp).
Eftersom headern är borttagen i frameless-läge finns inte heller den inbyggda "Ny chatt"-knappen. Använd JS-API:et nedan för att koppla in din egen reset-knapp var som helst på sidan.
Extern "Ny chatt"-knapp via JS-API
<imago-chat>-elementet exponerar en publik metod resetChat() som rensar konversationen och startar en ny session:
För ramverk eller knappar som skapas senare kan du lyssna på imago-chat:ready-eventet, som triggar en gång efter att widgeten monterats och som även exponerar resetChat-funktionen via event.detail:
Metoden resetChat() och eventet imago-chat:ready finns tillgängliga i alla lägen (widget / embedded / frameless), men de är mest användbara i frameless-läget där widgeten medvetet inte renderar någon egen reset-knapp.
Viktigt för frameless-läge: Som i embedded-läget måste föräldraelementet ha en definierad höjd. All visuell ram (border, bakgrund, padding) styrs av värdsidans CSS — widgeten själv har ingen.
Alternativ konfiguration via JavaScript
Istället för — eller som komplement till — HTML-attribut kan du konfigurera widgeten via det globala objektet window.ImagoChatConfig. Detta är praktiskt när du genererar konfiguration dynamiskt på serversidan, eller när du vill hålla konfigurationen samlad i ett JavaScript-objekt snarare än utspridd i HTML-markup.
Viktigt: Sätt window.ImagoChatConfig före skriptet laddas, annars läser widgeten inte konfigurationen.
<script>
  window.ImagoChatConfig = {
    webhook: "https://gateway.imagoplatform.io/webhook/ef2f49f5",
    themeColor: "#226096",
    mode: "widget",
    welcomeMessage: "Hej! Hur kan jag hjälpa dig?",
    title: "Bingster Cars",
    placeholder: "Fråga vad som helst!",
    avatarUrl: "https://media.imagoplatform.ai/Swirl_300x300.png",
    authToken: "33SJW0jRl1VH7JMb0giO7C",
    conversationStarters: [
      "Jag vill ha lägsta ägandekostnad",
      "Jag söker något snabbt och sportigt"
    ]
  };
</script>
<script src="imago-chat-widget.js"></script>
camelCase i JavaScript
Egenskapsnamnen i window.ImagoChatConfig använder camelCase, t.ex. themeColor, avatarUrl.
kebab-case i HTML
HTML-attributen använder kebab-case, t.ex. theme-color, avatar-url. Detta är konsekvent med webbstandarder.
Om du använder window.ImagoChatConfig utan ett <imago-chat>-element i HTML:en skapas elementet automatiskt och läggs till i <body>. Du behöver alltså inte ens ha elementet i din markup om du föredrar den JavaScript-baserade konfigurationen.
ShadowDOM och Backend
Shadow DOM — CSS-isolation
När <imago-chat> läggs till i DOM:en skapas en Shadow DOM-rot med attachShadow({ mode: 'open' }). All widgetens CSS injiceras som en <style>-tagg inuti denna Shadow DOM. Det innebär fullständig bilateral isolation — widgetens CSS läcker inte ut till resten av sidan, och sidans CSS påverkar inte widgeten. Du behöver inte oroa dig för stilkonflikter med ditt befintliga tema eller CSS-ramverk.
Kommunikation med backend
Vid varje meddelande skickas en HTTP POST till din webhook-URL med följande JSON-payload:
{
  "message": "Användarens meddelande",
  "sessionId": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": "2026-03-19T14:30:00.000Z",
  "device": "desktop"
}
sessionId
Unikt per webbläsare och webhook-URL, sparat i localStorage.
device
Detekteras automatiskt: mobile, tablet eller desktop.
Streaming-responsformat
Svaret från webhook:en läses som en ström. Widgeten stöder tre responsformat automatiskt:
JSON
application/json. Svar med fälten output, text eller message.
NDJSON-streaming
Progressiv visning med begin-, item- och end-events.
Ren textström
Rå text streamad chunk-för-chunk direkt.
Text visas gradvis tecken-för-tecken vid 60 fps. Om svaret pausar i mer än 1,5 sekunder visas en "tänker"-indikator automatiskt.
Webbläsarstöd
Imago Car Finder kräver en modern webbläsare med stöd för ett antal specifika webb-API:er. Alla dessa API:er är väletablerade och stöds av samtliga aktuella webbläsarversioner. Inget polyfill-lager inkluderas i widgeten — den förlitar sig på nativ webbläsarstöd för bästa prestanda och minsta möjliga filstorlek.
Custom Elements v1
Registrering av <imago-chat> som eget HTML-element.
Shadow DOM v1
Fullständig CSS-isolation via inkapslade DOM-träd.
ES2020
Modern JavaScript: optional chaining, nullish coalescing, BigInt m.m.
ReadableStream
Krävs för att läsa HTTP-streaming-svar från webhook:en.
Felsökning
Nedan finns de vanligaste problemen du kan stöta på vid integration av Imago Car Finder, samt rekommenderade lösningar. Öppna alltid webbläsarens utvecklarverktyg (F12) och kontrollera konsolen som första steg — de flesta fel rapporteras direkt där.
Car Finder syns inte
Kontrollera att <script>-sökvägen är korrekt och att filen är åtkomlig. Öppna webbläsarens utvecklarverktyg (F12) och kolla fliken Network — letar du efter ett 404-svar på skriptfilen? Kontrollera även fliken Console efter JavaScript-fel.
I embedded- eller frameless-läge: kontrollera att föräldraelementet har en definierad höjd — annars kollapsar widgeten till noll pixlar.
Chatten öppnas men inget svar kommer
Kontrollera att webhook-URL:en är korrekt. Testa webhook:en direkt med ett verktyg som Postman eller curl för att isolera om problemet ligger i widgeten eller i backend-flödet.
Styling ser trasig ut
Widgeten använder Shadow DOM och ska vara immun mot externa stilar. Om layouten ändå ser konstig ut — kontrollera att skriptet laddats korrekt och utan JavaScript-fel. Äldre webbläsare utan Shadow DOM-stöd kan orsaka problem; uppdatera till en modern webbläsare.
"Ny chatt"-knappen saknas i frameless-läge
Detta är avsiktligt — frameless-läget renderar ingen egen reset-knapp. Använd JS-API:et: document.querySelector('imago-chat').resetChat() på din egen knapp. Se Visningslägen → Frameless-läge.
Sessionen försvinner
localStorage kan rensas av användaren manuellt, av webbläsarens integritetsläge (t.ex. Privat/Incognito), eller av tredjepartskookies-blockering. Sessionen sparas per webhook-URL, så om URL:en ändras skapas en ny session automatiskt.
Fullständigt exempel
Nedan följer ett komplett, kopieringsfärdigt HTML-dokument som visar en minimal men fullt fungerande integration av Imago Car Finder. Ersätt attributvärdena med din faktiska webhook-URL, auth-token och önskad konfiguration innan du driftsätter.
<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Min webbplats</title>
</head>
<body>
  <h1>Välkommen till min webbplats</h1>
  <p>Innehåll här...</p>

  <!-- Imago Car Finder -->
  <imago-chat
    webhook="https://gateway.imagoplatform.io/webhook/ef2f49f5"
    theme-color="#226096"
    welcome-message="Hej, hur kan jag hjälpa dig att hitta rätt bil? Berätta vad du letar efter!"
    title="Bingster Cars"
    placeholder="Fråga vad som helst!"
    avatar-url="https://media.imagoplatform.ai/swirl_300x300.png"
    auth-token="33SJW0jRl1VH7JMb0"
    conversation-starters='["Jag vill ha lägsta ägandekostnad","Jag söker något snabbt och sportigt","Jag behöver en elbil med lång räckvidd","Jag letar efter en SUV för familjen"]'
  ></imago-chat>
  <script src="https://carfinder.imagoplatform.ai/path/till/imago-chat-widget.js"></script>
</body>
</html>
Frameless-läge — CSS-mall
Lägg till följande CSS i din sidas stylesheet. Denna mall sätter upp en flexibel layout med sidhuvud och chattyta — anpassa efter din egen design.
html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; }
body { display: flex; flex-direction: column; background: #f8fafc; }
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 2rem; background: #111827; color: #fff;
}
.site-header h1 { margin: 0; font-size: 1.25rem; }
.reset-btn {
  background: #fff; color: #111827; border: none; border-radius: 8px;
  padding: 0.55rem 1.1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
main { flex: 1; min-height: 0; padding: 1.5rem 2rem; }
.chat-frame {
  height: 100%; background: #fff;
  border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden;
}
Fullständigt exempel — Frameless-läge (HTML)
Bygg upp HTML-strukturen med sidhuvud och chattyta. Inkludera CSS-mallen från föregående sida.
<!DOCTYPE html>
<html lang="sv">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bingster Cars</title>
  <style>
    /* [CSS här] */
  </style>
</head>
<body>
  <header class="site-header">
    <h1>Bingster Cars</h1>
    <button type="button" id="chat-reset-btn" class="reset-btn">Ny chatt</button>
  </header>
  <main>
    <div class="chat-frame">
      <imago-chat
        mode="frameless"
        webhook="https://gateway.imagoplatform.io/webhook/ef2f49f5"
        theme-color="#226096"
        welcome-message="Hej, hur kan jag hjälpa dig att hitta rätt bil?"
        placeholder="Fråga vad som helst!"
        avatar-url="https://media.imagoplatform.ai/swirl_300x300.png"
        auth-token="33SJW0jRl1VH7JMb0"
      ></imago-chat>
    </div>
  </main>
  <script src="https://carfinder.imagoplatform.ai/path/till/imago-chat-widget.js"></script>
</body>
</html>
Fullständigt exempel — Frameless-läge (JavaScript)
Koppla värdsidans reset-knapp till widgetens publika API. Lägg till detta script-block i slutet av body, efter widget-scriptet.
<script src="https://carfinder.imagoplatform.ai/path/till/imago-chat-widget.js"></script>
<script>
  // Koppla värdsidans egen knapp till widgetens publika API.
  const btn = document.getElementById('chat-reset-btn');
  const el = document.querySelector('imago-chat');
  btn.addEventListener('click', () => el.resetChat());
</script>
I detta exempel äger värdsidan all chrome — sidhuvud, branding, reset-knapp — och widgeten bidrar bara med själva konversationsytan inuti .chat-frame-containern. Detta är hela poängen med frameless-läget.