Layout & Placering

Flytande eller Inbäddad?
Låt chatten bli en del av sidan.

Som standard visas DigiSund som en flytande bubbla i nedre högra hörnet. Men ibland vill du bygga in assistenten som en naturlig del av din design, till exempel på en dedikerad kundtjänstsida. Detta kallar vi för Inbäddad (Inline) montering.

1. Flytande (Standard)

Assistenten hänger med besökaren oavsett vilken undersida de besöker. Den minimeras till en knapp när den inte används och ligger alltid "ovanpå" din hemsida.

2. Inbäddad (Inline)

Chatten ritas upp inuti en specifik "låda" (en div) på din hemsida. Den stängs aldrig, har inget kryss, och beter sig precis som vilket annat element som helst på din sida.

Så skapar du en inbäddad chatt

För att montera assistenten inline krävs två saker: En monteringsyta (HTML) och ett anpassat script.

1Skapa monteringsytan

Skapa en <div> där du vill att chatten ska visas. Ge den ett unikt ID.

Kritiskt: Din monteringsyta måste ha en definierad höjd (t.ex. height: 600px eller CSS-klassen h-[600px]). Widgeten anpassar sig nämligen till 100% av sin förälders höjd. Om föräldern saknar höjd, blir chatten osynlig!

2Ladda scriptet

Lägg in scriptet och berätta att den ska köras som inline i din specifika yta via data-target.

Tips! Om du utelämnar data-target letar systemet automatiskt efter en div med ID:t digisund-chat-inline.

Kodexempel för inbäddning

Exempel 1: Enkel och centrerad

Ett rent och snyggt sätt att visa chatten på en egen undersida (t.ex. /kundtjanst). Vi ger containern en maxbredd så den inte blir för bred på stora skärmar, och centrerar den.

<!-- 1. HTML: Ytan där chatten laddas -->
<div class="chatt-container">
  <div id="digisund-chat-inline"></div>
</div>

<!-- 2. CSS: Storlek och placering -->
<style>
  .chatt-container {
    max-width: 800px;
    margin: 0 auto; /* Centrerar lådan på sidan */
    padding: 20px;
  }
  
  #digisund-chat-inline {
    width: 100%;
    height: 700px; /* Höjd är obligatoriskt! */
    border: 1px solid #e5e7eb;
    border-radius: 16px;
  }
</style>

<!-- 3. Scriptet (läggs längst ner eller i <head>) -->
<script 
  defer 
  src="https://cdn.digisund.se/widget.js" 
  data-client-id="DITT_ID"
  data-variant="inline"
></script>

Exempel 2: Med Tailwind CSS

Om du använder Tailwind CSS på din webbplats (som vi gör i DigiSund) behöver du inte skriva någon anpassad CSS. Du sätter helt enkelt höjden direkt med klasser.

<!-- En låda med Tailwind-klasser får höjd, border och skugga -->
<div class="max-w-3xl mx-auto w-full p-4">
  <div 
    id="min-unika-chatt" 
    class="w-full h-[600px] md:h-[700px] rounded-2xl border border-gray-200 shadow-lg overflow-hidden"
  ></div>
</div>

<script 
  defer 
  src="https://cdn.digisund.se/widget.js" 
  data-client-id="DITT_ID"
  data-variant="inline"
  data-target="min-unika-chatt"
></script>

Under huven: Hur Inline-läget beter sig

När data-variant="inline" skickas in till React-applikationen ändras fundamentalt hur widgeten bygger sitt CSS-träd:

Ingen Shadow DOM
Till skillnad från den flytande bubblan (som isoleras i en Shadow Root), monteras den inbäddade chatten direkt i din hemsidas DOM. Detta är en fördel eftersom det låter chatten smälta in bättre i din DOM-struktur, men det betyder också att om du har aggressiv global CSS på din hemsida kan det marginellt påverka chattens scroll-beteende.
Responsive 100% Flexbox
Chatfönstrets rot-container byter positionering från fixed till relative. Både width och height sätts till 100% och display byts till flex. Detta garanterar att den flyter ut och fyller exakt den <div> du placerat den i.
Inget "X" (Close button)
Eftersom chatten är en del av sidans layout stängs funktionen att kunna "klicka ner" chatten av (Header-krysset försvinner).

Installationen är klar.

Nu behöver du godkänna din domän för att widgeten ska visas.

Säkerhet & Domäner