PitchDesk

Add your booking form to your website

For campsite owners, and for whoever looks after their website. Start with the link if you can, because it works everywhere and needs no code. The code puts a booking button, or the whole booking form, on a page of your own.

Your own link and code are in your PitchDesk dashboard, under Put it on your website. The examples on this page use a made-up key, so copy yours from there.

The quickest way: a link

Every campsite on PitchDesk has its own booking page. Guests choose their dates and a pitch, then pay on it, and you need no website at all. The address looks like this:

https://pitchdesk.co.uk/book/your-campsite

Paste it anywhere a guest might look for you:

  • A button on your website. Website builders let you choose where a button goes. Add a button called Book now and paste the link as its web address.
  • Facebook. Facebook pages do not take code. Add the link to your Page's details as your website, and share it in a post. If your Page's action button offers a website link, paste it there too.
  • Instagram. Edit profile, then Links, then Add external link. You can have up to five.
  • Google Business Profile. In Google Maps or Search, choose Edit profile, pick the booking or reservation link, then Add link. Google does not offer this to every business, and your profile has to be verified first.
  • Emails and messages. Put it in your email signature, and send it to anybody who rings to ask about dates.

The code

Paste this where the button should appear. Change the two highlighted parts to your own, or copy your code from your dashboard, where they are filled in already.

<a href="https://pitchdesk.co.uk/book/your-campsite"
   data-pitchdesk="pk_your_key"
   data-colour="#1c5d43">Check availability</a>
<script src="https://pitchdesk.co.uk/w.js" async></script>

The first part is an ordinary link to your booking page. The last line loads a small script that turns the link into a button, and on most websites opens the booking form over your page when a guest presses it. If a website builder removes the script, the link is still there and still takes guests to your booking page.

Wix, GoDaddy, Square Online and Google Sites keep pasted code in a box of their own, so there the button opens your booking page instead. Use the whole form on those if you want guests to stay on your page.

The whole form instead of a button

Add data-mode="inline" and the calendar and booking form sit in the page itself, growing and shrinking to fit as the guest goes through it. It suits a page of its own, such as Book or Prices.

<a href="https://pitchdesk.co.uk/book/your-campsite"
   data-pitchdesk="pk_your_key"
   data-mode="inline">Book your stay online</a>
<script src="https://pitchdesk.co.uk/w.js" async></script>

Try the button

This one opens the booking form for a demonstration campsite, the way it would open yours. It is the real thing, so the dates and prices are the demonstration site's own.

Check availability

Payment happens on a secure Stripe page in your business name, and guests come straight back to their confirmation.

Step by step for your website builder

Open the one your website is built with. Each builder decides what its plans allow, and where a plan does not allow code, the link does the same job.

WordPress
  1. Open the page in the editor and press the + button to add a block.
  2. Search for Custom HTML and choose it.
  3. Paste the code into the HTML box.
  4. Press Update or Publish, then look at the page.

Only an Administrator or an Editor can save code, and on a network of sites only a Super Admin can. Some hosts switch it off for everybody. If that has happened, the link in the code still works.

In the older Classic editor, paste it into the Text tab and do not switch back to Visual.

WordPress help: the Custom HTML block

WordPress.com
  1. Edit the page, press + and search for Custom HTML.
  2. Paste the code into the block.
  3. Press Update.

Code only runs on a paid plan with hosting features switched on. On the Free plan WordPress.com takes the code out when you save, so add a Buttons block and paste your booking link into its link instead.

WordPress.com help: the Custom HTML block

Wix
  1. In the editor, click Add Elements, then Embed Code, then Popular Embeds, then Embed HTML. In Wix Studio it is Add Elements, Embed & Social, Embed Code.
  2. Choose Code, paste the code and click Update.
  3. Drag the box to size. For the button, a little bigger than the button. For the whole form, make it tall: the form scrolls inside the box.
  4. Publish the site.

Wix keeps pasted code in a box of its own, so the button there opens your booking page instead of opening over your page, and payment may open in a new tab. To keep guests on your page, use the whole form and make the box tall.

Simpler on Wix: add a Button, click the link icon, choose Web address and paste your booking link.

Wix help: embedding a site or a widget

Squarespace
  1. Edit the page, click Add block and choose Code.
  2. Click the pencil, check the type is set to HTML, and paste the code. Leave Display Source switched off.
  3. Save the page, then check it in a private window. Squarespace does not run code while you are logged in and editing.

Code blocks only run scripts on the Core, Plus and Advanced plans, and on the older Business and Commerce plans. On Basic or Personal, add a Button block and link it to your booking page instead.

Squarespace help: code blocks

GoDaddy
  1. In Websites + Marketing, click Edit Website and add a section.
  2. Search for HTML and add it.
  3. Paste the code into Custom Code. Leave Forced Height blank.
  4. Preview, then Publish.

GoDaddy keeps pasted code in a box of its own, so the button opens your booking page instead of opening over your page, and payment may open in a new tab.

GoDaddy's newer Airo builder works differently and its steps are not published in the same way. If you have Airo, check GoDaddy's help, or add a button that links to your booking page.

GoDaddy help: add HTML to a page

Shopify
  1. Go to Online Store, Themes, then Customize (or Edit theme).
  2. Choose the page template, click Add section and pick Custom Liquid.
  3. Paste the code and click Save.

Not available on the Starter plan. A change to a template shows on every page that uses it.

Do not paste the code into a page's text editor, which removes scripts.

Shopify help: sections and blocks

Square Online
  1. Edit your site, click Add, then Section, and choose Embed code.
  2. Paste the code and publish.

The Embed code section needs the Plus or Premium plan. On the free plan, link a button to your booking page.

Square puts the code in a box of its own that grows to fit, so the whole form works well there. The button takes guests to your booking page instead of opening over your page.

Square help: embedded code

Weebly
  1. Drag an Embed Code element onto the page.
  2. Click it, choose Edit Custom HTML and paste the code.
  3. Publish.

Weebly allows pasted code on all of its plans, the free one included.

Weebly help: embed code

Google Sites
  1. Click Insert, then Embed, then Embed code.
  2. Paste the code, click Next, then Insert.
  3. Drag the box to size and publish.

Google Sites keeps pasted code in a box of its own, so the button there opens your booking page in a new tab, and payment from the whole form opens in a new tab too. On a phone the box gets shorter, so make it tall.

Simpler on Google Sites: Insert, Button, and paste your booking link.

Google help: embed in Google Sites

Jimdo
  1. In Jimdo Creator, click Add Element, then More elements, then Widget/HTML, and paste the code.

The newer Jimdo Website Builder does not allow code at all, so put your booking link on a button.

Jimdo help: widgets

A website you edit by hand
  1. Open the page and paste the code into the body, where the button or the form should appear.
  2. Save and upload the page as usual.

There is nothing else to install.

Do not paste it into the head, or into a header code box. The code starts with a link, and a browser moves a link in the head to the top of the page, taking every head tag after it along.

The full list of options, further down this guide

If it does not work

Only a plain link shows, with no button

The website removed the script and kept the link. That usually means the plan does not allow code. The link still works, so guests can book. To get the button, check your plan in the steps above, or ask whoever looks after the website.

The code shows on the page as text

It went into a text block. Delete it and paste it into the builder's code or HTML block instead, using the steps above.

It says the booking form is not set up

The key in the code does not match a campsite. Copy the code again from your dashboard and paste it over the old one.

It says the campsite has not opened online bookings yet

The code is working. The site is still a draft, so publish it from your dashboard and the form starts taking bookings.

The form is cut off, or has a scroll bar

Wix and Google Sites keep code in a box of a fixed size, and the form scrolls inside it. Make the box taller, or use the button, which takes up very little room.

Nothing happens while I am logged in to Squarespace

Squarespace does not run code while you are editing. Look at the page in a private window, or log out first.

Still stuck

Email hello@pitchdesk.co.uk with the address of the page and the name of your website builder, and we will look at it.

For web designers

The script reads its settings from the link, so one copy of the script can serve as many links on a page as you like: a button in the header and the whole form further down, for instance.

What the link carries

  • href is the booking page, which is what a guest gets if the script does not run.
  • data-pitchdesk is the campsite's public key. It is safe on a public page and cannot open the owner's account.
  • data-mode="inline" puts the whole form in the page. Leave it out for a button that opens the form over the page.
  • data-colour is the button's colour as a hex value. The text turns dark on a pale colour so it stays readable.
  • The words inside the link are the words on the button.

How it behaves

  • Placement. The button or form appears where the link is, so paste the code in the body. Not in the <head>: a link there ends the head early, and the browser moves it, and every tag after it, into the body, a canonical or description tag included. The older script-only code is fine in the head, and its widget goes at the end of the page.
  • Loading. The script is safe with async or defer and watches for links added later, so pages that build themselves with script work too.
  • Content-Security-Policy. Allow https://pitchdesk.co.uk in script-src and frame-src. Nothing needs 'unsafe-inline', because every style is set through the style object rather than a style tag or attribute. If the frame is refused, guests see a link to the booking page instead.
  • Inside a sandboxed iframe. It needs allow-scripts allow-same-origin allow-forms allow-popups. Add allow-top-navigation-by-user-activation and payment opens in the same tab; without it, payment opens in a new tab, and allow-popups-to-escape-sandbox keeps that tab free of the sandbox. A frame of fixed height gets the form fitted to it with its own scroll bar.
  • Payment. Stripe's hosted payment page always opens at the top level of the browser, which is how Stripe means it to be used. The script breaks out of its own frame, and out of a builder's frame where the sandbox allows it.
  • The older code. A script tag carrying data-key, data-mode, data-target, data-label and data-colour still works, so nothing already pasted needs changing.