Grab a
time.

Pick a slot, answer a few quick questions, and you are booked in.

Matt Porter
You will be talking to Matt A real conversation, no follow-up spam.

Where this lives.

One widget, seven ways to place it. The full experience above is the /book page. Everything below drops into any page on the site with a single line of markup and opens the same brand-styled flow.

Medium

Inline card

A single-column card for content sections, like the future contact page. Slots, then questions, then confirmation, all in place.

<!-- once per page -->
<link rel="stylesheet" href="/booking/nbh-booking.css?v=4">

<div data-nbh-booking data-variant="medium"
     data-api-base="/api/booking"></div>

<script src="/booking/nbh-booking.js?v=4" defer></script>
Small

Compact card

Shows the next few times to build momentum. Picking one, or "See all times", opens the pop-up with the full flow, that time pre-selected.

<div data-nbh-booking data-variant="small"
     data-api-base="/api/booking"></div>
Ultra

One-line pill

The lightest touch. A pill that shows the next open time and opens the pop-up. Drop it in a footer, a blog post, or an email-style CTA.

<div data-nbh-booking data-variant="ultra"
     data-api-base="/api/booking"></div>
Banner

Section band

A full-width band for between page sections. Live next times render as chips; any of them, or the button, opens the pop-up.

<div data-nbh-booking data-variant="banner"
     data-api-base="/api/booking"></div>
Strip

One-line row with a face

Matt's face, the next open time, one tap. Made for footers, nav bars, and anywhere the pill needs a human touch.

<div data-nbh-booking data-variant="strip"
     data-api-base="/api/booking"></div>
Link

Text link for body copy

Reads like a sentence, behaves like a booking page. Drop it mid-paragraph in a blog post or case study.

Not sure where AI fits in your business? and we will map it out together.

<span data-nbh-booking data-variant="link"
     data-api-base="/api/booking"></span>

How it works

Every instance calls the same relay at /api/booking, which books through HubSpot behind the scenes. Add ?mock=1 to this page's URL to run the whole flow against a local fixture with no relay, handy for design review.