Site widget

Quick links

What the site widget is

The site widget is a small card pinned to the corner of your website. Collapsed, it is a round launcher with a label that reads "Next opening Thu, Sep 10". Open, it shows the host's photo, name, and title, a one-line headline, a short description, the next opening and how many openings are left this week, a strip of the next open days, a booking button, and an optional second button to call the firm or get the booking link by text.

Everything on the card is real. The openings come from the host's calendar at the moment the page loads, the same source as your booking page. There is no countdown, no "only a few slots left", and no made-up number. A visitor who picks a day and clicks the button lands in the booking popup on that day.

Each event type has its own site widget, so a firm can run one card for consultations on the main site and a different one on a practice-area landing page.

Install it

1. Open the event type under Booking and go to Share & Embed → Site widget.
2. Copy the install code at the bottom of the tab and paste it before </body> on every page of your site. Most site builders have a "custom code" or "footer scripts" box for this; on WordPress a header/footer plugin or your theme's footer works.
3. Save the page. The card appears on the next load.

The install code looks like this:

<script>
(function(){function l(){var s=document.createElement('script');s.src='https://app.superpractice.com/embed.js';s.async=true;s.setAttribute('data-superpractice-widget','your-firm/free-consultation');document.body.appendChild(s)}
document.readyState==='complete'?l():window.addEventListener('load',l)})();
</script>

It waits for your page to finish loading before it fetches anything, so the widget never competes with your own content.

Changes go live without touching the code again. Every setting below is saved in the app. A saved change is on your site the next time a page loads; the script itself refreshes within a minute.

Optional attributes

Add these to the <script> tag inside the install code when you need them:

The Site widget tab

Every field has a live preview on the right that follows your unsaved edits, on a light or dark stage.

Host shown on the card

The team member whose photo, name, and title appear at the top. Their photo and title come from their profile. For round-robin and collective event types the card shows the firm's logo and name unless you pick a specific host, since the actual host is chosen when the booking is made.

Photos. Under Settings > General, the Your photo field fills in automatically from a connected Google or Outlook account. Upload a photo overrides it with your own image at any time.

Headline and description

• Headline is one line, up to 40 characters. Blank uses the event type name.
• Description is up to 160 characters. Blank uses the description from the event type's Basics card.

Booking button text

The main button. It opens the booking popup on the day the visitor picked. Up to 32 characters; blank reads "Book a call".

Second button

An optional second action under the booking button. The dropdown is named by what the visitor gets:

Second button text lets you override the label. Blank uses the default for its kind: "Call (305) 555-0142" or "Text me a link".

The firm-wide default. New event types inherit one choice for the whole firm, set once under Settings > Meeting Agent → Site widget: Text me a link, Call the firm, or Neither. An event type can always pick its own.

Which number gets called. The number you enter on the event type wins. Otherwise the card uses your firm's calling number, then your texting number, then the phone number on Settings > General. Calling never turns off as long as any of those exists.

Text them your booking link

When a visitor enters their mobile number, Superpractice sends one text from your firm's default texting number. Two settings shape it:

• Link to text — blank sends your booking page. Enter any https:// link to send something else, such as a landing page.
• Message — the text itself. Blank sends Here's the link to book with {firm}: {booking_link}. Three merge tags are available: {booking_link}, {firm}, and {first_name} (filled in when the person is already a contact, otherwise left out).

What happens behind the scenes:

• The person is saved as a new contact in Contacts with the site widget as their source, so nobody who asked for a link is lost.
• Texting consent is recorded for that message. They asked for it; the card says "We'll text you one link. Message and data rates may apply."
• Each number can receive one text per ten minutes, and each firm has an hourly cap, so the button cannot be used to spam anyone.

Requirement. Texting needs a registered number: a texting number with a verified 10DLC campaign, or an approved toll-free number. Until then the dropdown row is disabled and says so. If the firm default is "Text me a link" and the number is not yet registered, the card shows the call button instead, never a dead button. See Settings > Compliance to start registration.

Show the card

When the card opens on its own. Whatever you choose, it opens once per visit, and a visitor who closes it does not see it open again in that tab.

Next open days

Show puts a strip of the next five open days on the card and "Next opening Thu, Sep 10" on the collapsed label. Tapping a day updates the block above it to that day's first opening ("First opening Friday") and how many openings it has ("13 openings"). Everything is pulled live from the host's calendar.

Ring color and Icon color

The collapsed launcher is a dark circle with a colored ring, a soft glow, and a calendar icon. Ring color sets the ring, its glow, and the live dot on the label; Icon color sets the calendar icon. Both take a six-digit hex color. Blank keeps the defaults: Superpractice teal for the ring and white for the icon. Use default clears either one.

Bookings this week

Real social proof in place of a countdown. Turn it on and a line appears under the description: a small pulsing dot and "14 people booked this week". The number counts up from zero the first time the card opens.

How the number is kept honest:

• Off until you turn it on. Each event type has its own switch.
• Real bookings only. It counts bookings made through any of your Superpractice event types in the last seven days. Cancelled bookings count as booked, the same way the rest of Superpractice counts them.
• Never below three. With fewer than three bookings in a week the line hides itself. If the week is thin but the last thirty days have three or more, it reads "12 people booked this month".
• Not exposed otherwise. The number is only sent to your site when the switch is on.

Who books. A second field, shown when the line is on, changes only the word after the number. Blank reads "people". A patent firm can say "inventors", a startup practice "founders", a family firm "families", so the line also tells the visitor the firm serves people like them: "9 inventors booked this week". Plural, letters only, up to 24 characters.

The setting's helper text reads your firm's actual numbers and tells you exactly what visitors will see, or why nothing shows yet.

Hide on these pages

One entry per line, as a path or a full link. /checkout hides that page and everything under it. /blog* hides every page whose path starts with /blog. https://yourfirm.com/thank-you/ works the same as /thank-you; only the path is used. A single / hides the card everywhere.

This hides the card only. Your booking page and any inline booking calendar on the same page are unaffected. The list applies as visitors move between pages, including single-page sites that change the URL without reloading.

How it behaves on your site

The widget is built to sit on any site without getting in the way, and without touching your page-speed scores.

• It never touches your scores. The card mounts after your page has fully loaded, in an idle moment, with fixed dimensions, so it adds no layout shift and no main-thread work during the load. Measured with Lighthouse on a page with a large hero image, mobile and desktop both score 100 with the widget installed, identical to the page without it.
• It renders in your page, not in an iframe. The card lives in an isolated shadow root, the same technique GoHighLevel and Intercom use. Your site's CSS cannot restyle it and it cannot restyle your site. Only the exact card, launcher, and label are clickable; there is no invisible box around them that swallows clicks. The booking form itself opens in a popup only when a visitor clicks.
• Strict security policies are fine. The card's styles are applied through the browser's stylesheet API, so a site with a strict Content Security Policy only needs to allow the script and the API.
• Automation never sees it open. Crawlers, Lighthouse, PageSpeed Insights, and headless browsers get the collapsed launcher and nothing else.
• Site builders. The card never mounts inside another frame, which keeps it out of Webflow, Framer, Wix, and Squarespace editors. It also steps aside on any page that already has an inline booking calendar embedded.
• Phones. Below 640px the label hides and the launcher stays. On touch devices the open card takes the launcher's place so nothing is hidden behind it.
• Escape closes it, it is hidden when the page is printed, and it works on plain HTML, WordPress, Next.js, and every builder we have tested.

Popup and booking flow

Clicking the booking button opens the same booking popup you get from the Popup embed, on the day the visitor picked, over a dimmed and blurred page. The close button sits just outside the popup's top-right corner. Bookings made this way are identical to any other booking: same confirmation, reminders, contact record, and attribution.

JavaScript API

For sites that want to trigger the card themselves, for example from a "Book now" link in the navigation:

Superpractice.widget.open()    // open the card
Superpractice.widget.close()   // close it
Superpractice.widget.hide()    // remove it from the page for now
Superpractice.widget.show()    // bring it back
Superpractice.widget.destroy() // remove it entirely

Superpractice.on('booked', function (booking) {
  // fire your own analytics event
})

Events available through Superpractice.on: ready, open, close, booked, and textLinkSent.