Why use a booking widget instead of just linking to TripWorks?

Most operators start by sending guests to a TripWorks-hosted booking page. That works, but it means guests leave your website to book — which costs you brand consistency and, for some guests, trust ("is this still the same company?"). A booking widget solves that by rendering the real booking flow inside your own page, so the whole experience, from browsing to checkout, happens on your domain.

It also removes a maintenance burden. If you've ever manually kept a "Book Now" page in sync with your real activities — updating prices, swapping in new tours, removing sold-out dates — a widget replaces that with a live view straight from TripWorks. Add a new activity in TripWorks, and it appears in the widget automatically; nothing to touch on the website side.

Where to find the booking widget builder

Booking widgets live under Setup → Tools → Booking Widgets. This is a dedicated screen — a list of every widget you've built, each with its type, default view, activity count, and how many times it's been embedded and interacted with. If you're setting up your first one, this list will be empty; click New Widget to open the builder (the modal that opens is titled "Create New Widget," even though the button itself just says "New Widget").

Building your widget

The builder is a single modal with a form on the left and a live preview on the right — so you see exactly what guests will see as you make changes, before anything is public.

1. Name it

Give the widget a name you'll recognize later — for example, "Homepage Catalog" or "Summer Harbor Tours." This name is for your own reference inside TripWorks; it's never shown to guests. If you plan to build several widgets (one for your homepage, one for a specific tour's landing page, one for an email campaign), a clear name matters more than it seems — widget lists grow quickly once a team starts building for different pages and campaigns.

2. Choose what it shows — the Content tab

This is where you decide which activities the widget displays:

• All Activities — the default. Every bookable experience in your account, kept automatically up to date as you add or retire activities.
• Individual Activities — hand-pick specific tours. Useful for a widget embedded on one tour's dedicated landing page, where showing your entire catalog would be a distraction.
• All Items in Selected Categories — if you've grouped activities into categories (e.g., "Water Sports," "Land Tours"), show everything in one or more categories without picking each activity individually.

You'll also choose the widget type — Trip Builder (a full booking flow) or Calendar (a calendar-first view) — depending on how you want guests to start their booking journey.

3. Choose how it looks — the Layout tab

The Layout tab controls the default view: a card-based catalog, a calendar, an agenda list, or activities grouped by category. Pick whichever matches how guests already think about your offerings — a small tour operator with five activities might prefer a simple catalog grid, while an attraction with recurring time slots might lead with the calendar.

You can also choose the catalog item layout (how much detail each activity card shows), so the widget's density matches your site's existing design.

4. Fine-tune the details — the Options tab

Options covers the smaller settings that shape the booking experience: which language the widget displays in, whether to show dynamic pricing or per-time-slot prices up front, and whether to default to flexible booking. If you work with resellers, this is also where you enable reseller attribution, so bookings that come through the widget are correctly credited.

5. Check the live preview

Before you save anything, use the Mobile and Desktop toggle above the preview to confirm the widget looks right on both — most guests will encounter it on their phone first, so it's worth checking that view specifically, not just assuming desktop is representative.

6. Save it

Click Create Widget. It's now saved and appears in your widget list — but nothing is live on your website yet, and saving doesn't take you there automatically. Installing is a separate step, covered next.

Installing your widget on your website

From the widget list, click the Install Widget icon on the row for the widget you just built — a distinct action from Edit, Clone, or View Analytics on that same row. You'll see four ways to deploy it, on separate tabs:

• Embed — the full widget rendered directly on a page. Use this to build a complete storefront or catalog page on your site.
• Button — a "Book Now" style button that opens the same booking flow. Good for placing calls-to-action throughout an existing page without embedding the whole catalog.
• URL — a hosted link to the widget. Paste this into an email, an ad, or an existing button element on your site if you'd rather link out than embed.
• QR Code — the same link as a scannable code, useful for printed materials, signage, or an in-person checkout counter.

Whichever method you choose, installation is two copy-paste steps:

1. Install the base JavaScript — a one-time snippet (a stylesheet link and a script tag) added to your website's <head>, or just before the closing </body> tag. You only need to do this once per website, no matter how many widgets or buttons you add later.
2. Add the widget markup — a short HTML snippet placed exactly where you want the widget or button to appear on the page.

Most website builders — Webflow, WordPress, Squarespace, and others — support adding both snippets through their built-in "custom code" or embed blocks, with no further development work required. If your site is more custom, hand these two snippets to whoever maintains it; there's no ongoing configuration needed after installation.

A note on troubleshooting installation

If the widget doesn't appear after installing, the most common cause is the base JavaScript snippet missing from the page, or being added to only one page when your site has multiple templates. Confirm the base script is present on every page that also has widget markup — the widget markup alone won't render without it.

If you run into any issues getting your widget live, our support team is glad to walk through installation on a call or screen share.