Embed-bokningswidget på din hemsida — så funkar det
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 kan vara stor: färre kunder hoppar av på vägen än när de skickas vidare till en extern bokningssida, 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 — principerna gäller för Calendly, Cal.com, Bokadirekt, TimeCenter eller andra system. Kodexemplen är generella; den exakta koden får du från din leverantör. Sista avsnittet beskriver hur Svarias bokningsknapp fungerar 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 <script>-tag plus en <div> — som du klistrar in på den sida där du vill att bokningskalendern ska finnas.
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 hemsida laddar, eventuellt logga in eller acceptera cookies på en ny domän — många avbryter. Embed-widget eliminerar detta steg.
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 hemsidor bryts spårningen ofta.
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:
- Du klistrar in en script-tag i din hemsida som laddar widget-koden från leverantörens CDN.
- Du klistrar in en
<div>med ett unikt id eller data-attribut där widget:en ska renderas. - När sidan laddar kör script:et, hittar
<div>-elementet och injicerar bokningsgränssnittet där. - Widget-script:et kommunicerar med leverantörens API för att hämta lediga tider, behandlingar, prislista.
- Kunden interagerar med widget:en — väljer behandling, tid, fyller i kontaktuppgifter.
- Vid bekräftelse skickar widget:en bokningen till leverantörens API, som lagrar den och triggar SMS-bekräftelse.
Tekniska aspekter att veta:
- Script:et bör vara
async-laddat så det inte blockerar sidans rendering. - Widget:en kan rendera i iframe eller direkt i DOM — beroende på leverantör. iframes isolerar styling men kan ha höjdjusteringsproblem.
- Cross-Origin Resource Sharing (CORS) måste vara korrekt konfigurerat. De flesta leverantörer hanterar detta automatiskt.
- Content Security Policy (CSP) kan blockera widget-script om din hemsida har strikt CSP. Du behöver tillåta leverantörens domän i
script-srcochconnect-src.
Installation per plattform
WordPress
WordPress är vanligast i Sverige. Två sätt:
Custom HTML-block (rekommenderas):
- Lägg till Custom HTML-block i sidan eller posten.
- Klistra in:
<div data-booking="dittSlug"></div>
<script async src="https://widget.example.com/embed.js"></script>- Spara.
Plugin (om leverantören har ett):
- Sök efter leverantörens plugin i WordPress-katalogen.
- Aktivera och konfigurera.
- Använd shortcode (t.ex.
[booking slug="dittSlug"]) i sidor.
Squarespace
Squarespace har Code Block som fungerar bra:
- Edit sidan → Add Block → Code.
- Välj HTML-typ och klistra in widget-koden.
- Apply och Save.
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:
- Add (+) → Embed Code → Embed HTML.
- Placera elementet i layouten.
- Klistra in widget-koden.
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:
- Dra in Embed-element.
- Klicka Edit Code och klistra in widget-koden.
- Save & Close, publicera.
Lägg script-taggen antingen i Embed-elementet eller i sidans Custom Code → Footer. Inte i <head>.
Shopify
För Shopify-butiker som tar emot tidsbokningar:
- Online Store → Themes → Edit code.
- Lägg script-taggen i
theme.liquidprecis innan</body>. - På sidan där knappen ska finnas, lägg in
<div data-booking="dittSlug"></div>.
Modal-läget rekommenderas på Shopify för att undvika kollisioner med temats grid.
Statisk HTML
För egenbyggda hemsidor (vanilla HTML, Hugo, Jekyll, Eleventy, Astro):
<!DOCTYPE html>
<html>
<head><title>Boka tid</title></head>
<body>
<h1>Boka din tid hos oss</h1>
<div data-booking="dittSlug"></div>
<script async src="https://widget.example.com/embed.js"></script>
</body>
</html>Lägg script-taggen precis innan </body> för bästa laddningstid.
Anpassning av widget-design
De flesta moderna embed-widgets stödjer anpassning via data-attribut eller CSS-overrides:
<div
data-booking="dittSlug"
data-primary-color="#FF9900"
data-text-color="#1A1A1A"
data-background-color="#FFFFFF"
data-border-radius="8px"
data-language="sv"
></div>Vanliga anpassningar:
- Färger — primärfärg, textfärg, bakgrund, border-färg
- Typografi — många widgets ärver hemsidans font-family automatiskt
- Knapp-stil — radius, padding, hover-stat
- Språk — för flerspråkiga hemsidor
- Modal vs inline — beroende på var widget:en placeras
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 <meta name="viewport" content="width=device-width, initial-scale=1"> i <head>. 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
- Lägre bounce rate eftersom besökare inte lämnar din domän
- Längre time-on-page (kunder spenderar tid med widget:en)
- Konverteringssignal till sökmotorer — bokning är ett tydligt engagement-mål
Att tänka på
- Widget-innehåll är ofta inte indexerbart — texten i widget:en (behandlingsnamn, prislista) syns inte för sökmotorer eftersom det laddas via JavaScript efter sidans render. Lös genom att också lista behandlingar och priser som vanlig HTML på sidan.
- Widget:en ska inte sakta ned LCP (Largest Contentful Paint) — verifiera Core Web Vitals efter installation.
- Widget-script bör inte blockera rendering — använd alltid
async.
För salonger som vill att Google ska förstå "vi erbjuder klippning i Stockholm", lista behandlingar och priser som vanlig HTML eller schema-markup, inte bara i widget:en.
Svarias bokningsknapp specifikt
För dig som är intresserad av hur Svaria gör: bokningsknappen ingår i planen. Det är ingen separat widget som du ställer in med kod, utan en färdig "Boka"-knapp som du kopierar från bokningsprofilen i Svaria och klistrar in på din hemsida. Koden består av ett litet script och en vanlig länk till din bokningssida.
- Samma bokningssida: knappen öppnar exakt samma bokningssida som din publika bokningslänk, i en panel ovanpå din hemsida. Gästen lämnar inte din sida.
- Dator och mobil: på dator glider panelen in från höger, på mobil tar den hela skärmen.
- Fungerar utan JavaScript: knappen är en vanlig länk i grunden. Om scriptet inte laddas går länken till bokningssidan som vanligt, och sökmotorer ser en riktig länk.
- Utseende: logotyp, omslagsbild, accentfärg och textfärg ställer du in på bokningsprofilen i Svaria. De syns även i panelen, eftersom det är samma sida.
Skillnaden från fristående widgets är att bokningssidan och agenterna delar samma bokningssystem — bokningar som kommer via hemsidan och bokningar som agenten tar i telefon eller chatt hamnar på samma ställe. Ingen synkronisering mellan olika system behövs.
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.
Kan jag ha embed-widget på flera hemsidor?
Det beror på leverantören. Fråga om samma kod får användas på flera domäner innan du lägger in den.
Påverkar widget:en min sidas laddningstid?
Oftast marginellt om script:et laddas med async eller defer. Mät gärna sidan före och efter installation.
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 installationen är kopiera-klistra-in 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.
