Bädda in bokningskalendern på en hemsida¶

Ni kan visa bokningskalendern direkt på föreningens egen hemsida. Besökarna ser då vilka dagar och tider som är lediga utan att behöva gå till Lokalbokningar.se. Kalendern uppdateras automatiskt när ni lägger till eller ändrar bokningar.

Det görs genom att klistra in en kort kodsnutt på hemsidan. Ni behöver inte kunna programmera, men ni behöver kunna redigera hemsidan eller få hjälp av någon som kan.

Innan ni börjar¶

• Den offentliga bokningskalendern måste vara aktiverad, se Börja använda den offentliga bokningskalendern. Oftast är den redan det.
• Den inbäddade kalendern visar bara lediga och upptagna tider. Den har ingen knapp för att skicka en bokningsförfrågan. Om besökarna ska kunna skicka förfrågningar från hemsidan kan ni även bädda in bokningsformuläret, till exempel under kalendern.

Kopiera koden¶

1. Gå till Inställningar > Kalender och välj kalendern.
2. Klicka på fliken Publik kalender.
3. Klicka på Bädda in på hemsidan. Dialogen "Bädda in kalendern" öppnas.
4. Klicka på Kopiera kod vid "Rekommenderad metod (SDK)".

Koden ser ut ungefär så här. Kopiera alltid koden från dialogen, eftersom den innehåller just er kalenders adress:

<script src="https://lokalbokningar.se/static/public/embed.js"></script>
<div id="booking-calendar-1"></div>
<script>
  Lokalbok.calendar('booking-calendar-1', {
    calendar: 'stora-salen'
  });
</script>

Klistra in koden på hemsidan¶

1. Öppna sidan på er hemsida där kalendern ska visas, i redigeringsläge.
2. Lägg till ett block eller element för egen HTML-kod. Det brukar heta något i stil med "Anpassad HTML", "HTML", "Kod" eller "Bädda in". I WordPress heter blocket Anpassad HTML.
3. Klistra in koden i blocket.
4. Spara eller publicera sidan.
5. Öppna sidan i webbläsaren och kontrollera att kalendern syns.

Kalendern anpassar automatiskt sin höjd efter innehållet och tar upp hela bredden där den placeras.

Om hemsidan inte tillåter skript: använd iframe¶

Vissa hemsidesverktyg tillåter inte <script>-taggar, till exempel på gratisnivåer. Då kan ni använda en så kallad iframe i stället. Klicka på Visa alternativ metod (iframe) längst ned i dialogen och sedan på Kopiera kod.

<iframe width="100%" height="600px" src="https://lokalbokningar.se/boka/stora-salen/calendar" title="Bokningskalender" frameborder="0"></iframe>

Klistra in koden på samma sätt som beskrivs ovan.

En iframe anpassar inte sin höjd automatiskt. Om kalendern blir avklippt eller får en rullningslist, öka värdet för height, till exempel till 700px. Värdet width styr bredden.

Anpassa utseendet (SDK)¶

Med SDK-koden kan ni lägga till inställningar inom klammerparentesen, efter calendar. Glöm inte kommatecknet efter raden före.

backgroundColor

Bakgrundsfärg bakom kalendern, så att den smälter in på er hemsida. Anges som en färgkod, till exempel '#f5f0e6'.

height

En fast höjd, till exempel '600px'. Utan den här inställningen anpassas höjden automatiskt, vilket oftast är bäst.

Exempel:

<script>
  Lokalbok.calendar('booking-calendar-1', {
    calendar: 'stora-salen',
    backgroundColor: '#f5f0e6'
  });
</script>

Om kalendern inte syns¶

"Bokningskalendern är inte tillgänglig."

Den offentliga bokningskalendern är inte aktiverad. Aktivera den under fliken Publik kalender, se Aktivera den offentliga bokningskalendern.

"Bokningskalendern kunde inte hittas."

Adressen i koden stämmer inte. Det händer om kalenderns webbadress har ändrats efter att koden klistrades in, se Ändra webbadress för offentliga bokningssidan. Kopiera koden på nytt och ersätt den gamla.

Koden syns som text på sidan

Koden har klistrats in i ett vanligt textblock. Flytta den till ett block för HTML-kod.

Ingenting syns alls

Kontrollera att hela koden kom med, från den första <script> till den sista </script>. Om hemsidan inte tillåter skript, använd iframe-koden i stället.