I am trying to embed appointments to my web site, but the code is only generating a button.

[jeffgamble4]

I am trying to embed the appointments code to a custom page on my Zenfolio hosted web site. The Zenfolio instructions show an example of a Square-generated appointments screen embedded on a custom page. The code only seems to generate a button. The button then takes me to the Square appointment page for my business. Shouldn't the code for embedding generate the page on my web site, not just a button? Is it because I am using the free trial and haven't subscribed yet? Could it be a setting on the page I am embedding on? Any guidance would be much appreciated.

[Helen]

Hello there @jeffgamble4, welcome to the Seller Community! 

With Square Appointments you can add a booking button or you can embed the booking widget to your Zenfolio website. Being on a free trial does not limit your ability to do this!

To view the option to add a booking widget, navigate to the Online Booking section of your Appointments Dashboard and click Website Embed from the left hand side. From there you'll see layout options as well as code to add to your website.

I also recommend checking out this Support Center article which has the steps to embed the Appointments booking widget. This Community post also shows website embedding in action though with other websites, not Zenfolio unfortunately! 

[mobilebrett]

We have the embed code added onto a static HTML page and it's having the same issue with only showing a button. It creates the sized box element where the online booking tool should go, but just displays the "book an appointment" button.

We've looked into the rendered source code and it's creating the iframe all of the nesting divs etc. but then only drawing out the button. No other errors are logged in the console or anything.

Please advise.

[EJ_]

Hi @mobilebrett

I spoke with our Appointments team and they informed me that this usually happens when there's something on the site that's preventing the widget from expanding. When there's not enough room, it will display only display a booking button.