Bokningswidget

Hur fungerar bokningswidgeten?

Kunder bokar sina tider genom bokningswidgeten. Alla BokaMeras bokningslösningar använder sig av denna widget med olika slags konfigureringar.

Denna manual beskriver hur man anpassar och integrerar bokningswidgeten på egen sida om man använder en integrerad bokningslösning. Kunder slipper på så sätt navigera till extern sida för att boka sina tider.

Man kan endast integrera bokningswidgeten i våra licenser Start, Smart, Pro och Enterprise.

Widgeten går att integrera i princip var som helst. Testa göra en bokning nedan :)

Konfigurera bokningswidgeten

Navigera till fliken Min webbplats > Integrera på hemsidan för att öppna integreringskonfiguratorn. Under fliken Konfigurering visas en förhandsgranskning på bokningswidgeten.

Ändra inställningarna i menyn till vänster för att anpassa bokningswidgeten till dina önskemål. Se rubriker nedan för att läsa vad varje inställning gör.

Se även Bokningslayout, flöde & konfigurering för mer detaljer om majoriteten av nedan inställningar.

• Tidsvisning - list / vecko / månads / kvartalsvy. (Flexible utförandetid fungerar inte med alla alternativen)
• Visa nästa lediga tid - visar nästa lediga tid för kund genom en knapp.
• Tillåtna bokningssätt - Bestämmer om inloggnings, kontakt eller registreringsformulär ska visas för kund eller ej.
• Bokningsflöde - Flödet i hur kund väljer tjänst, tid och resurs. (Flexible utförandetid fungerar inte med alla alternativen)
• Listningslayout - Utseende på tjänsterna. (Flexible utförandetid fungerar inte med alla alternativen)
• Göm tjänstbild - Döljer tjänsternas bilder.
• Visa sluttid för tidsslot - Visar sluttid för varje ledig tid.
• Text på bokad tidsslot - Den text som står på fullbokade tider.
• Språk - Visningsspråk för integrationen
• Tjänster att visa - Välj vilka tjänster som visas i widgeten.
• Förvald tjänst - Visar lediga tider direkt i kalendern för specifik tjänst.
• Färgkod - Widgetens färgtema
• Visa sammanfattning av företag - Visar en sammanfattning av företaget ovanför bokningslösningen.
• Mörkt tema - Tema som passar för mörkare webbsidor.
• Betalningsbekräftelse url - Den sida kunden skickas till efter lyckad betalning - Ej obligatorisk
• URL där widgeten är inbäddad - Den webbadress som integreringen kommer synas på. - Obligatorisk
• Egna översättningar - Anpassa widgetens textinnehåll till din önskan. (t.ex. Boka -> Reservera)
• Top offset - Förskjuter autoscrollningen mer uppåt eller nedåt på sidan.
• Förhindra autoscroll - Förhindrar att widgeten skrollar ner eller upp kunder på sidan automatiskt.

TIPS! Om ni inte är klara med redigeringen och vill fortsätta vid ett senare tillfälle så spara URL-adressen för den flik som ni är inne på konfiguratorn någonstans på datorn. När ni sedan stänger ner fliken så återställs allt när ni kommer in på konfiguratorn på nytt. För att få tillbaka det du höll på att redigera så klistra in den sparade URL-adressen i fältet så kommer alltihop tillbaka.

Integrera bokningswidget

Gå till Inställningar > Företagsinställningar > Företagsinformation i Admin så finns det ett fält för Hemsida . Där ska självaste URL-adressen till hemsidan läggas in, alltså startsidan på er hemsida läggas in.

Om ni går till er hemsidas startsida så kopierar ni URL-adressen som visas på ett exempel nedan;

Adressen för URL läggs in på Inställningar>Företagsinställningar > Företagsinformation enligt bilden nedan;

Klicka er in på Min webbplats och Integrera på hemsidan

Gör inställningarna som ni vill ska gälla för widgeten. Det viktiga här är att det läggs in samma URL som gjordes inne på Inställningar - Företagsinställningargenom att lägga in URL-adressen för hemsidan. Denna adress kommer läggas in i widgetens script.

Slutligen ska ni navigera till fliken Bokning widget instruktioner efter bokningswidgeten är konfigurerad, för att visa integreringsmetoder för bokningswidgeten.

Metod 1 - Infällning

Infällning med hjälp av Javascript anpassar integrationens höjd automatiskt (till skillnad från iFrame-lösningen). Utseendet går även att förändra med hjälp av CSS.

Placera följande <div> tagg i bodyn, där integreringen ska visas på sidan.

<div id="bokamera-embedded"></div>

Följande script innehåller de inställningar som du konfigurerat för bokningswidgeten. Placera detta script i <head> taggen om du planerar att ha endast en bokningswidget på hela din webbsida. Placera annars scriptet längst ner i <body> taggen om du planerar att ha flera olika bokningswidgetar.

Koden nedan är endast ett exempel, kopiera därför ditt script från konfiguratorn.

<script type="text/javascript">
    window.BOKAMERA = {
        "configuration": {
            "bookMethods": ["contact-information"],
            "bookLayout": "service-based",
            "timesLayout": "month",
            "listingLayout": "rows",
            "language": "sv",
            "topOffset": 0,
            "preventAutoscroll": true,
            "company": "00000000-0000-0000-0000-000000000017",
            "showNextAvailableTime": true,
            "hideServiceImage": false,
            "showEndTimeOnTimeslots": true,
            "darkTheme": false,
            "translations": [],
            "configuration": "showNextAvailableTime"
        }
    }
</script>

Placera följande script längst ner i bodyn på sidan.

<script src="https://embed.bookmore.com/v2/embed.js"></script>

Förhandsgranskning av bokningsbara tider

Om du vill visa en widget med de bokningsbara tiderna, men att kunden inte ska kunna klicka på en tidsslot och komma vidare till sista steget så kan ett särskilt script läggas in. Se exempel nedan:

Metod 2 - Direktlänk

Direktlänk till en extern sida som endast visar den konfigurerade bokningswidgeten.

Följ stegen som i Metod 1 att du lägger in URL innan länken klistras in på din hemsida.

Länka endast en specifik tjänst

I denna användarmanual kommer vi gå igenom hur man länkar till en Specifik tjänst på din integrerade hemsida.

För att länka till en specifik tjänst går man in under Hemsida - Integrera på hemsida.

När du sedan är inne i Konfigurering väljer man Lista i tidsvisning samt skriva in tjänsten man önskas ska visas i Förvald tjänst.

När du sedan har sparat dina nya ändringar följer du instruktionerna på andra fliken 

Bokning widget instruktioner och klistrar in scriptet på din hemsida där du önskar ha bokningssystemet. 

Neka cookies om du använder dig av en bokningswidget

Om du kör en implementerad bokningswidget på din egna hemsida och du vill att widgeten ska fungera även om kunden nekar cookies på sidan är det här guiden du ska följa!

1. Du behöver kontrollera med din webbplatsleverantör vilken typ av cookiehanterare som används. Ett exempel på hur man ser vilken typ av hanterare det är visas här https://bokamera.se (Vi använder OneTrust)

2. När du har fått reda på vilken cookie-leverantör som används, kan du till exempel söka på följande i Google:
How to exclude website from cookie block onetrust

3. Nu kommer du få flera val och välj det alternativ som passar bäst.

4. Här på hela sidan kan du hitta den information du behöver för att blockera cookies på din webbplats/hemsida

5. När du är på sidan hittar du en del av manuset. Det här är den del du behöver infoga överst i BokaMera-skriptet från konfiguratorn:

Support

Kontakta Supporten om ni behöver mer hjälp eller söker svar på ytterligare frågor.

Mvh, BokaMera Support
[e-mail]