Vagaro Widget (Snippet)

Hello! I’m using a widget (snippet code) provided by Vagaro–a salon/fitness scheduling web-app. When using the widget that is supposed to work ON the website (embedded), it does not; rather, it takes me offsite. Vagaro support has nothing to offer help-wise, and they suggest troubleshooting with Rapidweaver developers.

The website/page is Bodyworks Youniversity | Pilates and Personal Training in Sewanee, TN | CLASSES
You can see it opens up white space down the page under the “BUY” button, but nothing in it.

Any clues?

Looks like you are getting some errors on the console.

Also, think part of the problem is that you are running unsecured(http://). The iFrame is requesting a secure page (https:// ). I don’t think browsers will allow mixing protocols any longer.

Looks like some of the code snippet needs to be in the head section, and other parts need to be in the body.

So my first step would be to change your site over to SSL. Theat will require you to get a certificate from your host. You would then need to convert the site to https… the certificate should be free. The conversion process will be a bit more involved.

You need to do this, anyway. You get a “Not secure” warning on every browser now. It doesn’t build consumer confidence when the first thing they see is a warning.

After that, you really need to let us see the snippet they sent you. Or give us a link on their site to a sample.

It hard for folks to help you if they have to dig though your site and try to separate what they gave you and what RW puts out.

On some browsers, you get nothing:

1 Like

Thank you, Doug, for your generous feedback! I will proceed to do the SSL stuff (I believe the host,, charges for it). Meanwhile, here is the snippet:

<div id='frameTitle' class='embedded-widget-title' style='font-size: 23px; color: #333;font-family:Arial, Helvetica, sans-serif; line-height:24px; padding: 18px 10px 8px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;'>Book Now</div><div class="vagaro" style="width:250px; padding:0; border:0; margin:0 auto; text-align:center;"><style>.vagaro a {font-size:14px; color:#AAA; text-decoration:none;}</style><a href="">Powered by Vagaro</a>&nbsp;<a href="">Salon Software</a>,&nbsp;<a href="">Spa Software</a>&nbsp;&amp;&nbsp;<a href="">Fitness Software</a><script type="text/javascript" src=""></script></div>


OK! Site’s been converted to SSL (https)… Code is above. Although it’s not yet working perfectly, I see a slight change in what’s displayed. I have found that it works well in Chrome, but not Safari… I wonder if I need to clear cache, etc.?

Looks like you are using MapSnap. It’s getting some JS errors. I don’t know if you are running the latest version or not? It’s no longer available and I don’t think it’s causing the main issue with Safari.

Chrome (and other chromium, based browsers) looks good, (I booked nothing). Firefox looks good as well.

It’s just WebKit (aka Safari) that’s giving you the issues.

I swear Safari is becoming the modern IE. They are getting so locked down.

Looks like Safari is blocking the frames from Vagaro:

Blocked a frame with origin "" from accessing a frame with origin "". Protocols, domains, and ports must match.

I don’t know what to tell you about this one. Since Vagaro is a paid service, I might contact their support folks for some help with it.

Address the Google maps error first, Support folks asr always looking for something to blame for their errors.

1 Like

After converting the site to HTTPS, and changing the .htaccess file, I think it’s working, thanks to your lead! I, too, have noticed that Safari is really getting less reliable. Surely, Apple wouldn’t stand for that for long…

To me, your generosity of shared knowledge is heroic. Thanks again for your time and insight that led me to a successful conclusion!


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.