# Så lägger du till en bokningsknapp på din hemsida: WordPress, Wix, Squarespace och Shopify Publicerad 2026-10-14 av TicketPa-teamet. Källa: https://ticketpa.com/sv/blog/bokningsknapp-pa-hemsidan För att lägga till en bokningsknapp på din hemsida kopierar du länken till din bokningssida från ditt bokningssystem och kopplar den till en knapp på sidan, eller klistrar in knappkoden som bokningssystemet ger dig i ett HTML- eller kodblock. Båda sätten tar några minuter och kräver ingen utvecklare. Nedan finns stegen för WordPress, Wix, Squarespace, Shopify och alla andra webbplatser. Den här guiden går igenom båda sätten, var du ska placera knappen så att gästerna faktiskt använder den och hur du testar den. Exemplen använder TicketPa, men stegen fungerar på samma sätt med de flesta bokningssystem. ## Två sätt att lägga till en bokningsknapp | Sätt | Så fungerar det | Passar bäst för | | ------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------- | | Länka en knapp som du redan har | Använd webbplatsverktygets egen knapp och låt den länka till din bokningssida | Alla verktyg för att bygga webbplatser, även de som begränsar egen kod | | Klistra in en kodsnutt | Klistra in knappkoden från ditt bokningssystem i ett HTML-block | Webbplatser som tillåter egen HTML, när du vill ha den färdiga knappen | Att länka en knapp är enklast och fungerar överallt. Kodsnutten ger dig en färdigdesignad knapp, och med vissa bokningssystem kan den öppna bokningssidan i ett fönster bredvid din webbplats. ## Steg 1: Hämta din bokningslänk eller knappkod Alla bokningssystem ger dig en länk till din bokningssida, och många ger också en länk för varje aktivitet och en kodsnutt för en knapp. I TicketPa öppnar du sidan **Share** (dela). Där finns: - **Din bokningssida:** en länk till alla aktiviteter som gästerna kan boka. Använd den i huvudmenyn och på startsidan. - **En aktivitet:** en länk direkt till en aktivitets kalender. Använd den på aktivitetens sida och i inlägg eller annonser om den. - **Boka nu-knapp:** kod att klistra in på din webbplats, i din bokningssidas accentfärg. Den finns i två versioner: - en **enkel knapp**, som fungerar överallt, även i mejl - en **knapp som öppnar bokningen i ett fönster** bredvid din webbplats på en dator Kopiera länken eller koden som du behöver. ## Steg 2: Lägg in den på din webbplats ### WordPress **Länka en knapp:** lägg till ett **Knappar**-block i blockredigeraren där du vill ha knappen, skriv ”Boka nu” och klistra in din bokningslänk i knappens länkfält. **Klistra in kodsnutten:** lägg till ett block för **Anpassad HTML** där du vill ha knappen och klistra in koden. Förhandsgranska sidan för att se knappen. Om ditt tema har en meny i sidhuvudet, lägg till din bokningslänk som ett menyalternativ också, under Utseende och Menyer eller i webbplatsredigerarens navigeringsblock. ### Wix **Länka en knapp:** lägg till en **Knapp** från panelen för att lägga till element, ändra texten till ”Boka nu”, öppna sedan länkinställningarna och välj en webbadress. Klistra in din bokningslänk. Wix lägger egen kod i en ram, och det kan hindra en knapp från att öppna ett nytt fönster. På Wix är det därför säkrare att länka en knapp. ### Squarespace **Länka en knapp:** redigera sidan, lägg till ett knappblock, skriv ”Boka nu” och klistra in din bokningslänk som länk. **Klistra in kodsnutten:** lägg till ett kodblock och klistra in koden. Kodblock som kör skript finns bara i vissa av Squarespaces abonnemang, så om kodsnutten inte fungerar i ditt, länka en knapp i stället. ### Shopify **Länka en knapp:** lägg till eller redigera en sektion med en knapp i temaredigeraren, till exempel en bildbanner, och klistra in din bokningslänk som knappens länk. För att lägga till den i menyn går du till Webbshop och Navigering, öppnar huvudmenyn och lägger till ett menyalternativ med din bokningslänk. **Klistra in kodsnutten:** lägg till en sektion med **Custom Liquid** (egen Liquid-kod) i temaredigeraren och klistra in koden. ### Alla andra webbplatser På en egenbyggd webbplats, eller i verktyg som Webflow, Framer eller Carrd, klistrar du in kodsnutten i sidans HTML, eller i verktygets element för inbäddning eller HTML, där knappen ska synas. Om du inte kan lägga in kod, använd valfri länk eller knapp och låt den peka på din bokningslänk. ## Var du ska placera din bokningsknapp En bokningsknapp fungerar bara om gästerna ser den när de är redo att boka: - **Högst upp på varje aktivitetssida,** bredvid priset, så att gästerna inte behöver skrolla. - **I huvudmenyn,** som sista alternativ och utformad som en knapp. - **Längst ner på varje aktivitetssida,** efter beskrivningen och bilderna. - **På startsidan,** nära den första rubriken. - **På kontaktsidan,** för gäster som var på väg att skicka ett meddelande och fråga om lediga platser. Använd ”Boka nu” eller ”Se lediga tider” som knapptext. Gästerna vet vad båda betyder, och båda börjar med det de vill göra. ## Länka varje aktivitet till sin egen kalender Om din webbplats har en sida per aktivitet, länka varje sidas knapp till den aktiviteten och inte till din allmänna bokningssida. Gästerna hamnar i rätt kalender och slipper ett steg, så färre ger upp innan de bokar. I TicketPa listar sidan Share en länk för varje aktivitet. Använd länken till din allmänna bokningssida bara på ställen som gäller allt, som menyn och startsidan. ## Testa din bokningsknapp Innan du berättar för någon, testa den som en gäst skulle göra: 1. **Öppna din webbplats i mobilen** och tryck på knappen. 2. **Kontrollera att den leder till rätt sida,** med rätt aktivitet och lediga tider. 3. **Gör en testbokning,** eller gå så långt som till betalningssteget. 4. **Gör om det på en dator.** Om din knapp öppnar bokningen i ett fönster, kontrollera att fönstret öppnas och att bokningssidan ändå öppnas om webbläsaren blockerar fönster. ## Använd samma länk överallt annars Din bokningslänk fungerar överallt där en gäst kan trycka på en länk, inte bara på din webbplats. Lägg till den i din Google-företagsprofil, i Instagram-bion och i dina svar på WhatsApp. Vår guide om att [ta emot bokningar via Instagram, Google och WhatsApp](https://ticketpa.com/sv/blog/bokningslank-instagram-whatsapp) visar var den ska ligga på varje ställe. ## Så fungerar knappen i TicketPa Knappen i TicketPa är en länk med ett litet skript. På en dator öppnar den din bokningssida i ett fönster bredvid din webbplats, så att gästerna har kvar din webbplats bakom. I mobilen, eller om webbläsaren blockerar fönstret, öppnar den din bokningssida som en vanlig länk. Skriptet spårar inte dina besökare, och knappen använder din bokningssidas accentfärg. TicketPa är ett bokningssystem för turer, kurser och aktiviteter, med en bokningssida som fungerar även utan webbplats. Se [alla funktioner](https://ticketpa.com/sv/funktioner), eller sidan för din typ av aktivitet, till exempel [turer](https://ticketpa.com/sv/bokningssystem-guidade-turer) eller [workshops](https://ticketpa.com/sv/bokningssystem-workshops). ## Vanliga frågor ### Behöver jag en utvecklare för att lägga till en bokningsknapp? Nej. I nästan alla verktyg för att bygga webbplatser kan du lägga till en knapp och låta den länka till din bokningssida på några minuter. Att klistra in en kodsnutt för en knapp tar ungefär lika lång tid om verktyget har ett HTML- eller kodblock. Du behöver bara en utvecklare för en helt egen design. ### Kan bokningssidan öppnas inne på min webbplats? Det beror på bokningssystemet. Vissa visar bokningssidan inne på din webbplats i en ram, och andra öppnar den som en separat sida eller ett separat fönster. TicketPa öppnar bokningen i ett fönster bredvid din webbplats på en dator, och som en vanlig sida i mobilen, så att kassan fungerar pålitligt i alla webbläsare. ### Gör en bokningsknapp min webbplats långsammare? En länkad knapp påverkar inte hur snabbt sidan laddas, eftersom den bara är en länk. En kodsnutt med ett skript lägger till en liten fil, och en välbyggd sådan laddas efter resten av sidan, så besökarna märker inget. Skriptet i TicketPa laddas på det sättet och spårar inte dina besökare. ### Kan jag använda min egen knappdesign? Ja. Använd valfri knapp eller länk från ditt webbplatsverktyg, utformad som du vill, och låt den länka till din bokningssida eller till en aktivitets länk. Den färdiga kodsnutten finns för att det är bekvämt, inte för att du behöver den. ### Kan jag lägga till en bokningsknapp i mina mejl? Ja. Klistra in din bokningslänk i en knapp i ditt e-postverktyg, eller använd en enkel knappsnutt om verktyget tar emot HTML. Skript körs inte i mejl, så använd den enkla knappen, som är en formaterad länk. Därför fungerar den enkla knappen i TicketPa i mejl.