Sammanfattning

En embed-bokningswidget är en bokningskalender som körs direkt på din egen hemsida — kunden lämnar inte din domän under bokningsflödet. Tekniken är enkel (en script-tag och en div), men effekten är stor: konverteringen är typiskt 30–50 procent högre än vid omdirigering till externa bokningssajter, och du behåller den direkta kundrelationen.

Den här guiden förklarar vad embed-widgets är, varför de är värdefulla, hur de fungerar tekniskt, hur du installerar dem på de vanligaste plattformarna, vilka problem som brukar dyka upp och hur du löser dem. Guiden är leverantörs-neutral i grunden — den fungerar för Svaria, Calendly, Cal.com, Bokadirekt, TimeCenter eller andra system. Sista avsnittet beskriver Svarias specifika widget för dig som är intresserad.

Vad är en embed-bokningswidget?

En embed-widget är en interaktiv komponent som hämtas från en extern leverantör och renderas inom din egen hemsida. Tekniskt sker det genom att leverantören ger dig en kort kod-snutt — typiskt en `

När en besökare klickar "Boka tid" på din hemsida öppnas widget:en — som modal-fönster eller inline-block beroende på konfiguration — och kunden bokar direkt på din domän. Bokningen lagras hos leverantören men visas inom din hemsida.

Skillnaden mot en länk-baserad lösning: med länk skickas kunden till leverantörens domän (t.ex. bokadirekt.se eller calendly.com), bokningen görs där, och kunden eventuellt skickas tillbaka. Det skapar friktion. Embed-widget eliminerar friktionen.

Varför embed-widget är värdefull

1. Högre konvertering

Varje extra klick eller domän-byte minskar konverteringsraten. När kunden måste klicka en länk, vänta på att en ny sajt laddar, eventuellt logga in eller acceptera cookies på en ny domän — många avbryter. Embed-widget eliminerar detta steg. Konverteringen är typiskt 30–50 procent högre.

2. Du behåller kundrelationen

När kunden bokar på din domän är din verksamhet "varumärket" som genererade bokningen. När kunden bokar på en marknadsplats är marknadsplatsen varumärket. För långsiktigt kundförvärv är detta meningsfullt — kunden minns dig, inte verktyget.

3. Spårning i din egen analys

Bokningar via embed-widget kan triggas som event i Google Analytics, GTM, Meta Pixel eller andra spårningssystem. Du ser hela kundresan — vilka annonser, vilka sökord, vilka sociala kanaler som faktiskt genererar bokningar. Vid omdirigering till externa sajter bryts spårningen.

4. Designkontroll

Embed-widget kan ofta anpassas till din hemsidas design — färger, typografi, knapp-stil. Det betyder att bokningssteget känns som en naturlig del av din sida, inte ett främmande tilltrasslat moment.

5. Lägre bounce rate

Besökare som lämnar din sida för att boka och inte återvänder räknas inte som "bounce" om bokningen sker på samma domän. Det betyder bättre engagement-mätvärden och bättre SEO-signaler.

Hur det fungerar tekniskt

På högsta nivå fungerar de flesta embed-widgets så här:

Tekniska aspekter att veta:

Installation per plattform

WordPress

WordPress är vanligast i Sverige. Två sätt:

Custom HTML-block (rekommenderas):

```html

```

Plugin (om leverantören har ett):

Squarespace

Squarespace har Code Block som fungerar bra:

På Squarespace 7.0 (äldre mallar) kan det krävas att script-taggen läggs i Code Injection (Settings → Advanced) istället.

Wix

Wix har Embed Code-element:

Wix renderar embed inom iframe — höjdjustering kan krävas. Modal-läge (knapp som öppnar overlay) fungerar oftast bättre än inline.

Webflow

Webflow har Embed-element i Add panel:

Lägg script-taggen antingen i Embed-elementet eller i sidans Custom Code → Footer. Inte i ``.

Shopify

För Shopify-butiker som tar emot tidsbokningar:

Modal-läget rekommenderas på Shopify för att undvika kollisioner med temats grid.

Statisk HTML

För egenbyggda sajter (vanilla HTML, Hugo, Jekyll, Eleventy, Astro):

```html

Boka din tid hos oss

```

Lägg script-taggen precis innan `` för bästa laddningstid.

Anpassning av widget-design

De flesta moderna embed-widgets stödjer anpassning via data-attribut eller CSS-overrides:

```html

data-booking="dittSlug"

data-primary-color="#FF9900"

data-text-color="#1A1A1A"

data-background-color="#FFFFFF"

data-border-radius="8px"

data-language="sv"

>

```

Vanliga anpassningar:

För djupare anpassning (t.ex. matcha specifik design-token från designsystem) finns ofta CSS-overrides via leverantörens admin-panel. Vissa leverantörer tillåter helt anpassad CSS, andra begränsar till föransatta variabler.

Konverteringsoptimering

För att maximera konvertering:

1. Placera "Boka tid"-knappen synligt

Header eller hero-sektion på huvudsidan. Inte gömd längst ner. Många användare bestämmer sig på första vyn.

2. Använd modal-läget på mobil

Inline-widget på mobil kan kräva mycket scroll. Modal som tar över skärmen är ofta bättre på små skärmar.

3. Minimera fält i bokningsformuläret

Varje extra fält minskar konverteringen. Krav bara namn, telefon, e-post, behandling, tid. Allt annat är frivilligt eller efter bokning.

4. Visa pris och tid tydligt

Kunden vill veta vad det kostar och hur lång tid det tar innan de bekräftar. Ingen "ring för pris" — det är en konverteringsdödare 2026.

5. Tillåt gästbokning

Tvinga inte kunden att skapa konto. Gästbokning med telefon + e-post är optimalt.

6. SMS-bekräftelse direkt

Kunden ska få SMS inom 30 sekunder efter bokning. Det är trygghetssignal som minskar att de avbokar i osäkerhet.

7. Avbokningslänk i SMS

Enkel avbokning bygger förtroende. Försök inte göra avbokning svårt — det leder bara till no-shows istället.

Vanliga problem och felsökning

Widget syns inte alls.

Kolla att script-taggen är korrekt installerad. Öppna webbläsarens utvecklarverktyg (F12) och titta i Console efter felmeddelanden. Vanligaste orsaken: fel slug eller script-URL.

Widget visas men ser fel ut.

Hemsidans CSS överskuggar widget-stilen. Lösning: lägg widget:en i en wrapper med CSS-isolation eller använd modal-läget.

Widget laddar långsamt.

Verifiera att script-taggen har `async`-attributet (utan async blockerar den HTML-rendering). Kolla också Network-tabben i utvecklarverktyget — om widget-script:et tar >500 ms att ladda, kontakta leverantören.

Bokning genomförs men SMS kommer inte.

Vanligaste orsaken: felaktigt formaterat telefonnummer (svenska nummer ska börja med +46 eller 07). Andra orsaker: SMS-pool för månaden uttömd, leverantörens SMS-tjänst nere. Kolla logs i leverantörens admin.

Widget fungerar i Chrome men inte Safari.

Safari är striktare med tredjepartscookies och cross-origin-storage. Vissa widgets kräver särskild Safari-konfiguration. Verifiera med leverantören.

Layout går sönder på mobil.

Verifiera att din hemsida har `` i ``. Saknas den får alla embed-widgets layout-problem på telefon.

CSP blockerar widget.

Om din hemsida har strikt Content Security Policy, lägg till leverantörens domän i `script-src` och `connect-src`. Exempel: `script-src 'self' https://widget.example.com; connect-src 'self' https://api.example.com;`.

SEO-aspekter att tänka på

Embed-widget har potentiellt SEO-impact:

Positivt

Att tänka på

För salonger som vill att Google ska förstå "vi erbjuder klippning från 350 kr i Stockholm", lista detta som vanlig HTML eller schema-markup, inte bara i widget:en.

Svarias embed-widget specifikt

För dig som är intresserad av Svarias variant: widget:en ingår på alla planer, även Basic (0 kr/mån). Den är byggd med modern teknik (TypeScript, Web Components) och har följande specifikationer:

Installation tar 5 minuter på de vanligaste plattformarna. Detaljerade installationsinstruktioner finns på /bokningssystem/widget.

Skillnaden från andra widgets på marknaden är integrationen med AI-receptionisten — om verksamheten har Svarias AI-receptionist aktiverad används samma kalender för bokningar via webb som via telefon. Ingen synkronisering, ingen risk för dubbelbokning.

Vanliga frågor

Måste jag vara utvecklare för att installera embed-widget?

Nej. På de vanligaste plattformarna (WordPress, Squarespace, Wix, Webflow, Shopify) är installationen kopiera-klistra-in. Tar 5 minuter.

Kan jag ha embed-widget på flera hemsidor?

Ja, oftast. Samma slug fungerar på flera domäner kopplade till samma konto.

Påverkar widget:en min sidas laddningstid?

Minimalt om script:et är async-laddat. Lighthouse-poäng påverkas typiskt med <50 ms.

Vad händer om leverantörens server går ner?

Widget visar fallback-meddelande. Verksamheten missar bokningar tills servern är uppe igen. Välj leverantörer med hög uppetid (>99,9 %) och redundans.

Kan jag spåra bokningar i Google Analytics?

Ja, om widget:en triggar konversions-event. De flesta moderna widgets gör detta automatiskt eller via konfiguration.

Är embed-widget bättre än länk-baserad lösning?

För konvertering — ja, oftast. För enkelhet — länk är enklare. Beslutet beror på hur central bokningen är för verksamheten.

Slutsats

Embed-bokningswidget är 2026 standardlösningen för verksamheter som tar tidsbokningar. Tekniken är enkel, konverteringsfördelarna är konkreta, och installation tar 5 minuter på de vanligaste plattformarna.

Det viktigaste är att välja en leverantör som passar er verksamhets behov — funktioner, anpassningsmöjligheter, prismodell, support. Tekniskt sett är de flesta widgets jämförbara. Skillnaden ligger i affärsmodellen runt om.

För salonger, restauranger, hudvårdsterapeuter och liknande SMB:er är embed-widget oftast värdefullare än marknadsplats-listning eftersom man behåller den direkta kundrelationen och spårningen i sin egen analytik.

Läs Svarias detaljerade installationsguide