Hjälpcenter

Guider & hjälp — fjellride.se

Tillbaka till Integrationer & API

Inbäddningsbara bokningswidgetar

Lägg en Boka nu-knapp på din egen webbplats så att kunderna kan boka och betala utan att lämna din sida — ingen kod krävs.

Vad bokningswidgetar är

En bokningswidget är en liten Boka nu-knapp som du bäddar in på din egen webbplats — WordPress, Squarespace, Wix, Webflow eller en handbyggd HTML-sida. När en besökare klickar på den öppnas din tillgänglighet och kassa i ett fönster ovanpå din sida. Kunden väljer datum och betalar utan att någonsin omdirigeras bort, och bokningen landar i Fjellride direkt.

Widgetar är det kodfria alternativet till Fjellride API. Kan du klistra in en rad HTML kan du ta emot bokningar från vilken sajt som helst.

Hur det fungerar

  1. Du skapar en widget under Inställningar → Widgetar och väljer vad den ska boka.
  2. Fjellride genererar en kodsnutt — en <div> plus en <script>-tagg.
  3. Du klistrar in kodsnutten på din webbplats där du vill att knappen ska visas.
  4. Besökarna klickar på knappen, bokar och betalar i ett fönster. Betalningen går genom samma säkra Stripe-kassa som din webbutik.

Skapa en widget

Widgetar-sidan i Inställningar
Widgetar-sidan i Inställningar
  1. Gå till Inställningar → Widgetar
  2. Klicka på Skapa widget
  3. Under Vad som ska bäddas in konfigurerar du knappen:
    • Typ — välj Knapp. (Kalender- och produktrutnätswidgetar kommer snart.)
    • Produkt — välj en enskild produkt, eller välj Hela katalogen så att kunden kan bläddra bland allt du erbjuder.
    • Knapptext — texten som visas på knappen, t.ex. "Boka nu" eller "Hyr en cykel". En live-förhandsvisning uppdateras medan du skriver.
  4. Under Var den ska användas berättar du för Fjellride om sajten:
    • Namn — en etikett för din egen referens, t.ex. "Huvudwebbplats" eller "Landningssida för cykeluthyrning".
    • Webbplatsens ursprung — domänen/domänerna där widgeten får köras, t.ex. https://www.dinbutik.se. Detta är widgetens säkerhetsgräns (se Säkerhet nedan).
  5. Klicka på Skapa. Fjellride visar ett bekräftelsesteg med din inbäddningskod, redo att kopieras.
Den guidade dialogen för att skapa en widget, med typ, produkt, etikett och förhandsvisning
Den guidade dialogen för att skapa en widget, med typ, produkt, etikett och förhandsvisning

Lägga till kodsnutten på din sajt

Kopiera den genererade kodsnutten och klistra in den i din webbplats HTML där du vill att knappen ska visas. Den ser ut så här:

html
<div
  data-fjellride-widget="button"
  data-org="din-org"
  data-key="fjw_pk_live_xxxxxxxxxxxxxxxx"
  data-product-id="prod_xxxxxxxx"
  data-label="Boka nu"
></div>
<script async src="https://embed.fjellride.se/embed/v1/embed.js"></script>
  • <div> är platshållaren där knappen renderas.
  • <script> laddar Fjellrides laddare. Du behöver bara en script-tagg per sida, även om du har flera knappar.
  • data-product-id utelämnas när widgeten bokar hela din katalog.

Anmärkningar per plattform

  • WordPress — lägg till kodsnutten med ett Anpassad HTML-block (blockredigeraren) eller i en "Anpassad HTML"-widget. Undvik den visuella redigeraren, som kan ta bort <script>-taggar.
  • Squarespace — använd ett Kod-block, eller Inställningar → Avancerat → Kodinjektion för placering på hela sajten.
  • Wix — använd widgeten Bädda in HTML / Anpassat element.
  • Webflow — använd ett Embed-element.
  • Vanlig HTML — klistra in den var som helst i sidans <body>.

Boka hela katalogen kontra en enskild produkt

  • Välj en enskild produkt när knappen ska boka ett specifikt objekt (t.ex. en "Boka denna elcykel"-knapp på den produktens sida).
  • Välj Hela katalogen när knappen ska låta kunderna bläddra och välja bland allt (t.ex. en allmän "Boka nu"-knapp i sidhuvudet).

Du kan skapa hur många widgetar du vill och placera olika knappar på olika sidor — de kan alla dela samma widgetnyckel.

Öppna inbäddningskoden igen

Behöver du kodsnutten igen, eller vill du ha en knapp för en annan produkt med samma nyckel?

  1. Gå till Inställningar → Widgetar
  2. Öppna ⋯-menyn på widgeten
  3. Välj Hämta inbäddningskod

Därifrån kan du kopiera nyckeln eller generera en ny kodsnutt — inklusive att rikta den mot en annan produkt — utan att skapa en ny widget.

Säkerhet: så förblir widgetnycklar säkra

Widgetnycklar börjar med fjw_pk_live_ (eller fjw_pk_test_ för test). pk står för publishable (publicerbar) — precis som en publicerbar Stripe-nyckel är den avsedd att synas i din sidas källkod. Det är normalt och säkert.

Det som hindrar att en widgetnyckel missbrukas är listan över webbplatsens ursprung som du anger när du skapar den. Fjellride accepterar bara widgetförfrågningar som kommer från en domän du har angett. Om någon kopierar din nyckel till en annan sajt fungerar den inte.

Betalningar

Widgetbokningar betalas genom samma Stripe-drivna kassa som din Fjellride-webbutik, så depositioner, slutbetalningar, återbetalningar och utbetalningar fungerar precis likadant. Du måste ha Stripe anslutet innan kunderna kan betala via en widget.

När kunden når betalningen tar den säkra Stripe-sidan över webbläsarfliken för att slutföra transaktionen och återför dem sedan till bokningsbekräftelsen.

Felsökning

  • Knappen visas inte. Kontrollera att både <div> och <script>-taggen klistrades in, och att din sajtbyggare inte tog bort <script>. Använd ett block för rå HTML / kodinbäddning i stället för den visuella redigeraren.
  • Inget händer vid klick / ett konsolfel om ursprung. Sidans domän finns inte i widgetens webbplatsens ursprung. Lägg till den under Inställningar → Widgetar.
  • "Boka nu" öppnas men inga produkter visas. Kontrollera att widgeten pekar på en publicerad produkt, eller växla den till Hela katalogen.
  • Kunderna kan inte betala. Se till att Stripe är anslutet för din organisation.