To add a booking button to your website, copy the link to your booking page from your booking software and attach it to a button on your site, or paste the button code your booking software gives you into an HTML or code block. Either way it takes a few minutes and no developer. Below are the steps for WordPress, Wix, Squarespace, Shopify and any other site.
This guide covers both methods, where to put the button so guests actually use it, and how to test it. The examples use TicketPa, but the steps work the same way with most booking software.
Two ways to add a booking button
| Method | How it works | Best for |
|---|---|---|
| Link a button you already have | Use your website builder's own button and set its link to your booking page | Any website builder, including those that limit custom code |
| Paste a code snippet | Paste the button code from your booking software into an HTML block | Sites that allow custom HTML, when you want the ready-made button |
Linking a button is the simplest and works everywhere. The snippet gives you a ready-styled button, and with some booking software it can open the booking page in a window next to your site.
Step 1: Get your booking link or button code
Every booking system gives you a link to your booking page, and many also give you a link for each activity and a button snippet. In TicketPa, open the Share page. It has:
- Your booking page: one link to every activity guests can book. Use it in your main navigation and on your homepage.
- One activity: a link straight to one activity's calendar. Use it on that activity's page and in posts or adverts about it.
- Book now button: code to paste into your website, in your booking page's accent colour. There are two versions:
- a plain button, which works everywhere, even in emails
- a button that opens booking in a window next to your site on a computer
Copy the link or the code you need.
Step 2: Add it to your website
WordPress
To link a button: in the block editor, add a Buttons block where you want the button, type "Book now", and paste your booking link into the button's link field.
To paste the snippet: add a Custom HTML block where you want the button and paste the code. Preview the page to see the button.
If your theme has a header menu, add your booking link as a menu item too, under Appearance, Menus or in the site editor's navigation block.
Wix
To link a button: add a Button from the Add Elements panel, change its text to "Book now", then open its link settings and choose a web address. Paste your booking link.
Wix places custom code in a frame, which can stop a button from opening a new window. For Wix, linking a button is the more reliable choice.
Squarespace
To link a button: edit the page, add a Button block, type "Book now" and paste your booking link as its link.
To paste the snippet: add a Code block and paste the code. Code blocks that run scripts are only available on some Squarespace plans, so if the snippet doesn't work on yours, link a button instead.
Shopify
To link a button: in your theme editor, add or edit a section that has a button, such as an image banner, and paste your booking link as the button link. To add it to your menu, go to Online Store, Navigation, open your main menu and add a menu item with your booking link.
To paste the snippet: add a Custom Liquid section in the theme editor and paste the code.
Any other website
On a hand-built site, or in builders like Webflow, Framer or Carrd, paste the snippet into the HTML of the page, or into the builder's embed or HTML element, where the button should appear. If you can't add code, use any link or button and point it at your booking link.
Where to put your booking button
A booking button only works if guests see it when they are ready to book:
- At the top of every activity page, next to the price, so guests don't have to scroll.
- In your main navigation, as the last item, styled as a button.
- At the end of each activity page, after the description and photos.
- On your homepage, near the first headline.
- On your contact page, for guests who were about to send a message asking for availability.
Use "Book now" or "Check availability" as the button text. Guests know what both mean, and both start with what they want to do.
Link each activity to its own calendar
If your website has a page per activity, link each page's button to that activity, not to your general booking page. Guests land on the right calendar and save a step, which means fewer give up before they book.
In TicketPa, the Share page lists a link for every activity. Use your general booking page link only in places that cover everything, like your navigation and homepage.
Test your booking button
Before you tell anyone, test it like a guest would:
- Open your website on your phone and tap the button.
- Check it lands on the right page, with the right activity and live times.
- Book a test, or go as far as the payment step.
- Repeat on a computer. If your button opens booking in a window, check that it opens, and that the booking page still opens if the browser blocks windows.
Use the same link everywhere else
Your booking link works anywhere a guest can tap a link, not only on your website. Add it to your Google Business Profile, your Instagram bio and your WhatsApp replies. Our guide to taking bookings from Instagram, Google and WhatsApp shows where each one goes.
How the TicketPa button works
TicketPa's button is a link with a small script. On a computer, it opens your booking page in a window next to your site, so guests keep your website open behind it. On a phone, or if the browser blocks the window, it opens your booking page as a normal link. The script doesn't track your visitors, and the button uses your booking page's accent colour.
TicketPa is booking software for tours, classes and activities, with a booking page that works without a website too. See every feature, or the page for your kind of activity, such as tours or workshops.
