Website Booking Widget Instructions

 

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?

The widget is for you if you want to accept appointment or job requests over the Internet. If you have an online presence (website, social media, email) that you market to new or existing customers then the PocketSuite widget is for you.

Booking widget instructions:

Add the booking widget to your website using the following instructions (note your "USER ID" can be found in the instructions email you send yourself by going to Settings -> Online widgets > Booking, in the PocketSuite app)...

Insert the code snippet below anywhere inside the <body> of the page where you want the widget to appear:

<div id="ps-book" data-account="USER_ID"></div><script src="https://book.pocketsuite.io/static/javascript/widget.js"></script>

Advanced booking widget capabilities:

1) Service widget instructions:

Add the booking widget for a particular service to your website using the following instructions (note your "USER ID" can be found in the instructions email you send yourself by going to Settings -> Online widgets, in the PocketSuite app).

Insert the code snippet below anywhere inside the <body> of the page where you want the widget to appear:

<div id="ps-book" data-account="USER_ID" data-service="SERVICE NAME"> </div><script src="https://book.pocketsuite.io/static/javascript/widget.js"></script>

2) Dynamic category widget instructions:

Customize dynamic categories of services on a single widget if you'd like. You can do this by adding a "#[TERM]" in the description of the service within your PocketSuite app (Settings > Prices). For example you can add the keyword "#newclients" in the description of one or multiple services you save in PocketSuite. This will also support private services (services you choose to NOT show online on your primary widget) to show online. 

Insert the code snippet below anywhere inside the <body> of the page where you want the widget to appear:

<div id="ps-book" data-account="USER_ID" keyword="TERM"> </div><script src="https://book.pocketsuite.io/static/javascript/widget.js"></script>

You can also create a custom link as follows:

https://book.pocketsuite.io/book/USER_ID?keyword=TERM

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="https://book.pocketsuite.io/static/javascript/widget.js"></script>
https://book.pocketsuite.io/book/USER_ID?keyword=newclients

3) Multiple widgets instructions:

Add as many widgets to a web page as you want by including the DIV widget tag once for each widget and then including the SCRIPT tag after the last widget tag. Be sure to replace the “id” attribute with “class” since there are multiple elements on the page with the same “ps-book” identifier. Insert the code snippet below anywhere inside the <body> of the page where you want the widget to appear:

<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="https://book.pocketsuite.io/static/javascript/widget.js"></script>

Online form instructions:

Add the online widget to your website using the following instructions (note your "FORM ID" can be found in the instructions email you send yourself by going to Settings -> Online widgets > Forms/questionnaires, in the PocketSuite app).

Insert the code snippet below anywhere inside the <body> of the page where you want the widget to appear:
<div id="ps-book" data-form="FORM_ID"></div><script src="https://book.pocketsuite.io/static/javascript/widget.js"></script>

I don’t have a website. Can customers still book me online?

Yes, they can - just add the link to your booking widget or online form widget to your either your email or Facebook pages:

Your unique booking widget link: https://book.pocketsuite.io/book/USER_ID.
Booking widget (link to a service – add a service URL parameter with the service name with spaces replaced with hyphen as the parameter value): https://book.pocketsuite.io/book/USER_ID?service=name-spaces-replaced-with-hyphen
Online form https://book.pocketsuite.io/form/FORM_ID

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 we require a credit card to secure all reservations.

Will visitors to my website need to download PocketSuite?

No. All interactions between you and the client occur over text message, email, and the secure booking (or online form) web pages.

 

Instructions for Website Hosting Platforms

Weebly

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.

Wix

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.

Webs

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.

Squarespace

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 support@pocketsuite.io or text us on PocketSuite.