All Systems Operational

Book 24/7 Website Widget Builder

How to add a "Book 24/7 Widget" to your website

 

Vagaro offers a booking or scheduling widget that can be added to a website outside of Vagaro so your customers can book, purchase gift certificates, read reviews, as well as buy products online. For directions on how to set up your online shopping cart go here -- Online Shopping Cart. The widget can be either embedded onto your website or placed as a pop-up window. You can use our Book 24/7 widget builder to do so.The Builder allows you to customize the Book 24/7 Widget to match the website you run outside of Vagaro.

Use the following steps to add our Book 24/7 Widget to your website:

Go to the "Marketing" --> "Book 24/7 Widget Builder". Once there, create your widget and then press on "Save and Generate Code" at the bottom of the page. This will create an HTML code that you can paste into your website.

 1.) Click on "Marketing" 

 

 Widget_Builder_1.png

 

2.) Click on "Book 24/7 Widget Builder"

 

Widget_builder_10.png

 

3.) Select a pre-designed Template or Click on any Template to customize.

 

booking_widget.png

booking_widget_2.png

 

The Edit Content Appearance tool will allow you to design the widget to your liking.You'll be able to change the button colors, font name, font colors, and background colors yourself in a way you would like them to appear within the widget to better match your webpage. When finished--> Click "Close"

 

Widget_Builder_5.png

 

Select "Save" to continue.

 

Set_Tax_Rates_5.png

 

 4.) Chose how the widget will be displayed on your website: Select "Popup Window", "In Your Website" or "New Window"--> Click next

Widget_Builder_6.png

5.) If "In a popup" is selected. Vagaro will list different 24/7 book buttons that you can chose from. When a customer clicks on the "Book 24/7" on your website, a popup window will appear and the client can book from the popup window.---> Click Next to proceed.

 

widget_builder_7.png

 

widget_builder_8.png

 

 

 

6.) Click "Copy Code", Then paste the code into your outside website.

 widget_builder_9.png

 

 

 

 

 

 

Have more questions? Submit a request

7 Comments

  • Avatar
    Jaclyn Scott-Kay

    This is not working, comes up as an error after choosing an icon! Has anyone else had this problem?

     

  • Avatar
    Shani Ayanna at Mayday Hair and Massage

    Same problem here, walk through the whole series of steps to get an error code within the embedded message.  Please resolve.

    <div style='width:840px; margin:0 auto;'><iframe id='frameVagaro' name='iframe' src='https://www.vagaro.com/Users/BusinessWidget.aspx?enc=MMLjhIwJMcwFQhXLL7ifVIVDXyomPJ3kTiHOM1bMRws7T5ob+9IXUd3n3LK4xLQWnyBJ7fh9QzUeTQ3A7OeezGlFpgRDK7gpUFXUk/3bANumfbjoNLbyZcyuVSVxSbLS' width='100%' height='31100' scrolling='auto' align='top' style='border:none'>This option will not work correctly. Unfortunately, your browser does not support inline frames.</iframe></div><div style='height:10px;'></div>

    I received this message with Chrome, Safari and Firefox

  • Avatar
    Skye

    We have a widget and it's working fine.  But I would like a way to have a link bring me to the gift certificates tab.  Also, We have a massage therapists and an esthetician.  I would like a way for a link to bring me to the middle of the page so if someone wants to book a facial they don't have to scroll through all the massage services to get there.  I guess I'm talking about an anchor.  Or having separate widgets for what I want to go to?

  • Avatar
    Susan Davis Ferrell

    Is there a way to change the code to vary the look of the widget? I don't care for the giant V. I have had many client not know that is the link because it looks like an external ad.

  • Avatar
    Kellie Campbell

    My web designer was receiving help through email and no one has responded to her last reply at agirlandhermac@gmail.com

    She was able to build the vagaro widget (pick the colors, fonts, etc) and it walked through to the end where it said to paste [vagaro_booking_widget]​ into the page, but the booking widget is not showing up on the page.​

    http://www.clearsolutionsacne.com/appointments/

  • Avatar
    Aidah Sama

    When using the embedded code why is it redirecting to another link from my mobile device? The whole point for embedding was to keep clients from dealing with a whole bunch of extra steps

  • Avatar
    Ultrasound Session

    Do you have a responsive version of either this widget or the Wordpress version? Also, I can't find anywhere that lists the WP shortcode options. Thanks!

Please sign in to leave a comment.
Powered by Zendesk