I'm struggling to embed a Microsoft Bookings iFrame - can anyone help?

Site URL: https://www.sdrretail.com/get-in-touch

Microsoft offers an appointment booking service (who knew??) that comes with the option to embed an iFrame. I'd love to embed into my Squarespace site, but I'm not able to get the code to work (other than inserting a hyperlink, which I can already easily do with a Squarespace link or button).

Is anyone able to give me some help? Here is the source site with the booking request capability. Below is the iFrame Embed code that they provide. I just don't know exactly what to do with it to try to get it embedded into a Squarespace page...

<iframe src='https://outlook.office365.com/owa/calendar/SDRRetailConsulting@sdrretail.com/bookings/' width='100%' height='100%' scrolling='yes' style='border:0'></iframe>

you can just drop that iframe code into a Code block on squarespace.

If it's not working it's probably because you haven't published your calendar in office 365 so that it can be made available publicly (the link you've provided doesn't work for unauthenticated users). once you've published it you can test if it's working by opening an incognito/private browser window and try to access your link. after that the embed should work.

Aha! Thank you, @iamdavehart. Changing publishing settings on the Microsoft side worked. 

I've had to inject some code to increase the height of the code block, but I'm still noticing that the booking page is a little wonky on display/visual formatting. Would you happen to know if there's a way to scale/manage this?

Here is a test page and all of the code I've embedded. If you look on desktop and mobile, you can see that they've both got slightly different display problems.

Page Code Block

<iframe src='https://outlook.office365.com/owa/calendar/SDRRetailConsulting@sdrretail.com/bookings/' width='100%' height='100%' scrolling='yes' style='border:0'></iframe>

Design --> Custom CSS

/*get in touch-booking height*/
div#block-yui_3_17_2_1_1640180076625_3008 iframe {
    height: 2400px !Important;
}

Thank you again! And no worries if you don't have an answer or it's too time consuming!

you'll have to be a bit more specific about what looks "wonky" in each case, as it looks ok to me. maybe you mean the way the embedded calendar fills the code block? there's not much you can do within squarespace to change how the calendar looks *inside* the iframe, you'd have to do that in whatever embedding options Microsoft give you. 

There is a 17px padding in the code block you could get rid of if you wanted, just target that block in the css and set the padding to 0, that's about all I can see might be wrong.

Hi there, I found a similar issue with publishing my Microsoft bookings page. I have made it public but when I embed the iframe into Squarespace site, it says bad request. 

56 minutes ago, JamesBigSkies said:

I found a similar issue with publishing my Microsoft bookings page.

Please provide a link to the page on your site so forum users can see the issue.

If required, How to Post a Forum Question provides guidance on how to provide a link.