Add RECX booking to a website

Get the code

Every business has its own script and trip buttons. In the RECX provider dashboard, the Booking widget tab has the exact code to copy, and can email it to a web developer as a private link with everything filled in.

The tab appears once RECX has turned on the booking widget for the business.

Step 1: Add the script

Paste the script once, in the head of every page. A layout or template file is the best place. The key below is a placeholder: use the one from the Booking widget tab.

<script src="https://rec-x.com/widget/v1/recx-widget.js" data-recx-key="YOUR_PUBLISHABLE_KEY" defer></script>

Keep defer rather than async: the script finds its own tag, and async can run it when that is no longer possible.

Step 2: Add a Book Now button for each trip

Any element with data-recx-book opens the booking window for that trip. The Booking widget tab lists each trip's button with its id filled in.

<button type="button" data-recx-book="EXPERIENCE_ID">Book now</button>

If a site builder only allows ordinary buttons, link them to the trip's booking link instead. With the script on the page the link opens the same window; without it, the guest goes to the trip's booking page on RECX.

https://rec-x.com/book/EXPERIENCE_ID

Step 3: List every website address

The booking window only opens on addresses the business has listed in the Booking widget tab. List each one exactly, including https and any port. Staging and localhost addresses are listed separately, because there are no wildcards.

If the window opens but stays blank and then says booking is unavailable, the page's address is missing from that list. The browser console mentions frame-ancestors.

Notes for each site builder

WordPress

Add the script once for the whole site, with a header code plugin such as WPCode or in your theme header. Add a Buttons block and set its link to the trip booking link, or paste the button code into a Custom HTML block.

WordPress help article(opens in a new tab)

Squarespace

Paste the script into Code Injection, in the Header box. Code Injection needs a paid Squarespace plan. Add a Button block and set its link to the trip booking link.

Squarespace help article(opens in a new tab)

Wix

Add the script under Custom Code, placed in the Head, on all pages. Custom Code needs a Premium plan and a connected domain. Use a normal Wix button and set its link to the trip booking link. Do not paste button code into an Embed HTML element: Wix puts it in a sandboxed frame where it cannot open the booking window.

Wix help article(opens in a new tab)

Webflow

Paste the script into Site settings, Custom code, Head code. This needs a paid Site plan. Use a Button element and set its link to the trip booking link, or paste the button code into a Code Embed element.

Webflow help article(opens in a new tab)

Shopify

Paste the script into theme.liquid, just before the closing head tag. Paste the button code into a Custom Liquid section, or link any button to the trip booking link.

Shopify help article(opens in a new tab)

Google Tag Manager

Create a Custom HTML tag containing the script, triggered on All Pages. Buttons still go on the page itself: paste the button code where each trip is listed, or link any button to the trip booking link.

Google Tag Manager help article(opens in a new tab)

Custom code

Paste the script once in the head of every page, or in your layout template. Paste the button code wherever each trip is listed.

Not sure

Paste the script once in the head of every page. Most site builders call this header code, code injection or custom code. If you can edit HTML, paste the button code. If you can only add ordinary buttons, link each one to the trip booking link.

Console messages

The widget writes to the browser console only when something needs fixing, and never shows these messages to guests. Each one starts with [RecX] and links back to this page.

• Missing key

  Message

  The booking widget script is missing its data-recx-key attribute. Book Now buttons will not work.

  What to do

  The script tag has no key, or the attribute name has a typo. Copy the script from the Booking widget tab again. Book Now buttons do nothing until this is fixed.

• Unknown RECX address

  Message

  The booking widget could not determine which RecX origin to load.

  What to do

  The script works out where RECX is from its own src address. Load it with the src from the Booking widget tab rather than pasting its contents inline. If the tag sets data-recx-embed-origin, it must be a full address such as https://rec-x.com.

• Older widget version

  Message

  A newer booking widget is available, or this page's widget is deprecated or no longer supported.

  What to do

  The page is loading an older copy of the script, usually one saved to the site's own server. Point the script src back at the address from the Booking widget tab, which always serves the latest version. A newer version is only a notice, but a deprecated or unsupported one means bookings may start to fail, so update it at the next deploy.

Still stuck?

Ask the business to contact RECX, and include the page address and any console message.