Bädda in bokningsformuläret på en hemsida¶

Ni kan visa bokningsformuläret direkt på föreningens egen hemsida. Besökarna kan då skicka en bokningsförfrågan utan att lämna hemsidan. Förfrågningarna hamnar under Förfrågningar i Lokalbokningar.se, precis som när de skickas från den offentliga bokningssidan.

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¶

• Både den offentliga bokningskalendern och bokningsformuläret måste vara aktiverade, se Börja använda den offentliga bokningskalendern och Börja använda bokningsformuläret. Oftast är de redan det.
• Formuläret visar inte vilka tider som är lediga. Bädda gärna in bokningskalendern på samma sida, till exempel ovanför formuläret, så att besökarna kan se vad som är ledigt innan de skickar en förfrågan.
• De fält och inställningar som ni har valt för formuläret gäller även på hemsidan, se Anpassa bokningsformuläret.

Kopiera koden¶

1. Gå till Inställningar > Kalender och välj kalendern.
2. Klicka på fliken Publikt formulär.
3. Klicka på Bädda in på hemsida. Dialogen "Bädda in bokningsformuläret" ö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-form-1"></div>
<script>
  Lokalbok.form('booking-form-1', {
    calendar: 'stora-salen'
  });
</script>

Klistra in koden på hemsidan¶

1. Öppna sidan på er hemsida där formuläret 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 formuläret syns.

Formuläret anpassar automatiskt sin höjd efter innehållet, även när ni lägger till eller tar bort fält.

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="80%" height="1400px" src="https://lokalbokningar.se/boka/stora-salen/form/" title="Bokningsformulär" frameborder="0"></iframe>

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

En iframe anpassar inte sin höjd automatiskt. Om formuläret blir avklippt eller får en rullningslist, öka värdet för height. Om det blir mycket tomt utrymme under formuläret kan ni minska det. Värdet width styr bredden. Formuläret fungerar bäst om det är minst 800 pixlar brett.

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 formuläret, så att det smälter in på er hemsida. Anges som en färgkod, till exempel '#f5f0e6'.

height

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

Exempel:

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

Om formuläret inte syns¶

"Bokningsformuläret är inte tillgängligt."

Bokningsformuläret eller den offentliga bokningskalendern är inte aktiverad. Kontrollera flikarna Publik kalender och Publikt formulär, se Aktivera bokningsformuläret.

"Bokningsformuläret 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.