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-ref="your-property-reference"
  data-property-state="your-state"
  data-property-slug="your-park"
  data-integrator="your-code"
  data-fallback-url="https://your-park.example/book"
  data-mode="modal"></script>

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

See every setting

Available settings

What each line means.

Every snippet we send already has the required fields filled in. Optional ones let you match the widget to your page.

SettingWhat it does
data-property-refRequired

The permanent park reference. It does not change when the park changes its public name or URL.

Values:e.g.2a37d653-9a9c-43fe-9d32-f67f963cfe31
data-property-stateOptional

Compatibility fallback for older cached widget loaders. New ready-made snippets include it automatically.

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

Compatibility fallback paired with data-property-state. Existing snippets using only that pair remain supported.

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. modal is a Book Now button that opens a pop-up over the page. inline shows dates, filters, and room cards on the listing; View and book then continues into the full-viewport checkout. Omitted or unrecognised values use modal.

Values:modal · defaultinline
data-fallback-urlOptional

The park website or booking page used only if a modal booking pop-up cannot open. Use this when the listing has a better Book Now destination than the park homepage. Inline mode ignores it.

Values:e.g.https://sunny-cove.example/book-online/(defaults to the stored park website when available)
data-initial-cardsOptional

How many room types show first in inline mode, before Load more. Ignored in modal mode.

Values:e.g.6(defaults to 6; accepted values 1–24)
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 Book Now button is in modal mode. Use "full" to replace an existing full-width booking button.

Values:auto · defaultfull
data-button-radiusOptional

How rounded the Book Now button corners are in modal mode. Use a pixel value to match the shape of an existing button.

Values:e.g.16px(defaults to 8px)

If you want the detail

For whoever edits the page.

The steps and settings above are all most people need. Open any section below for extra detail on pasting, testing, or troubleshooting.

Where exactly do I paste it?+

Put the snippet in the page’s HTML at the spot the widget should appear — it renders right there. Modal mode shows a Book Now button; inline mode shows the in-page booking panel. 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 widget 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 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 or in-page booking panel, scroll locking, keyboard and mobile handling, and a “Bookings powered by Total Parks” footer.
  • Keeping modal Book Now working as a normal park-website link if the booking pop-up cannot open.

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.

If the snippet uses inline, dates and room cards should appear on the listing without a Book Now click, and View and book should still open the full-viewport checkout.

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