Bokningswidgeten

Bastus bokningswidget ar en inbaddningsbar JavaScript-komponent som gor det mojligt for besokare pa din befintliga hemsida att boka tider direkt — utan att behova lamna sidan eller ga till en separat bokningssajt.

Widgeten laddar asynkront (i bakgrunden) och paverkar inte din hemsidas laddningshastighet.

Sa fungerar widgeten

Nar widgeten laddas pa sidan visar den dina tillgangliga resurser, ett datumvaljare, tillgangliga tider och ett betalningsformular — allt inbaddat som en snygg komponent pa din befintliga sida.

Alla betalningar hanteras av Stripe direkt i widgeten. Kunden lamnar aldrig din sida.

Installera widgeten

Steg 1: Hamta din kodsnuts

1. Logga in pa Bastu-adminpanelen.
2. Ga till Installningar → Widget.
3. Under “Bokningswidget”, klicka pa “Kopiera kod”.

Koden ser ut ungefar sa har:

<script
  src="https://cdn.bastu.io/widget.js"
  defer
  data-dopp-key="pk_live_din_nyckel_har"
></script>
<div
  id="dopp-booking-widget"
  data-slug="din-forenings-slug"
></div>

Steg 2: Klistra in pa din hemsida

WordPress (Gutenberg):

1. Ga till den sida dar du vill visa widgeten.
2. Klicka pa ”+“-ikonen for att lagga till ett block.
3. Soka efter “Anpassad HTML” och lagg till blocket.
4. Klistra in koden i HTML-blocket.
5. Uppdatera sidan.

WordPress (Classic Editor):

1. Ga till sidan i redigerarern.
2. Klicka pa “Text”-fliken (ikke “Visuell”) for att se HTML-koden.
3. Klistra in koden dar du vill att widgeten ska visas.
4. Spara sidan.

Squarespace:

1. Oppna sidan i redigerarern.
2. Klicka pa ”+” for att lagga till ett block.
3. Valj “Kod”.
4. Klistra in koden i kodblocket.
5. Spara.

Webflow:

1. Ga till sidan i Webflow Designer.
2. Lagg till ett “Embed”-element (HTML Embed).
3. Klistra in koden.
4. Publicera sidan.

Ren HTML: Klistra in koden precis fore </body>-taggen pa den sida dar du vill visa widgeten.

Anpassa widgeten

Du kan anpassa widgetens utseende och funktion via HTML-attribut pa div-elementet.

Tillgangliga attribut

Attribut	Beskrivning	Standardvarde
data-slug	Din forenings unika slug (kravs)	—
data-lang	Sprak: sv eller en	sv
data-resource	Forval specifik resurs via slug	Alla resurser visas
data-primary-color	Primärfärg som hexkod	Din varumarkeskonfiguration
data-theme	light eller dark	light
data-border-radius	Kantradier i px, t.ex. 8	12
data-hide-header	Gom widgetens huvud/titel: true	false
data-max-width	Max bredd i px, t.ex. 600	Ingen begransning

Exempel

Visa bara bastun med morkt tema och anpassad farg:

<div
  id="dopp-booking-widget"
  data-slug="uma-kallbad"
  data-resource="bastun"
  data-theme="dark"
  data-primary-color="#0891B2"
  data-lang="sv"
></div>

JavaScript API

For avancerade integrationer kan du interagera med widgeten via JavaScript:

// Lyssna pa bokningshändelser
document.addEventListener('dopp:booking_confirmed', (event) => {
  console.log('Bokning bekraftad:', event.detail.bookingReference);
  // T.ex. skicka till Google Analytics
  gtag('event', 'booking_confirmed');
});

// Oppna widgeten programmatiskt
document.dispatchEvent(new CustomEvent('dopp:open', {
  detail: { resource: 'bastun' }
}));

Tillgangliga events

Event	Nar utloses det
dopp:loaded	Nar widgeten laddats klart
dopp:booking_started	Nar en anvandare borjar bokningsprocessen
dopp:booking_confirmed	Nar en bokning bekraftas
dopp:booking_cancelled	Nar en bokning avbokas via widgeten
dopp:error	Vid fel i widgeten

Prestanda

Widgeten laddas asynkront och paverkar inte din sidas Core Web Vitals. Storleken pa widgetens JS-paket ar under 50 KB (gzippad).

Felsokningsguide

Widgeten visas inte:

• Kontrollera att du har ratt data-slug — stavningsmisstag ar den vanligaste orsaken.
• Oppna webblasarens konsol (F12) och se om det finns felmeddelanden.
• Kontrollera att inga Content Security Policy-begransningar blockerar cdn.bastu.io.

Widgeten visar inga tider:

• Kontrollera att resursen har aktiva schemalagningsregler.
• Kontrollera att resursen har minst ett aktivt erbjudande.
• Kontrollera att det inte finns en stangningstid for det valda datumet.

Betalning fungerar inte:

• Kontrollera att Stripe ar korrekt anslutet under Betalningar → Stripe Connect.
• Anvand Stripes testkort om du ar i testlage.

Las om widget-alternativ →