Add the Booking Widget to Your Website

What it doesCopy a link to this section

The booking widget is one <script> tag. Paste it into a page of your own website and a Book Now button floats in the corner; a click opens your Perceny booking page in a panel, on top of your site, and the client books without leaving. Nothing about your booking flow changes: the services, the staff, the deposits and the policy are the ones your booking page already uses.

You do not need a developer. If you can paste text into your site builder, you can add it.

Where the code isCopy a link to this section

Perceny writes the code for you, with your booking identifier already filled in, in two places:

• Features Configuration → Website, under the website switches, the Booking Widget section.
• Features Configuration → Integrations, the Booking Widget section.

Both show the same thing: the steps, three ready-made versions of the code, a version for your own scripts, and a table of every option. Each code block has a Copy button.

Add itCopy a link to this section

1. Press Copy on Floating Book Now button.
2. Paste it just before the closing </body> tag of your site. In a site builder, paste it into the custom code box instead: Wix (Settings → Custom Code), Squarespace (Settings → Advanced → Code Injection → Footer), Shopify (Online Store → Themes → Edit code → theme.liquid), WordPress (a Custom HTML block or your theme's footer scripts), GoDaddy (HTML section).
3. Open your site. The button is in the bottom-right corner on every page that carries the code.

Paste the same code on every page you want the button on, or once in the site-wide footer.

Make it yoursCopy a link to this section

The Match your brand version shows the attributes most people change. They go on the <script> tag:

• data-button-text="Reserve Now": the button's label.
• data-color="#c2410c": its background color, any CSS color.
• data-position="left": the side it sits on.
• data-title="Reserve your appointment": the panel's header.

The Every option table lists the rest: hiding the header, the panel's size and corner radius, when it closes, the mobile breakpoint, the z-index when something on your page sits above it.

Use your own buttonCopy a link to this section

If your site already has a Book Now button, keep it. The Your own button version adds data-hide-button="true" to the script, so no floating button is drawn, and data-perceny-open to your element:

<a href="#" data-perceny-open>Book Now</a>

Any element works: a button, a link, an image. data-perceny-close and data-perceny-toggle do what their names say.

From your own codeCopy a link to this section

Once the script has loaded, window.PercenyWidget is there for your scripts: open(), close(), toggle(), setLocationId('your-business'), setButtonText('Reserve Now'), setColor('#ff5722'), and on('open', callback) / on('close', callback) to react when the panel opens or closes. The From your own code block in Perceny shows the calls.

A chainCopy a link to this section

On a chain's Site page and on its Integrations page, the same section writes one code that lists every location (data-location-ids="downtown,airport,..."). With it, the panel opens on a location picker and the client books at the location they choose. To send a page straight to one location, use that location's own code from its settings, or put data-perceny-location-id="downtown" on a button next to data-perceny-open.

If the button does not showCopy a link to this section

• The code must sit inside the page's HTML, not in a text box that escapes it. Site builders' custom code or code injection boxes are the right ones.
• An ad blocker can hide floating elements on your own machine; check from a phone.
• Something on your page above everything (a cookie bar, a chat bubble) can cover it: raise data-z-index, or move the button with data-position="left".