Embedding the Booking Widget - Salon Assistant User Guide

Overview

The Artie booking widget is a small piece of code you add to your website. It places a floating button in the corner of every page. When a client clicks the button, a booking panel opens right on your site. The widget uses Shadow DOM isolation, so your website's styles will never conflict with the widget. No matter what platform you use, the widget looks and works the same way.

Prerequisites

Role required: Admin or Manager (requires access to Settings)
Before you start: Your salon must have an active Artie subscription with at least one published service. You need access to your website's HTML or your website platform's code injection settings.
Related: See Setting Up Public Booking if you have not enabled public booking yet.

Get Your Embed Code

Go to Settings > Booking Widget in Salon Assistant. Your unique salon slug appears at the top of the page.

Copy the embed code shown on the page. It looks like this:

<script src="https://widget.artie-ai.com/booking.js" data-salon="your-slug"></script>

Replace your-slug with your actual salon slug (for example, artie-beauty-downtown).

What you'll see: A code box with a "Copy" button. Your salon slug is already filled in.

Embed code panel in Settings showing the script tag with your salon slug

The embed code panel in Settings with your unique salon slug pre-filled

Add the Widget to Your Website

Paste the embed code into your website just before the closing </body> tag. The exact steps depend on your website platform:

Platform	Where to paste
WordPress	Appearance > Theme Editor, or use the "Insert Headers and Footers" plugin → Footer Scripts
Squarespace	Settings > Advanced > Code Injection → Footer field
Wix	Settings > Custom Code > Add Code → Body - End, apply to All Pages
Custom HTML	Paste directly before `</body>` in your HTML file

What you'll see: After saving and refreshing your website, a round purple button with a calendar icon appears in the bottom-right corner.

Floating booking widget button on a salon website

The floating booking button appears in the bottom-right corner of your website

Customize the Widget Appearance

Add data attributes to the script tag to match your brand:

Attribute	Options	Default
`data-primary-color`	Any hex color (e.g., `#14b8a6`)	`#8B5CF6` (purple)
`data-position`	`bottom-right`, `bottom-left`	`bottom-right`
`data-theme`	`light`, `dark`	`light`
`data-mode`	`popup`, `inline`, `fullpage`	`popup`

For example, to use a teal button in the bottom-left corner:

<script src="https://widget.artie-ai.com/booking.js" data-salon="your-slug" data-primary-color="#14b8a6" data-position="bottom-left"></script>

Tip: Use your salon's primary brand color so the button feels natural on your site.

Test the Widget

Open your website in a browser and verify the following:

Check	Expected result
Button visible	A round colored button appears in the corner you configured
Panel opens	Clicking the button opens the booking panel over your page
Full booking flow	You can select a service, pick a stylist, choose a time, and confirm
Mobile display	The button and panel work correctly on a phone

What you'll see: The booking panel slides open over your website. Clients can complete their entire booking without leaving your site.

Booking widget panel open on a salon website

The booking panel open on your website, showing the service selection step

Tips & Best Practices

Tip:

Match the widget color to your brand using data-primary-color.
Test on both desktop and mobile to verify the button does not overlap important content.
Use bottom-right for most websites. Visitors expect interactive buttons in that corner.
If you have a live chat widget, place the booking button on the opposite side to avoid overlap.
Make sure public booking is enabled in your salon settings before embedding the widget.

Common Issues

Issue	Solution
The button does not appear	Check that `data-salon` matches your salon slug exactly. Open your browser's developer console and look for errors.
The button overlaps my chat widget	Change `data-position` to `bottom-left` (or move your chat widget to the opposite corner).
The widget looks broken or unstyled	The widget uses Shadow DOM so styles cannot conflict. Clear your browser cache and reload.
Booking panel shows no services	Your salon has no published services, or public booking is not enabled. Verify both in Settings.
Widget color does not match my brand	Add `data-primary-color="#yourcolor"` to the script tag. Use a full six-character hex code.
"Could not find script tag" error	You are loading the script dynamically. Use the JavaScript API (`ArtieBooking.init()`) instead.

Related Journeys

Setting Up Public Booking — Enable and configure public booking before embedding the widget
QR Codes and Booking Links — Create shareable links and print QR codes for in-salon display
Booking an Appointment — How staff book appointments from within the app