Installera bokningskalendern direkt på din hemsida — kunden lämnar inte din domän under bokningsflödet. Installation tar typiskt 5 minuter.
Ingår på alla planer — även Basic (0 kr/mån).
När en besökare klickar "Boka tid" öppnas widgeten som modal eller inline-block. Konverteringen är typiskt 30–50 % högre än vid omdirigering till externa bokningssajter.
Eller bordstorlek för restauranger, sessionstyp för hudvårdsterapeuter.
Kalendervy eller listvy över lediga tider.
Om verksamheten har flera anställda och kunden vill välja specifik person.
Namn, telefonnummer, e-post.
SMS skickas direkt, kalendern uppdateras.
WordPress är den vanligaste plattformen i Sverige. Installationen kan göras via Custom HTML-block eller via Svaria-plugin.
<div data-svaria-booking="dittSlug"></div>
<script async src="https://widget.svaria.io/v1/embed.js"></script>Sök efter "Svaria Booking" i WordPress plugin-katalogen, installera och aktivera. Lägg sedan in shortcode i sidan:
[svaria-booking slug="dittSlug"]<div data-svaria-booking="dittSlug"></div>
<script async src="https://widget.svaria.io/v1/embed.js"></script>På Squarespace 7.1 fungerar detta direkt. På 7.0-mallar kan Code Block behöva placeras i Code Injection (Settings → Advanced → Code Injection → Footer).
Modal-läget rekommenderas på Wix:
<button onclick="window.SvariaBooking.open('dittSlug')">Boka tid</button>
<script async src="https://widget.svaria.io/v1/embed.js"></script><div data-svaria-booking="dittSlug"></div>
<script async src="https://widget.svaria.io/v1/embed.js"></script>Lägg inte script-taggen i <head> — den laddas då innan DOM är klar och kan misslyckas. Använd Embed-elementet eller Custom Code → Footer.
<script async src="https://widget.svaria.io/v1/embed.js"></script>På sidan där knappen ska finnas (Page eller Product Page), lägg in:
<div data-svaria-booking="dittSlug"></div>Modal-läget rekommenderas på Shopify eftersom inline-läget kan kollidera med temats grid.
För egenbyggda sajter (vanilla HTML, statiska generators som Hugo, Jekyll, Eleventy eller Astro):
<!DOCTYPE html>
<html>
<head>
<title>Boka tid</title>
</head>
<body>
<h1>Boka din tid hos oss</h1>
<!-- Inline embed -->
<div data-svaria-booking="dittSlug"></div>
<!-- Eller modal-läge med knapp -->
<button onclick="window.SvariaBooking.open('dittSlug')">Boka tid</button>
<script async src="https://widget.svaria.io/v1/embed.js"></script>
</body>
</html>Det enda som krävs är att script-taggen finns någonstans i dokumentet — rekommenderat: precis innan </body>.
Widgeten ärver hemsidans typografi via CSS-variabler. Färger anpassas via data-attribut:
<div
data-svaria-booking="dittSlug"
data-primary-color="#FF9900"
data-text-color="#1A1A1A"
data-background-color="#FFFFFF"
data-border-radius="8px"
></div>För djupare anpassning finns CSS-overrides via Svaria-instrumentpanelen → Embed → Advanced styling. Strikt brand-guideline? Kontakta supporten.
När kunden bokar via embed-widgeten händer följande automatiskt:
Inkluderad SMS-volym beror på vald plan. Utöver inkluderad volym debiteras till självkostnad (cirka 0,40 kr/SMS, varierar med operatör).
Widgeten är byggd mobile-first och hanterar fyra responsiva brytpunkter. Touchtargets är minst 44×44 px enligt iOS- och Android-standard. Input-fält har font-size 16 px minimum för att undvika auto-zoom på iOS Safari.
Layout-problem på mobil? Verifiera först att din hemsida har <meta name="viewport" content="width=device-width, initial-scale=1"> i <head>.
Inline-embed på "Boka tid"-sidan. Behandlingsval, per-frisör-vy, prislista innan bekräftelse.
Modal-knapp i header på alla sidor. Bordsstorlek, sektion, tid. Avbokningsregler synliga innan bekräftelse.
Inline på kontaktsidan tillsammans med kontaktformulär. Konsultations- eller hembesöksbokning, område-val.
Inline på "Boka konsultation". Konsultationen är gratis, fri-textfält för tatueringsidé.
Inline på "Boka behandling". Add-on-stöd (t.ex. "ansiktsmask + 15 min").
Verifiera att script-taggen är installerad och att data-svaria-booking har rätt slug. Öppna utvecklarverktyg (F12) → Console och leta efter felmeddelanden från widget.svaria.io.
Hemsidans CSS overridear ofta widget-stilen via { } -regler. Använd CSS-isolation via en wrapper med all: initial eller använd modal-läget istället.
Scriptet är cirka 18 KB gzippat och bör laddas på under 300 ms. Verifiera att script-taggen har async-attributet.
Kontrollera Logs i Svaria-instrumentpanelen. Vanligaste orsaken är felaktigt formaterat telefonnummer (svenska nummer ska börja med +46 eller 07).
Internet Explorer stöds inte. Edge, Chrome, Firefox, Safari (15+) och Samsung Internet är de officiellt stödda webbläsarna.
Nej. Embed-widgeten ingår på alla planer, även Basic (0 kr/mån).
Ja. Samma slug fungerar på obegränsat antal domäner kopplade till samma Svaria-konto.
Ja. Lägg till data-language="sv" eller data-language="en" på div-elementet. Stöd finns för 30+ språk.
Minimalt. Scriptet är async-laddat och blockerar inte rendering. På Lighthouse-test påverkas LCP typiskt med under 50 ms.
Ja. Widgeten triggar dataLayer.push({event: 'svaria_booking_complete'}) vid lyckad bokning. Konfigurera GA4 eller GTM att fånga eventet.
Widget-scriptet är cachat i CDN. Om bakomliggande tjänst är otillgänglig visas ett fallback-meddelande med ditt telefonnummer. Vi har 99,9 % uppetidsmål med automatisk failover.
Skapa konto, kopiera embed-koden, klistra in. Bokningssystemet ingår gratis på Basic-planen.
Skapa konto gratis →