Embedding the Booking Widget

You do not want customers to have to leave your marketing site to book. TrailerBase gives you four ways to embed the booking flow directly wherever your customers already are. This guide walks through each, plus the customization options that apply to all of them.

The four formats

Open Settings > Widgets > Booking to find all four.

1. iframe

The classic embed. Paste a single <iframe> tag on your site. Works anywhere HTML is allowed. Downsides: you have to pick a fixed height, and on mobile it can look boxed-in.

Use when: you want something that works everywhere with zero JavaScript.

2. JS snippet (recommended)

A small <script> tag that renders the widget responsively, auto-sizes to content, and supports deeper integration (like tracking booking completion in your own analytics).

Use when: you have any control over your site's code. This is our default recommendation.

3. Direct link

A plain URL to your hosted booking page. Drop it in buttons, emails, SMS, Instagram bio, Google Business Profile, and anywhere else a link works.

Use when: you need to share booking from places that do not allow embeds (like email or social).

4. QR code

A downloadable QR code that points to the direct link. Stick it on the trailer, the office door, print ads, or flyers.

Use when: you are doing offline marketing or in-person pickups where scanning is faster than typing.

Customization parameters

All four formats accept the same query-string parameters, so you can tune the look and behavior without touching TrailerBase settings:

• color — override the accent color. Example: color=FF6600.
• title — overwrite the widget headline. Example: title=Book%20My%20Trailer.
• trailer — pre-select a specific trailer ID. Great for product pages. Example: trailer=7x14-dump.
• size — compact (just the search box) or full (the full flow). Compact is great for headers.
• hidePhone — true to drop the phone field if your marketing goals do not need it.
• hideLastName — true for ultra-short signup. (We still collect it later in the flow if required.)

Combine them in the URL: ?color=0057FF&size=compact&trailer=7x14-dump&hidePhone=true.

Step-by-step: embed on your home page

1. Open Settings > Widgets > Booking in TrailerBase.
2. Click the JS snippet tab.
3. Adjust the customization toggles on the right — color, size, fields — to match your brand.
4. Copy the generated snippet.
5. Paste into your website's home page HTML, right where you want the widget to appear.
6. Save and preview.

Changes you make in settings propagate instantly — no need to re-paste the snippet.

Step-by-step: product page pre-select

If each trailer has its own page:

1. Grab the JS snippet.
2. Add data-trailer="7x14-dump" (or the relevant slug) to the script tag on that specific page.
3. The widget opens already filtered to that trailer.

Step-by-step: QR code for the trailer itself

1. Click the QR code tab.
2. Select size (we recommend 2 inches printed or 300px digital).
3. Download the PNG or SVG.
4. Print and weatherproof (laminate or sticker).
5. Stick it on the tongue of the trailer or inside the door — so customers can extend a rental or rebook on the spot.

Tips

• Keep the widget above the fold on your home page. Buried widgets lose bookings.
• Use compact in your main nav so the booking entry point follows customers as they browse.
• Review the Widget Analytics monthly to see opens, starts, and completions per source.