WhenTap

Embedding the widget

The booking widget lives in your own Webflow pages, inline, in light or dark, with no redirect to a booking site. WhenTap adds one small script to your site through Webflow, and you mark where each widget goes with a Div in the Designer. There is no code to paste.

1. Add WhenTap to your site

Open Embed in the panel and click Add to site. WhenTap registers its booking script with Webflow and adds it to the site footer. The first time, WhenTap may need Webflow's permission to add scripts to your site: the panel then shows Allow in Webflow, Webflow asks you once, and you come back and click Add to site again.

Then publish your site in Webflow. Webflow applies script changes only when you publish.

The script is versioned and pinned with a Subresource Integrity hash, so browsers refuse to run it if the file ever differs from the version WhenTap registered. On a page without a WhenTap Div it does nothing.

The Embed panel

2. Choose what visitors book

Still on Embed:

  1. Choose the service visitors will book.
  2. Optionally choose a staff member. Leave it on "Any" and the widget lets the visitor pick who they want.
  3. Choose a theme, light or dark, to match the page.

3. Place it on a page

In the Webflow Designer:

  1. Add a Div Block (called Box in the Add panel) where the widget should appear. The widget fills its width.
  2. With the Div selected, open the Settings panel and find Custom attributes.
  3. Add an attribute named data-whentap-service with the service id as its value. To pin a staff member, add data-whentap-staff with their id; for the dark theme, add data-whentap-theme with the value dark. The Embed page lists exactly the attributes for your choices, each with a copy button.
  4. Publish the site.

The widget appears inside the Div on the published site. The Designer canvas does not run site scripts, so check the published page. You can put several widgets on one page, one Div each.

The script is the whole widget: it draws the booking flow straight into the Div, inside a shadow root so your site's styles and the widget's never affect each other, and it grows with its content. It loads no other scripts and no frames. It reads only the three attributes above and ignores a Div whose ids are not valid. The service, staff, times and questions come from WhenTap's booking API at whentap.com as data, and the widget's fonts from whentap.com. For a paid service, the visitor is taken to Stripe's checkout as a full page and brought back to a confirmation.

If you would rather link to the widget than embed it, the Embed panel also gives you a direct URL. Use it as a button link anywhere, in an email, a bio, or a Webflow button. It opens the same booking flow as a page on whentap.com.

What the visitor sees

The widget walks the visitor through a short flow, only showing the steps that apply:

  1. Staff, if you did not pin one (skipped automatically when there is only one).
  2. Location, if the service has more than one (skipped when there is one; see Locations).
  3. Date, then time, from the real availability of the chosen staff member.
  4. Details, name, email, phone (optional, and required for a phone location), and any intake questions you set.
  5. Done, with add-to-calendar buttons for Google and Apple.

If the service is paid, the visitor is sent to Stripe Checkout after the details step, and the booking confirms once they pay. See How booking works.

Changing the widget later

Edit your services, staff, hours or questions in the panel and the widget reflects the change straight away. There is no need to touch the site, unless you want a Div to point at a different service, staff member or theme.

Updating the script

When WhenTap releases a new version of the script, the Embed page shows Update to the latest version. Click it and publish. The version you have keeps working until you do: each version is a fixed file that never changes.

Removing the widget

  • From one place: delete the Div and publish.
  • From the whole site: click Remove from site on the Embed page, then publish. Your services, staff and bookings stay in WhenTap.
  • Uninstalling WhenTap from Webflow removes the script too, from your next publish. Divs you placed stay on your pages until you delete them. See Uninstalling WhenTap.