Skip to content

    Så implementerar du din bokningswidget

    Appointments av Vården.se

     12 December 2025 av Vården.se
    Senast uppdaterad: December 2025

    Redo att implementera din widget?

    Kul att ni är redo att gå live med er bokningswidget! I den här guiden går vi igenom hur du lägger in widgetkoderna på er egna hemsida. 

    Det finns två sätt att visa bokningswidgeten på din hemsida:

    1. Pop-up widget (modal) – öppnas i ett pop-up-fönster när man klickar på en knapp.

    2. Iframe-widget – ligger “platt” direkt på sidan, som en inbäddad bokningssektion.

    Appointments-landing-page-aesthetica (1)

     

    1. Innan du börjar – vad är <head> och <body>?

    I nästan alla hemsideverktyg (WordPress, Webflow, Wix, egna kodade sidor etc.) finns det:

    • <head> – osynlig del som innehåller t.ex. typsnitt, CSS-filer och script.
    • <body> – allt det som syns på sidan (text, bilder, knappar, formulär osv).

    När vi pratar om Head code ska den in i <head>.
    När vi pratar om Body code och knapp ska de in i <body>.

    Oavsett om du väljer Pop-up eller iframe så skickar vi över era unika widgetkoder på mejl.

     

    2. Pop-up widget (Modal)

    Pop-up-widgeten öppnas när besökaren klickar på en knapp – t.ex. “Boka tid”.

    Steg 1: Klistra in Head code i <head>

    Lägg in följande kod i sidans <head> (ofta under “Custom code”, “Header scripts” eller liknande i ditt hemsideverktyg):

     
    <link id="widget-modal-style" rel="stylesheet" href="https://www.varden.se/booking-widget/widgetModalMulti.css">

     

    Denna kod laddar stilmallen (CSS) för själva widgeten.

     

    Steg 2: Klistra in Body code i <body>

    Placera följande kod någonstans i <body> – ofta längst ner på sidan, precis före </body>:

     
    <div class="vardenWidgetBackdrop varden-widget-hidden" data-widget-id="w180-"></div>
    <div class="vardenWidgetModal varden-widget-hidden" data-widget-id="w180-">
    <div class="vardenWidgetModalContent" data-widget-id="w180-" src="https://www.varden.se/booking-widget?widgetId=w180&defaultClinicId=260&origin=https%3A%2F%2Fwww.varden.se"> </div>
    </div>
    <script id="widget-modal-script" src="https://www.varden.se/booking-widget/widgetModalMulti.js"></script>

     

    Detta gör två saker:

    • Förbereder själva pop-up-fönstret (modalen) på sidan.

    • Laddar JavaScript-filen som styr hur widgeten beter sig.

    Viktigt! 
    data-widget-id och widgetId=w180 i URL:en är kopplade till just er widget. Ändra inte dessa värden om ni inte fått andra koder från Vården.se.

     

    Steg 3: Lägg till en knapp som öppnar widgeten

    Nu behöver du en knapp på sidan som användaren kan klicka på för att öppna bokningen.

    Placera den där du vill ha din “Boka tid”-knapp, t.ex. i en sektion, i en sidokolumn eller i sidhuvudet:

     
    <button data-widget-id="w180-" class="openVardenWidgetModalBtn">
    Boka tid
    </button>

     

    Du kan byta ut texten “Boka tid” till vad du vill (t.ex. “Boka besök”, “Boka undersökning” osv.).

    Knappen kopplas ihop med widgeten genom data-widget-id="w180-".
    Den måste matcha samma data-widget-id som i koden i Steg 2.

    Steg 4: Testa widgeten

    1. Publicera sidan.

    2. Gå in på sidan som vanlig besökare.

    3. Klicka på “Boka tid”-knappen.

    4. Ett pop-up-fönster ska nu öppnas med bokningsflödet.

    Om inget händer:

    • Kontrollera att Head code ligger i <head>.

    • Kontrollera att scriptet (<script id="widget-modal-script" ...>) verkligen finns med i <body>.

    • Kontrollera att data-widget-id är samma på alla ställen.

     

    Appointments-landing-page-plastikkirurgi

     

    3. Iframe-widget (platt på sidan)

    Iframe-widgeten är perfekt om du vill ha bokningen direkt inbyggd på en sida, t.ex. “Boka tid”-sidan, utan pop-up.

    iframe-koden brukar se ut ungefär så här (exempel)

     
    <iframe
    src="https://www.varden.se/booking-widget?widgetId=w180&defaultClinicId=260&origin=https%3A%2F%2Fwww.dindomän.se"
    style="width: 100%; min-height: 700px; border: 0;"
    loading="lazy"
    ></iframe>
     

    Så här använder du iframe-koden

    1. Kopiera den iframe-kod ni fått från oss (den kommer att ha andra widgetId-värden än i exemplet).

    2. Gå till sidan där du vill visa bokningen (t.ex. “Boka tid”).

    3. Lägg in ett HTML-/embed-block (i WordPress t.ex. “Custom HTML”, i Webflow “Embed”, osv.).

    4. Klistra in iframe-koden där.

    5. Spara och publicera sidan.

    Tips för layout och design

    • Full bredd:
      style="width: 100%;" gör att widgeten följer sidans bredd.

    • Höjd:
      Justera min-height (t.ex. 600px, 800px) så att hela bokningsflödet får plats utan för mycket scroll inuti iframen.

    • Ingen ram:
      border: 0; tar bort iframe-kant så att den ser mer “inbyggd” ut.

    Appointments-landing-page-trio

     

    4. Vanliga CMS – hur gör jag där?

    WordPress (exempel)

    • Head code:
      – Använd t.ex. ett plugin för “Header & Footer Scripts” eller lägg in i tema-inställningarna under “Custom code / Scripts in header”.

    • Body code & knapp / iframe:
      – Öppna sidan i blockredigeraren.
      – Lägg till ett block: “Custom HTML”.
      – Klistra in din body-kod (för modal) eller iframe-kod (för platt widget).

    Webflow / andra byggare

    • Leta efter något som heter Custom Code, Embed, Header eller Footer.

    • Head code → in i projektets/site head.

    • Body code / iframe → via embed-element på den sida du vill ha widgeten.

     

    5. Felsökning

    Om något inte fungerar:

    • Kontrollera att alla delar är med:

      • Head code

      • Body code

      • Script

      • Knapp (för modal)

      • Rätt iframe-kod (för platt widget)

    • Kontrollera att data-widget-id är samma överallt för pop-up-lösningen.

    • Kontrollera att koden inte “rensats bort” av redigeraren (vissa enklare CMS kan ibland ta bort script-taggar).

     

     



    Support

    Om du fastnar, är osäker på var koden ska läggas eller om widgeten inte fungerar som den ska – tveka inte att kontakta oss.

    Vi hjälper gärna till med felsökning och tips.
    Maila oss på support@varden.se eller skicka in ett supportärende så återkommer vi så snabbt vi kan.

    Starta supportärende