Installasjonsguide

    Embed-bestillingswidget på din egen hjemmeside

    Installer bestillingskalenderen direkte på hjemmesiden din — kunden forlater ikke domenet ditt under bestillingsflyten. Installasjon tar typisk 5 minutter.

    Inkludert i alle planer — også Basic (0 kr/mnd).

    Hva widgeten gjør

    Når en besøkende klikker "Bestill tid" åpnes widgeten som modal eller inline-blokk. Konverteringen er typisk 30–50 % høyere enn ved omdirigering til eksterne bestillingssider.

    1

    Tjenestevalg

    Eller bordstørrelse for restauranter, sesjonstype for hudpleieterapeuter.

    2

    Tidsvalg

    Kalendervisning eller listevisning av ledige tider.

    3

    Personellvalg

    Hvis bedriften har flere ansatte og kunden vil velge en spesifikk person.

    4

    Kundeopplysninger

    Navn, telefonnummer, e-post.

    5

    Bekreftelse

    SMS sendes umiddelbart, kalenderen oppdateres.

    Installasjon på WordPress

    WordPress er en av de vanligste plattformene i Norge. Installasjonen kan gjøres via Custom HTML-blokk eller via Svaria-plugin.

    Metode 1: Custom HTML-blokk (anbefales)

    1. Logg inn på WordPress-admin.
    2. Åpne siden eller innlegget hvor knappen skal være.
    3. Klikk Legg til blokk → Custom HTML.
    4. Lim inn koden nedenfor og bytt dinSlug med din unike identifikator.
    5. Lagre siden.
    <div data-svaria-booking="dinSlug"></div>
    <script async src="https://widget.svaria.io/v1/embed.js"></script>

    Metode 2: Shortcode via Svaria-plugin

    Søk etter "Svaria Booking" i WordPress plugin-katalogen, installer og aktiver. Legg deretter inn shortcode i siden:

    [svaria-booking slug="dinSlug"]

    Installasjon på Squarespace

    1. Logg inn på Squarespace-admin.
    2. Åpne siden hvor bestillingsknappen skal være.
    3. Klikk Edit → velg plassering → Add Block → Code.
    4. Velg HTML som type og lim inn koden nedenfor.
    5. Klikk Apply og Save.
    <div data-svaria-booking="dinSlug"></div>
    <script async src="https://widget.svaria.io/v1/embed.js"></script>

    På Squarespace 7.1 fungerer dette direkte. På 7.0-maler kan Code Block trenge å plasseres i Code Injection (Settings → Advanced → Code Injection → Footer).

    Installasjon på Wix

    1. Logg inn på Wix-editoren.
    2. Klikk Add (+) → Embed Code → Embed HTML.
    3. Plasser elementet hvor knappen skal være.
    4. Klikk Enter Code og lim inn inline-versjonen — eller bruk modal-varianten nedenfor for full responsivitet.
    5. Klikk Update og publiser.

    Modal-modus anbefales på Wix:

    <button onclick="window.SvariaBooking.open('dinSlug')">Bestill tid</button>
    <script async src="https://widget.svaria.io/v1/embed.js"></script>

    Installasjon på Webflow

    1. Dra inn et Embed-element fra Add-panelet i Webflow-designeren.
    2. Plasser hvor knappen skal være.
    3. Klikk Edit Code og lim inn koden nedenfor.
    4. Klikk Save & Close og publiser siten.
    <div data-svaria-booking="dinSlug"></div>
    <script async src="https://widget.svaria.io/v1/embed.js"></script>

    Ikke legg script-taggen i <head> — den lastes da før DOM er klar og kan feile. Bruk Embed-elementet eller Custom Code → Footer.

    Installasjon på Shopify

    1. Online Store → Themes → Edit code.
    2. Åpne theme.liquid (eller tilsvarende layout-fil).
    3. Legg inn script-taggen rett før </body>:
    <script async src="https://widget.svaria.io/v1/embed.js"></script>

    På siden hvor knappen skal være (Page eller Product Page), legg inn:

    <div data-svaria-booking="dinSlug"></div>

    Modal-modus anbefales på Shopify siden inline-modus kan kollidere med temaets grid.

    Installasjon på statisk HTML

    For egenbygde sites (vanilla HTML, statiske generatorer som Hugo, Jekyll, Eleventy eller Astro):

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bestill tid</title>
    </head>
    <body>
      <h1>Bestill din tid hos oss</h1>
    
      <!-- Inline embed -->
      <div data-svaria-booking="dinSlug"></div>
    
      <!-- Eller modal-modus med knapp -->
      <button onclick="window.SvariaBooking.open('dinSlug')">Bestill tid</button>
    
      <script async src="https://widget.svaria.io/v1/embed.js"></script>
    </body>
    </html>

    Det eneste som kreves er at script-taggen finnes et sted i dokumentet — anbefalt: rett før </body>.

    Tilpasning av farger og typografi

    Widgeten arver hjemmesidens typografi via CSS-variabler. Farger tilpasses via data-attributter:

    <div
      data-svaria-booking="dinSlug"
      data-primary-color="#FF9900"
      data-text-color="#1A1A1A"
      data-background-color="#FFFFFF"
      data-border-radius="8px"
    ></div>

    For dypere tilpasning finnes CSS-overrides via Svaria-dashbordet → Embed → Advanced styling. Streng brand-guideline? Kontakt support.

    SMS-bekreftelse-flyt

    Når kunden bestiller via embed-widgeten skjer følgende automatisk:

    UmiddelbartSMS med bestillingsbekreftelse, sted, tid og avbestillingslink.
    24 timer førPåminnelse-SMS med avbestillingslink.
    2 timer førKort påminnelse-SMS.
    Etter besøket (valgfritt)Takke-SMS med link for anmeldelse.

    Inkludert SMS-volum avhenger av valgt plan. Utover inkludert volum belastes til selvkost (ca. 0,40 kr/SMS, varierer med operatør).

    Mobiloptimering

    Widgeten er bygget mobile-first og håndterer fire responsive breakpoints. Touch-targets er minst 44×44 px iht. iOS- og Android-standard. Input-felt har font-size 16 px minimum for å unngå auto-zoom på iOS Safari.

    <480px
    fullskjerm-modal — anbefalt på telefon
    480–768px
    stor modal med padding
    768–1280px
    sentrert modal med maks-bredde 600px
    >1280px
    sentrert modal eller inline avhengig av konfigurasjon

    Layout-problemer på mobil? Verifiser først at hjemmesiden har <meta name="viewport" content="width=device-width, initial-scale=1"> i <head>.

    Bruksområder per bransje

    Frisørsalonger

    Inline-embed på "Bestill tid"-siden. Tjenestevalg, per-frisør-visning, prisliste før bekreftelse.

    Restauranter

    Modal-knapp i header på alle sider. Bordstørrelse, seksjon, tid. Avbestillingsregler synlige før bekreftelse.

    Håndverkere

    Inline på kontaktsiden sammen med kontaktskjema. Konsultasjons- eller hjemmebesøksbestilling, områdevalg.

    Tatoveringsstudioer

    Inline på "Bestill konsultasjon". Konsultasjonen er gratis, fritekstfelt for tatoveringsidé.

    Hudpleie og massasje

    Inline på "Bestill behandling". Add-on-støtte (f.eks. "ansiktsmaske + 15 min").

    Vanlige problemer og feilsøking

    Widgeten vises ikke i det hele tatt

    Verifiser at script-taggen er installert og at data-svaria-booking har riktig slug. Åpne utviklerverktøy (F12) → Console og se etter feilmeldinger fra widget.svaria.io.

    Widgeten vises men ser feil ut

    Hjemmesidens CSS overstyrer ofte widget-stilen via globale regler. Bruk CSS-isolasjon via en wrapper med all: initial eller bruk modal-modus i stedet.

    Widgeten lastes sakte

    Scriptet er ca. 18 KB gzippet og bør lastes på under 300 ms. Verifiser at script-taggen har async-attributtet.

    Bestilling gjennomføres men SMS kommer ikke

    Sjekk Logs i Svaria-dashbordet. Vanligste årsak er feil formatert telefonnummer (norske nummer skal starte med +47 eller 4).

    Widgeten fungerer ikke i Internet Explorer

    Internet Explorer støttes ikke. Edge, Chrome, Firefox, Safari (15+) og Samsung Internet er de offisielt støttede nettleserne.

    Vanlige spørsmål

    Koster widgeten noe ekstra?

    Nei. Embed-widgeten er inkludert i alle planer, også Basic (0 kr/mnd).

    Kan jeg ha widgeten på flere hjemmesider?

    Ja. Samme slug fungerer på ubegrenset antall domener koblet til samme Svaria-konto.

    Kan widgeten brukes på flerspråklige hjemmesider?

    Ja. Legg til data-language="no" eller data-language="en" på div-elementet. Støtte finnes for 30+ språk.

    Påvirker widgeten hjemmesidens lastetid?

    Minimalt. Scriptet er async-lastet og blokkerer ikke rendering. På Lighthouse-test påvirkes LCP typisk med under 50 ms.

    Kan jeg spore bestillinger i Google Analytics?

    Ja. Widgeten trigger dataLayer.push({event: 'svaria_booking_complete'}) ved vellykket bestilling. Konfigurer GA4 eller GTM til å fange eventet.

    Hva skjer hvis Svarias servere er nede?

    Widget-scriptet er cachet i CDN. Hvis bakenforliggende tjeneste er utilgjengelig vises en fallback-melding med telefonnummeret ditt. Vi har 99,9 % oppetidsmål med automatisk failover.

    Installer widgeten på 5 minutter

    Opprett konto, kopier embed-koden, lim inn. Bestillingssystemet er gratis inkludert i Basic-planen.

    Opprett konto gratis →