Website Booking Widget Directions

What is the widget?
The PocketSuite booking widget is a website plugin you embed on your website that lets customers request appointments with you over the Internet.


Is it for me?

If you want to seamlessly book clients on your own website then heck yes it is!


Booking widget instructions:
To add the booking widget to your website by copying this code into the <body> of the website code:


<div id=”ps-book” data-account=”USER_ID“></div><script src=””></script>

Where it says USER_ID, you’ll put your username. Head to settings>profile>username. If it’s empty, time to make one special for your business! You can also see it in your email with instructions.

Advanced Options:
1) Show a specific service only:
If you have your website setup to already describe and layout specific services, you can have the widget show only that service.

To add the booking widget to your website by copying this code into the <body> of the website code:

<div id=”ps-book” data-account=”USER_ID” data-service=”SERVICE NAME“> </div><script src=””></script>

If the service name is Semi Private 10 Pack, you’ll remove the spaces for the widget to semiprivate10pack.

PROTIP: If you’re adding multiple widgets to a page, see below on how to do that.

2) Show only specific items:
To have the widget only show certain items, head to the class/service/package ect. and add #[key word] to the description.

To add the booking widget to your website by copying this code into the <body> of the website code:

<div id=”ps-book” data-account=”USER_ID” data-keyword=”TERM“> </div><script src=””></script>

You can also create a custom link as follows:

‘ ‘

So in the #newclients example above, that dynamic category booking widget and link would be written as:

<div id=”ps-book” data-account=”USER_ID” keyword=”newclients“> </div><script src=””></script>

3) Adding multiple widgets:
Adding more than one widget to the page super easy. Just use the first part of the code between the <div </div> and replace id with class. Put them where you want them and after the last one, add the <scrip </script> part.

Check out this example:

<div class=”ps-book” data-account=”USER_ID“></div>

<div class =”ps-book” data-account=”USER_ID” data-service=”SERVICE NAME“></div>

<div class=”ps-book” data-form=”FORM_ID“></div><script src=””></script>

Above, the first will show everything available online for booking, the second will only show that specific service, and the last one shows a form. Then, it ends with the script part of the code only once, after the last one.

pocketsuite apple app store

Online forms:
To add forms online for clients to fill out, use this code instead:

<div id="ps-book" data-form="FORM_ID"></div><script src=""></script>

You can get the form ID from your messages using the www icon. You can also get it from settings>forms>select form>preview>share to open in a web browser>look at the end of the link after the last /.

*** Note: When copy and pasting this code, always ensure there are not "illegal" quotations and they display as "normal" – if there's doubt, replace them with newly typed quotations from the keyboard. 

No website? No problem!
Clients can book you using your online booking link.

The online booking link is:

You can use this link to add it to your social media like Facebook or Instagram. You can even add it to your website as a button link. For any button, just edit and add that link as the URL.

If you want it to show a specific service, use this option:

Online form:

PROTIP: Don’t want to try and figure out how to make the URL? Just head to your messages and in a message thread select the square icon with WWW.

Is this secure? How do you prevent spam?
Yes – we use SSL to secure every page. Furthermore, we verify the mobile number entered by the customer, and you can require a credit card for every booking.

Will visitors to my website need to download PocketSuite?
Nope! They can book you, pay you, and even chat with you having never downloaded the app.

Instructions by Webhost.
Click Embed Code and drag & drop block into page. Double click block, configure alignment, and then copy & paste widget code. Save and publish your page.

Click Add (+), select Apps, and select HTML, and set the Mode field to HTML code. Copy and paste the widget code into the HTML / embed code field. Move the field around as you see fit. Because the HTML code block is absolutely positioned using an IFRAME (as opposed to displayed inline on the page), ensure that the field size in the bottom right corner has a minimum size of 404 x 644. Save and publish your page.

Go to the Builder section and select Custom HTML (usually under the Other category). Drag and drop it to the section of the page where you want the button to appear. Double click the Custom HTML field on your page then paste the widget code into this field. Save and publish your page.

Select a space on the page where you want to add the widget, tap ‘+’ to select a component to add, and select Code. In the Edit Code dialog tap on the settings icon in the URL field to open the Edit Code Data field. Copy and paste the widget code into this field. Save and publish your page.

WordPress (or Custom Design)
Copy and paste widget code into location on page where you want the booking widget to Appear.

Still have questions about how to install your widget or anything else?
Feel free to contact us anytime at or text us on PocketSuite.

Have more questions? Submit a request