inTandem Mobile MenuinTandem Home




Sunday, February 16, 2014

How to Embed PowerPoint Presentations in Your Website

Categories: Web Design, How To

Have you ever created an excellent PowerPoint presentation that you would like to share with your customers via your website and ended up using a third-party slide sharing service? Wouldn't it be better if you could show your presentation as part of your actual web pages? And wouldn't it be even better if you could make changes to your presentation right from within PowerPoint on your own computer or even make it a collaborative task? Well, PowerPoint Web App will help you achieve all of the above.

What you need to get started:

  1. A free Windows Live account (also known as a Microsoft account).
  2. PowerPoint 2010 for best compatibility but PowerPoint 2003 will also do. On a Mac, it's PowerPoint for Mac 2011 or PowerPoint for Mac 2008 version 12.2.9.

Within your WindowsLive account, there is a facility called SkyDrive which is a free online file storage and sharing system offered by Microsoft with 7Gb of free storage to get you started. A little bit like GoogleDocs if you're familiar with that. Please note that due to a naming-rights dispute with Sky broadcasting (BSkyB), LiveDrive will soon be rebranded as OneDrive.

In essence, all you need to do is save your presentation to your documents folder of your SkyDrive and it can be embedded to your website from there. In PowerPoint 2010 and PowerPoint for Mac 2011, you can do this straight from within your programme by clicking on:

File -> Save & Send -> Save to Web (for Mac: File -> Share - Save to SkyDrive

Once your presentation has been uploaded to your SkyDrive, you can get your embedding code. Just browse to the presentation in your Documents folder, right-click on it and select " Embed".

Finally, drop your embedding code into your web-page. How you do that will depend on your content management system, but in MODX you just click on the Insert Video icon and drop in your code.

There you have it - your presentation is now nicely embedded in your web page. And if you need to make any changes to it (I am especially skilled at forgetting to insert a particular slide or spot a little typo at a late stage), you just need to open it on your computer, make your amendments, save and share it back to SkyDrive (no need to update the embedding code by the way, that's a once-off). All changes are automatically reflected in your in-site version.

Quick Tip No. 1: By default, any presentation you embed on your website can be downloaded by the viewer. There is no way to switch this off. If you don't want people to be able to get their hands on an editable version of your presentation, save it as a PowerPoint Show first (.ppsx) and then share this file instead.

Quick Tip No. 2: You are not bound by the default dimensions provided in the embedding code. As long as you stick to the same proportions, you can happily amend the height and width properties in the embedding code yourself (e.g. change from default 402/327 to 603/490 as I've done in the example above.

Quick Tip No. 3: If you have an older version of PowerPoint then you can still use SkyDrive to host your presentation and embed it into your website from there. You just can't upload it directly from within your PowerPoint application to SkyDrive but need to do it manually from your Windows Explorer/File Manager.

By Carolin Collins

Share this article:

Comments (4)

  1. SA:
    Jun 25, 2014 at 06:09 PM

    Once it's embedded, is the user able to click through slides at his/her own pace? And, equally importantly for my purposes, can they click on audio to play those when they choose? Or is the only option for those to play automatically?
    Thank you

  2. Admin User:
    Jun 25, 2014 at 06:20 PM

    Yes, users can click through the slides at their own pace by default. The demo presentation above is an actual live example. Only 2 slides but you can test-run how the user can interact with it, enlarge it to full screen size etc.

  3. Steve Stover:
    Feb 26, 2017 at 01:03 AM

    Once I get the embedding code and attempt to place it on my site, I do not have an Insert Video option, only a photo option. Where would I go to enter MODX?

  4. Admin User:
    Feb 27, 2017 at 10:51 AM

    Hi Steve - in my example above, I am using Redactor rich text editor extra (highly recommend it - but it's a commercial add-on you get from, so on a default MODX install using TinyMCE, you will need to use the Insert/Edit Embedded Media option (the little film strip icon). In the pop-up window change the Type to iframe and insert your code in there. Adjust dimensions from the default if you wish. Hope that works out for you.

Add a Comment

Allowed tags: <b><i><br>Add a new comment:

Web Analytics