Origin's booking widget lets your customers book a trip directly from your website — no extra clicks, no redirects. Once you've created your Listings in Origin, you can grab a small snippet of code and paste it anywhere on your site. This article covers both widget types, how to install them, and the sizing rules you'll want to know before you paste.
The two widget types
Single-Listing Widget — Embeds one specific listing. Customers see availability and book that trip directly. Best when you have a dedicated landing page per offering (for example, a "Sunset Fishing Charter" page).
Tabbed Widget (Make A Widget) — Groups multiple listings into a single widget with tabs across the top. Best when you want to give customers a choice in one spot — for example, 4-hour, 6-hour, and 8-hour tours offered as tabs in a single widget.
Read this before you paste — size & layout
Most install issues come from the container the widget gets dropped into. A minute here saves a support ticket later.
Width. The widget is fixed at 340px wide (with a minimum of 320px). It's designed to fit in a sidebar or a narrow column. If you drop it into a wide hero or full-width section, it will not stretch — it will sit at 340px. It will shrink to fit a container narrower than 340px, but it will not grow beyond 340px by default.
Height. Defaults are:
• Single-listing widget: 700px
• Tabbed widget: 800px
If pricing options, add-ons, or long descriptions are getting cut off, increase the height by adding data-height="900px" (or higher) to the script tag.
Container gotchas.
• Don't wrap the widget in a parent that has overflow: hidden clipping vertical content.
• Avoid CSS transform on parent elements — it breaks the fixed-position checkout modal.
The checkout modal. When a customer clicks Book, a full-screen checkout opens over your page at a very high z-index (~999999999). It's hosted by Origin and handles payment — you don't need to style it. One side effect: any site-wide chat bubble or sticky element will appear behind the checkout modal, not in front of it.
Multiple widgets on one page. Totally fine. Paste the <script> tag in each spot you want a widget; each instance runs independently.
How to install a single-listing widget
1. Click Listings in the left side panel.
2. Find the listing you want to embed.
3. Click the chain-link icon under the Actions column.
4. Under Install A Widget, click Copy Code.
5. Paste the code on your website wherever you want the widget to appear — most platforms call this an "Embed Block", "HTML Embed", or "Code Snippet" block.
How to install a tabbed widget (multiple listings)
Use this when you want one widget that lets customers switch between several listings via tabs.
1. Go to Listings.
2. Click Make A Widget at the bottom of the page.
3. Enter a title (label) for each tab and select the listing it should open. You can also set a brand color here.
4. Click Generate.
5. Click Copy Link.
6. Paste the code into your website.
Platform-specific notes
Squarespace
In the Squarespace editor, navigate to the page you want and click Edit. Hover over the section where you'd like the widget — you'll see a blue line with a + sign. Click it.
From the block menu, choose Embed. In the block settings, switch the option to Code Snippet, then paste your Origin code into the Embed Data field.
Save the page and refresh. The widget often won't appear in the editor preview, but it will load on the live page — this is normal.
Using the new Squarespace Liquid editor? Overlapping page elements can sometimes sit on top of the widget. Click the section that's covering the widget and use the "move to back" button (two overlapping squares — one dotted, one solid). This sends that section behind the widget. Save and reload.
Wix
Wix requires a small tweak to the standard snippet. Wrap the script tag with </head><body> at the start and </body> at the end. The final snippet looks like this:
</head><body><script src='https://www.exploreorigin.com/widget_v2.js' data-listing='XXXXXX'></script></body>
Replace XXXXXX with the 6-digit Listing ID from the listing you want to embed. Repeat for each widget across your pages.
WordPress, GoDaddy, and others
No plugin needed — Origin works with any website builder that supports a custom HTML or embed block. Paste the snippet into the appropriate block on your page and save.
Troubleshooting
Widget shows but no dates are available. See Availabilities aren't showing on the calendar for the most common causes.
Widget is being clipped or cut off vertically. The container has either a fixed height or overflow: hidden. Remove the height constraint, or add data-height="900px" (or higher) to the script tag.
Widget looks small in a wide section. Expected — the widget is 340px wide by design. Move it into a narrower column, sidebar, or two-column layout.
Checkout modal looks broken or is hidden behind something. Check parent elements for CSS transform — it breaks the modal's fixed positioning. Removing the transform fixes it.
Widget isn't loading at all. Make sure you pasted the snippet into a true HTML/embed block (not a regular text block) and that nothing on your CMS stripped the <script> tag.