Jump to content

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

Recommended Posts

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>

Link to comment
  • Replies 5
  • Views 5.7k
  • Created
  • Last Reply

Top Posters In This Topic

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.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment

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!

Link to comment

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.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
  • 2 years later...
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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.