Website booking widget

Overview

The Website Widget is an integration that lets you create embeddable booking experiences for your own marketing website (for example Wix, WordPress, or custom HTML). Guests interact with a trigger on your site—such as a tab, button, text link, or inline embed—and move into Mallard Bay booking flows. Resulting bookings show up in your dashboard like bookings from other channels, tied to your listings and availability the same way.

You manage widgets from Integrations → Website Widget (/integrations/website-widget). Creating or editing a widget opens a dedicated editor (/widget/new/... or /widget/:id) with a live-style preview. Embedding instructions and copy‑paste embed code live on /widget/:id/instructions.

Prerequisites

• Outfitter context: The integrations hub and widget list expect an active outfitter account in the dashboard (the hub uses shouldRequireOutfitter).
• Recommended entry path: Start new widgets from Integrations → Website Widget → Add Widget. That navigation sends you to /widget/new/{outfitterId}, which supplies the outfitter id the creator uses when saving. The app also exposes /widget/new without an id; saving from that route can pass an empty outfitter reference into the create mutation, which is unlikely to work reliably—prefer the hub button.
• Listing-specific widgets: The editor can limit a widget to selected listings only when your outfitter has published listings (the listing picker uses the default listing filters, which include published listings).

Step-by-step usage in the dashboard

1. Open Website Widget from Integrations

1. Go to Integrations (/integrations).
2. Open the Website Widget card (label in the product: Website Widget; description references creating and managing a widget so guests can discover and book trips).

2. See all widgets for your outfitter

The Website Widget page shows a table with columns Name, Type, Status (Active / Inactive), and Updated (relative time, e.g. “3 days ago”).

• Open a widget: Click a row to open the editor at /widget/{id}.

3. Create a widget

1. On the Website Widget page, choose Add Widget.
2. You land on /widget/new/{outfitterId} with the title Add Widget.
3. Fill in the form (details below) and submit with Create.
4. After a successful create, the client stores the new widget id internally so follow-up actions can target it.

4. Configure what the widget does (editor fields)

The editor is split into Customization options (form) and Preview (approximate trigger appearance).

Widget name (required)
Internal label so you can recognize this configuration later.

Trigger type (required)
Controls how the booking UI is launched on your site. Supported types in the dashboard enum are:

Colors and text

• For tab, button, and modal, you can set button color, button text, and text color (placeholders suggest your brand default and white).
• inline does not use those button fields in the form—the preview shows a fixed placeholder frame.

Listing scope
Section title: Is this widget for specific listings?

• If the toggle is off, listing_ids sent to the API is empty, which means all listings are in scope (per the in-product description: “If this is not selected, all listings will be included.”).
• If on, you choose one or more listings in a multi-select card list (with cover images when available).
• If there are no published listings, the toggle shows This outfitter has no published listings. and is disabled.

External widget
Section: Would you like to use the external widget?

• When enabled, the copy explains that the external widget will link directly to the Mallard Bay website.
• This option is hidden when trigger type is inline (only tab, button, and modal show the switch).

Admin-only field
Users with an internal admin flag also see a Source text field (for tracking or attribution labels). Standard outfitter users do not see this in the form.

Submit:

• Create on new widgets; Confirm when editing an existing widget.

5. Get embed code and platform steps

1. From the widget editor header, choose Show instructions (book icon). That navigates to /widget/{id}/instructions.
2. Pick Custom, Wix, or WordPress when asked What kind of website do you have?
3. The screen shows a code snippet plus steps tailored to that platform. For tab triggers versus others, the step list branches (tab-style vs inline-style instructions inside the config).

Embed snippet shape (built by the dashboard):

• A div with class mb_widget and data-id="{your widget id}".
• A script tag whose src is the configured GATSBY_WIDGET_URL at build time.

The exact script URL is environment-dependent and not visible as a fixed customer-facing URL in this repository.

6. Copy and paste

The instructions view uses a Code block with copy, share, and toast feedback enabled—use that to move the snippet into your site’s HTML or embed tool.

How this fits next to other Mallard Bay concepts

• Integration: Website Widget is grouped under Integrations, alongside calendar, SMS, Meta, email domain, QuickBooks, etc.
• Website (builder vs external site): The Mallard Bay website builder can expose booking via iframe-style embed URLs in blocks (for example a “widget modal” block). That path is separate from the script + mb_widget div embed documented on the instructions page—both relate to booking from a website, but they are different surfaces in the product.
• Listings & availability: Scope controls which listings the widget surfaces; whether dates are bookable still follows each listing’s availability and booking rules.
• Bookings: Guests completing flows initiated by the widget produce bookings you manage in the dashboard (payments, forms, messaging, etc., same as other booking sources).

Common pitfalls

• Creating without an outfitter id in the URL: /widget/new exists as a route, but the save path expects an outfitter id when creating. Use Add Widget from the integration hub (/widget/new/{outfitterId}) rather than bookmarking the bare /widget/new URL.
• Opening instructions before the widget exists: Show instructions navigates using the current widget id. On a brand-new widget, that id is empty until Create completes successfully—open instructions after the widget is saved.
• Listing-specific setup with no published listings: You cannot assign listings until published listings exist; the UI disables the toggle and explains why.
• Trigger type and fields: Switching to inline removes button customization and the external-widget toggle by design. Modal uses text-oriented styling rather than a large colored button in the preview.
• Instructions page without a valid id: The instructions route still renders the website-type chooser even if the widget query returns nothing (for example missing id), but the embed code will not contain a useful widget id—ensure you are on /widget/{valid-id}/instructions.
• Active / Inactive in the table: The API supports is_active on create/update and removeWidget exists in GraphQL, but this dashboard codebase does not wire up delete or an active/inactive toggle on the Website Widget table or editor reviewed here. How status becomes Inactive or whether widgets can be removed from this UI is unknown from this repository.

Related workflows (from code paths)

• Integrations hub: Central entry at /integrations; Website Widget is one card among calendar, QuickBooks, Meta, SMS, custom email domain, etc.
• Mallard Bay–hosted website: The web builder registers blocks that load embedded booking content via /embed-content/widget style URLs (iframe). If you use both an external marketing site and the Mallard Bay website builder, you may use different embedding mechanisms for each.
• Analytics / pixels: CreateWidgetInput / UpdateWidgetInput in the GraphQL schema include fields such as google_analytics_id and pixel_id, but the outfitter-facing widget form in this repo does not expose those fields (only admin sees Source). Whether they are set elsewhere is unknown from this repository.