How can we help?

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. This is a great option if you want to seamlessly book clients on your own website.

bookonline-1.png

In this article:

 

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

 

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

Advanced Options:

#1 Change button colors

To change the color of the Book Now button and the label on the button, just use the hidden data-color and data-label attributes to specify a custom color and label respectively:

<div class="ps-book" data-book="phestherapies" data-color="#5CB85C" data-label="BOOK ONLINE"></div><script src="https://book.pocketsuite.io/static/javascript/widget.js"></script>

Additional guidance is below for those who would like to change both the button color and the button label color. The following CSS added to your web page will override both colors. Please note that, color below refers to the text color, and background-color refers to the button color. 

.ps-book .ps-btn > div {
    color: white;
    background-color: rgba(41,75,107,1);
}

 

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

#3 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=”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

 

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

 

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

FAQ

  1. What if I don't have a website?

    No website? No problem! Clients can book you using your online booking link. 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.

    • Your online booking link will look like:
      https://myps.io/book/USERNAME

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

      https://myps.io/book/USERNAME?service=service-name-spaces-replaced-with-hyphen

    • Your online form link will look:

      https://book.pocketsuite.io/form/FORM_ID


      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.

     

  2. 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.

  3. 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

  1. 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.

  2. 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.

  3. 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.

  4. 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.

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

*** Note: When copy and pasting this code, always ensure there are not "illegal" quotations and they display as straight up and down rather than slanted – if there's any doubt, please replace them with newly typed quotations from the keyboard. 

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.

Have more questions? Submit a request

Related articles

Powered by Zendesk