Svaria
    Logga in / Skapa konto

    Installationsguide

    Lägg bokningen på din egen hemsida

    En kod på din hemsida, och bokningssidan öppnas i en panel ovanpå din egen sida — gästen lämnar aldrig din hemsida. Koden kopierar du färdig från Svaria.

    Skapa konto →Allt om bokningssystemet

    Ingår i planen. Prova gratis i 14 dagar.

    Vad koden gör

    När en besökare klickar Boka öppnas samma bokningssida som på app.svaria.io, i en panel ovanpå din sida. Så här går bokningen till:

    1

    Vad gästen vill boka

    Antal gäster för restauranger, eller vad jobbet gäller för hantverkare och städföretag.

    2

    Tid

    Lediga tider visas direkt, räknade mot er kapacitet.

    3

    Önskemål

    Allergier, tillfälle och det ni vill veta i förväg.

    4

    Kunduppgifter

    Namn, telefonnummer, e-post.

    5

    Bekräftelse

    Gästen får en bekräftelse direkt, och bokningen syns i kalendern.

    Koden

    Du hittar den under Företagsprofil → Bokningsprofil → Lägg bokningen på din hemsida → Kopiera kod. Där står din adress och ditt id redan ifyllda. Den ser ut så här:

    1. Första raden fångar klick som kommer innan scriptet hunnit ladda.
    2. Andra raden laddar boka.js från app.svaria.io.
    3. Tredje raden är knappen — en vanlig länk till din bokningssida. Byt gärna texten Boka.
    <script>window.__svariaQ=[];document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('[data-svaria]');if(!t||window.__svariaBokaLoaded)return;e.preventDefault();window.__svariaQ.push(t.getAttribute('data-svaria'));var h=t.getAttribute('href');setTimeout(function(){if(!window.__svariaBokaLoaded&&h)location.href=h;},2500);},true);</script> <script src="https://app.svaria.io/boka.js" defer></script> <a href="https://app.svaria.io/din-slug" data-svaria="ditt-id">Boka</a>

    Installation på WordPress

    Använd ett Custom HTML-block. Det finns inget särskilt Svaria-plugin — koden räcker.

    1. Logga in på WordPress-admin.
    2. Öppna sidan eller posten där knappen ska sitta.
    3. Klicka Lägg till block → Custom HTML.
    4. Klistra in koden från Svaria.
    5. Spara sidan.
    <script>window.__svariaQ=[];document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('[data-svaria]');if(!t||window.__svariaBokaLoaded)return;e.preventDefault();window.__svariaQ.push(t.getAttribute('data-svaria'));var h=t.getAttribute('href');setTimeout(function(){if(!window.__svariaBokaLoaded&&h)location.href=h;},2500);},true);</script> <script src="https://app.svaria.io/boka.js" defer></script> <a href="https://app.svaria.io/din-slug" data-svaria="ditt-id">Boka</a>

    Installation på Squarespace

    1. Logga in på Squarespace-admin.
    2. Öppna sidan där bokningsknappen ska finnas.
    3. Klicka Edit → välj plats → Add Block → Code.
    4. Välj HTML som typ och klistra in koden från Svaria.
    5. Klicka Apply och Save.
    <script>window.__svariaQ=[];document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('[data-svaria]');if(!t||window.__svariaBokaLoaded)return;e.preventDefault();window.__svariaQ.push(t.getAttribute('data-svaria'));var h=t.getAttribute('href');setTimeout(function(){if(!window.__svariaBokaLoaded&&h)location.href=h;},2500);},true);</script> <script src="https://app.svaria.io/boka.js" defer></script> <a href="https://app.svaria.io/din-slug" data-svaria="ditt-id">Boka</a>

    Installation på Wix

    1. Logga in på Wix-editorn.
    2. Klicka Add (+) → Embed Code → Embed HTML.
    3. Placera elementet där knappen ska finnas.
    4. Klicka Enter Code och klistra in koden från Svaria.
    5. Klicka Update och publicera.
    <script>window.__svariaQ=[];document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('[data-svaria]');if(!t||window.__svariaBokaLoaded)return;e.preventDefault();window.__svariaQ.push(t.getAttribute('data-svaria'));var h=t.getAttribute('href');setTimeout(function(){if(!window.__svariaBokaLoaded&&h)location.href=h;},2500);},true);</script> <script src="https://app.svaria.io/boka.js" defer></script> <a href="https://app.svaria.io/din-slug" data-svaria="ditt-id">Boka</a>

    Wix lägger inbäddad kod i en egen ruta. Blir panelen för liten där kan du i stället länka en vanlig Wix-knapp direkt till din bokningssida (app.svaria.io/din-slug).

    Installation på Webflow

    1. Dra in ett Embed-element från Add panel i Webflow-designern.
    2. Placera där knappen ska sitta.
    3. Klicka Edit Code och klistra in koden från Svaria.
    4. Klicka Save & Close och publicera sajten.
    <script>window.__svariaQ=[];document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('[data-svaria]');if(!t||window.__svariaBokaLoaded)return;e.preventDefault();window.__svariaQ.push(t.getAttribute('data-svaria'));var h=t.getAttribute('href');setTimeout(function(){if(!window.__svariaBokaLoaded&&h)location.href=h;},2500);},true);</script> <script src="https://app.svaria.io/boka.js" defer></script> <a href="https://app.svaria.io/din-slug" data-svaria="ditt-id">Boka</a>

    Installation på Shopify

    1. Online Store → Themes → Edit code.
    2. Öppna theme.liquid (eller motsvarande layout-fil).
    3. Lägg in de två script-raderna precis innan </body>:
    <script>window.__svariaQ=[];document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('[data-svaria]');if(!t||window.__svariaBokaLoaded)return;e.preventDefault();window.__svariaQ.push(t.getAttribute('data-svaria'));var h=t.getAttribute('href');setTimeout(function(){if(!window.__svariaBokaLoaded&&h)location.href=h;},2500);},true);</script> <script src="https://app.svaria.io/boka.js" defer></script>

    På sidan där knappen ska finnas lägger du in länken:

    <a href="https://app.svaria.io/din-slug" data-svaria="ditt-id">Boka</a>

    Installation på statisk HTML

    För egenbyggda sajter (vanilla HTML, statiska generators som Hugo, Jekyll, Eleventy eller Astro):

    <!DOCTYPE html> <html> <head> <title>Boka bord</title> </head> <body> <h1>Boka bord hos oss</h1> <a href="https://app.svaria.io/din-slug" data-svaria="ditt-id">Boka</a> <script>window.__svariaQ=[];document.addEventListener('click',function(e){var t=e.target&&e.target.closest&&e.target.closest('[data-svaria]');if(!t||window.__svariaBokaLoaded)return;e.preventDefault();window.__svariaQ.push(t.getAttribute('data-svaria'));var h=t.getAttribute('href');setTimeout(function(){if(!window.__svariaBokaLoaded&&h)location.href=h;},2500);},true);</script> <script src="https://app.svaria.io/boka.js" defer></script> </body> </html>

    Länken kan stå var som helst på sidan, och du kan ha flera. Script-raderna behöver bara finnas en gång.

    Utseendet

    Bokningssidan får sitt utseende från din bokningsprofil i Svaria: logga, omslagsbild, bildgalleri och accentfärg. Ändrar du där ändras det överallt där koden sitter — du behöver aldrig röra koden på hemsidan.

    Bekräftelser och påminnelser

    När gästen bokar via din hemsida skickas samma utskick som vid en bokning på bokningssidan:

    DirektBekräftelse med tid och plats — som mail, eller sms om gästen saknar mail.
    Före besöketPåminnelse, om ni har slagit på den.
    Efter besöketFörfrågan om recension, om ni har slagit på den.

    I mobilen och på datorn

    Panelen anpassar sig efter skärmen. Den stängs med krysset, med Esc eller med ett klick utanför.

    Mobil
    bokningen glider upp nedifrån och fyller hela skärmen
    Dator och platta
    en bred panel glider in från höger, och en remsa av din sida syns kvar

    Användningsfall per bransch

    Restauranger

    Bokningsknapp i sidhuvudet på alla sidor. Antal gäster, tid och önskemål — och bara tider som faktiskt får plats.

    Hantverkare

    Knappen på kontaktsidan. Kunden beskriver jobbet och var det ligger, och förfrågan blir ett lead hos dig.

    Städföretag

    Knappen där nya kunder hittar er. De lämnar en förfrågan, och befintliga kunder sköter sina besök via sin egen länk.

    Vanliga problem och felsökning

    Inget händer när jag klickar

    Kontrollera att hela koden kom med — båda script-raderna och länken — och att länken har kvar data-svaria. Klistra helst in koden från Kopiera kod igen.

    Bokningssidan öppnas som en egen sida

    Då har scriptet inte laddat. Kontrollera att raden med boka.js finns på sidan och inte blockeras av en cookie- eller script-spärr i hemsidans inställningar.

    Knappen ser fel ut

    Länken får hemsidans egen stil. Ge den en klass eller använd hemsidans knappkomponent — det viktiga är att href och data-svaria finns kvar.

    Bokningssidan säger att den inte är publicerad

    Publicera bokningssidan i Svaria först. Den kräver företagsnamn och adress.

    Vanliga frågor

    Kostar inbäddningen något extra?

    Nej. Bokningssidan och koden för hemsidan ingår i planen.

    Kan jag ha bokningen på flera hemsidor?

    Ja. Samma kod fungerar på varje hemsida där du klistrar in den.

    Fungerar bokningen på flerspråkiga hemsidor?

    Ja. Bokningssidan visas på svenska, engelska eller norska efter gästens språk.

    Påverkar koden hemsidans laddningstid?

    Knappt. Scriptet laddas med defer och blockerar inte sidan. Bokningssidan förladdas först när besökaren håller muspekaren över knappen, eller på mobilen när knappen syns.

    Vad händer om scriptet inte laddar?

    Knappen är en vanlig länk. Laddar scriptet inte öppnas bokningssidan som en vanlig sida i stället, så klicket går aldrig förlorat.

    Behöver jag byta koden om jag byter företagsnamn?

    Nej. Koden pekar på ditt id, som aldrig ändras, och den gamla adressen leder vidare till den nya.

    Skapa kontoBoka demo