Total Parks
Create account
Book Now widget

How to add the Book Now button.

One line of code turns a plain listing into a real booking your visitors can pay for. No per-park setup, no booking-system logins, no technical project. Here’s all there is to it.

The short version

Three steps.

  1. 1

    Tell us the listing

    Let us know which park a listing is for. We reply with your ready-made line of code — your details already filled in.

  2. 2

    Paste it where the button goes

    Drop that one line into the listing page, exactly where you want the Book Now button to appear. Nothing else to install.

  3. 3

    Publish

    Save the page. A Book Now button appears. Visitors pick dates, see live prices, and pay — without leaving your site.

The one line of code

This is the whole thing.

You don’t need to write this out. We send you your version with the details already filled in — you just paste it in.

listing.html
<script async
  src="https://embed.totalparks.com.au/v1/loader.js"
  data-property-state="your-state"
  data-property-slug="your-park"
  data-integrator="your-code"
  data-mode="modal"></script>

The values shown in your-state style are placeholders. Your real snippet arrives ready to paste.

If you want the detail

For whoever edits the page.

The steps above are all most people need. Open any section below for the technical detail your web person might want.

Where exactly do I paste it?+

Put the snippet in the page’s HTML at the spot the button should appear — it renders right there. It works on essentially any website:

  • Hand-coded HTML: paste it straight into the page markup where you want the button.
  • WordPress / Squarespace / Wix / page builders: add a “Custom HTML”, “Embed”, or “Code” block to the listing and paste it there.
  • React / Next.js / Gatsby: render the tag once where the button belongs — e.g. Next’s next/script or an element with the same data-* attributes. The button mounts next to the script tag.

You can add it to as many listings as you like — one snippet per park, each with that park’s values.

What settings are available?+
SettingWhat it does
data-property-stateRequired

Which state the park is in. We provide this.

Values:e.g.victoria
data-property-slugRequired

Identifies the exact park. We provide this.

Values:e.g.sunny-cove-holiday-park
data-integratorRequired

Your account code — attributes bookings to your site and lets the widget load there. We assign this.

Values:e.g.your-code
data-modeOptional

How the widget opens. A pop-up over your page is the only mode today.

Values:modal · default
data-primary-colorOptional

Matches the button and loading accents to your brand.

Values:e.g.#fbb957(defaults to the Total Parks brand purple)
data-button-widthOptional

How wide the button is. Use "full" to replace an existing full-width booking button.

Values:auto · defaultfull
data-button-radiusOptional

How rounded the button corners are. Use a pixel value to match the shape of an existing button.

Values:e.g.16px(defaults to 8px)
What does Total Parks handle for us?+
  • Connecting to each park’s booking system (NewBook / RMS Cloud) — no per-park setup on your side.
  • Secure card payment through Stripe. Your site never sees or stores card details.
  • Allow-listing your website so the widget only ever loads on domains you’ve confirmed with us.
  • The pop-up, scroll locking, keyboard and mobile handling, and a “Powered by Total Parks” footer.

Because of the allow-listing step, the button only loads on the exact web addresses you’ve confirmed with us. Tell us every address the listings live on (for example your live domain and any staging site) so it works everywhere you need it to.

How do we test it before going live?+

Once the snippet is on the page, check that:

  • ✓The Book Now button shows up exactly where you pasted the code.
  • ✓Clicking it opens the booking pop-up over your page (the page URL doesn’t change).
  • ✓It looks right on both desktop and a phone.
  • ✓Closing the pop-up (X or Esc) returns you to your page as normal.

Testing on a local or staging site first? The button only appears on web addresses we’ve approved, so a developer’s local preview (like http://localhost:3000) or a staging URL won’t show it until that address is added. Just send us the exact address — including the port — and we’ll enable it for testing.

Booking all the way through takes a real payment and books a real stay, so only complete a booking if you actually mean to. To just try the flow, stop before the final payment step.

The button isn’t showing — what now?+
  • Nothing appears where you pasted it: the most common cause is the page’s web address not being on your approved list yet. Send us the exact address and we’ll add it.
  • The code shows as text: it was pasted into a normal text box instead of a “Custom HTML / Embed / Code” block. Move it to a code block.
  • A security or script setting is stripping it: some site tools block outside scripts. Ask your web person to allow scripts from embed.totalparks.com.au, or get in touch and we’ll help.

Want a hand?

Tell us which listings you’d like a Book Now button on and we’ll send back your ready-to-paste snippets. We’re happy to walk your team or web agency through it.

Get my snippetSee it live