Your Practice Better booking widget lets clients book sessions directly from your website, without leaving your page. This article covers how to copy your widget code from Practice Better and embed it on the most common website platforms.
In this article:
- Before You Begin
- Embedding Your Widget
- Using Multiple Widgets
- Customizing Your Widget
- Troubleshooting the Practice Better Booking Widget FAQ
Before You Begin
Before embedding your widget, you'll need to copy the HTML code from your Practice Better account. The widget is available on all plans.
To get your widget code:
- Click the Settings (gear) icon in the navigation bar.
- Select Share My Link or My Links & Widgets.
- Scroll to the Create a Booking Widget section.
- Optionally, customize your widget: enter a HEX code in the Theme or Accent color fields, adjust the Width and Height.
- Select the services, packages, or programs to display from the Services, packages and programs to display pick list.
- Optionally to hide the scroll bar in the resulting widget by clicking the checkbox beside Auto-hide scrollbar.
- Click the code block to copy the code under the Embedded Booking Widget section.
📍 Note: Set up your availability in Practice Better before sharing your widget. Clients won't be able to book if no availability is set.
Embedding Your Widget
Once you have your widget code, paste it into your website platform using a custom HTML or embed block. The steps below show you where to find that option in the most common platforms. For detailed instructions, follow the link to each platform's own help documentation.
WordPress
In WordPress, use a Custom HTML block in the page or post editor.
Adding custom HTML in WordPress →
Squarespace
In Squarespace, use a Code Block to embed custom HTML on any page.
Adding a code block in Squarespace →
Wix
In Wix, use the Embed HTML element, found under Add Elements > Embed & Social.
Webflow
In Webflow, use an Embed element from the Add Elements panel to paste custom HTML directly onto your page.
Adding Custom Code in Webflow →
Shopify
In Shopify, you can add custom HTML to a page using a Custom Liquid section or by editing your theme's code directly. If you're not comfortable editing theme code, consider working with a Shopify developer.
Adding custom HTML in Shopify Pages →
Other Website Platforms
If your platform isn't listed above, check your website builder's help documentation for instructions on adding a custom HTML block or embed code. Most modern website builders support this. If yours doesn't allow custom HTML, embedding the widget won't be possible, but you can still share a direct booking link with your clients instead.
Linking Services, Packages and Programs to Your Website →
Using Multiple Widgets
You can embed your booking widget on multiple pages or websites. Return to Settings > Share My Link > Create a Booking Widget in Practice Better to generate separate widget codes for different services, packages, or programs. Each widget is independent, so you can display different offerings in different places.
You can also embed a Form widget in your website, to allow clients to submit a Form without signing up or scheduling with you. This is a great option to gauge interest for a new offering, gather initial client intake, or create a waiting list.
Learn more about Embedding Forms on your Website →
Customizing Your Widget
You can adjust the following directly in Practice Better before copying your widget code:
- Theme color: Enter a HEX code to match your brand colors. If you're on a Plus or Team plan with custom branding configured in Practice Better, your brand colors will apply automatically to the widget.
- Width and height: Adjust the dimensions to fit your page layout.
- Services displayed: Choose a specific Booking Page, service, package, or program from the pick list.
- Scrollbar visibility: Check or uncheck Auto-hide scrollbar based on your preference. A scrollbar is expected behavior when widget content exceeds the display area.
📍 Note: Font styles in the widget follow Practice Better's default styling and cannot be changed to match your website's fonts.
Beyond these options, the widget HTML code itself is not intended to be edited.
If you need to make layout adjustments beyond what's available in Practice Better settings, those changes require knowledge of HTML. W3Schools is a good starting point if you'd like to learn more.
Troubleshooting the Practice Better Booking Widget FAQ
Q: My Widget Isn't Showing Up
A: After pasting the widget code, make sure you have saved or published the changes on your website. Most website builders require you to publish updates before they're visible to visitors.
Q: The Widget Looks Cut Off or Has a Scrollbar
A: A scrollbar is expected when the widget content is taller than the display area. To adjust this, return to Settings > Share My Link > Create a Booking Widget in Practice Better, toggle Auto-hide scrollbar on or off, then copy and re-paste the updated code on your website.
You can also increase the Height value in the widget settings to reduce the need for scrolling.
Q: The Widget Code Isn't Working
A: If your widget code isn't displaying correctly, the most reliable fix is to return to Settings > Share My Link > Create a Booking Widget in Practice Better, copy a fresh version of the code, and replace the existing code on your website. The code generated directly from Practice Better will always work as expected.
✅ Still having trouble? Our support team is here to help. Reach out through the Get Help button in your Practice Better account.