Add booking and chat to your own website

Already have a website on WordPress, Squarespace, Wix or anything else? Add a short script and your booking flow opens right on top of your own pages. Clients book without leaving your site. A second script adds your live chat button.

Add the booking widget

1. 1

   Step 1 of 3

   Add the script

   Paste this before the closing body tag of your website, using your own primary address:

   <script src="https://hairhaven.onsoftalon.com/embeds/booking.js"></script>
   

   Use your primary domain in the script address. Your other addresses redirect to the primary one, and the widget only listens to the address it was loaded from, so a mismatch stops it from closing and reporting bookings correctly.

2. 2

   Step 2 of 3

   Add a button

   Give any button or link the class softalon-booking-trigger:

   <button class="softalon-booking-trigger">Book Now</button>
   

   You can also use the attribute data-softalon-booking-trigger, or the id softalon-booking-trigger.

3. 3

   Step 3 of 3

   Test it

   Publish your page and click the button.

   You will see:

   Your booking flow slides in from the right side of the page. On phones, it fills the screen.

Preselect a location, service or team member

Add these attributes to a button to skip ahead in the booking flow:

<button class="softalon-booking-trigger" data-service-id="SERVICE_ID">
    Book a haircut
</button>

To find an ID, open the share option for that service, location or team member in Softalon and copy the full booking link. The IDs are in the link after serviceId=, locationId= and memberId=. See Share your booking link.

Choose how it opens

Set it per button with data-variant, or for the whole page with data-variant on the script tag:

<script src="https://hairhaven.onsoftalon.com/embeds/booking.js" data-variant="dialog"></script>

Clients can close the widget with the Escape key. With sheet, clicking the dark backdrop also closes it.

Control it with JavaScript

If you write your own code, the script adds window.$softalon.booking:

window.$softalon.booking.init({
    variant: "sheet",
    params: { locationId: "LOCATION_ID", serviceId: "SERVICE_ID" },
});

window.$softalon.booking.onCompleted(function (data) {
    // The client finished booking
});

window.$softalon.booking.open();

Add live chat

If your plan includes the AI assistant and live chat is turned on, add the chat script to show a chat button in the corner of your website:

<script src="https://hairhaven.onsoftalon.com/embeds/chat.js"></script>

• To put the button on the left, add data-position="left" to the script tag.
• To open the chat from your own button, give it the class softalon-chat-trigger or the attribute data-softalon-chat-trigger.

If live chat is off, or your plan doesn't include it, the chat script shows nothing. See Turn on live chat on your booking site.

The chat script also adds window.$softalon.chat, with open(), close(), isOpen(), hide(), show(), onSessionStarted(callback) and onMessageReceived(callback).