How to embed Keynote presentations in blogs and websites with the new iWork update for Mac and iOS

The latest updates to Apple’s iWork suite included a lot of new features; Keynote’s release notes included a line that was particularly eye-catching. Keynote 7.1 for Mac and Keynote 3.1 for iOS adds the ability to ‘Post interactive presentations on Medium, WordPress and other websites.’

This means you can put a Keynote document on a webpage in just the same way as you can embed a YouTube video. It certainly feels like an advanced feature targeted at iPad Pro as computer users. Unfortunately, the process to actually do this is not so straightforward, with some tricky edge cases about how it works. Read on to find out how to embed Keynote documents on a website or blog …

Keynote has included a related feature for a while, called Keynote Live. This allows presenters to send people to a web URL where they can watch a presentation take place in real-time with the host controlling slide changes, with all viewers kept in sync. However, the embed feature is not actually part of Keynote Live.

Instead, embedding is rolled into the iWork real-time collaboration system. This means it’s not the most intuitive feature to track down the right screen in the Keynote app’s interface.

To embed a Keynote document into a webpage, you first need to find the embed link which can be automatically detected by Medium, WordPress and other blogging platforms.

How to get the embed URL from within Keynote:

1. Open the Keynote presentation you want to embed.
2. Open the Collaborate With Others sharing panel. On macOS, this is exposed in the main toolbar, labeled Collaborate. On iOS, open the More view and then select ‘Collaborate With Others’ from the menu.
3. Then, select Share Options to configure the collaboration settings.
4. Select ‘Anyone with the link’ for the who can access settings and set the permissions as ‘View only’. Do not add a password.
5. Go back to the main pane and choose the Copy Link option. After a short delay (‘starting collaboration’) the embed URL will now be copied onto your clipboard.

That’s the first step, you have the (long, ungainly) embed URL ready to paste. Now, open your blogging CMS and use the Add Embed feature to include the presentation widget into the post.

For Medium bloggers, this is the ‘<>’ inline option next to the typing caret. Press ‘<>’, then paste in the Keynote URL and press Enter. A preview of the embed will appear in the document.

For WordPress, do not press the Add Embed toolbar button. Instead, simply paste the URL on a new line in the editor and the platform will replace the bare text with the rich embed automatically.

Here’s a real working example of a live Keynote embed (an economics presentation I made for university). Readers can click-through the slides, and zoom to full-screen, right from the web page without having to download anything. If you later update the keynote file on your machine, the changes will be reflected in all embeds — they are living documents.

The content is a faithful reproduction of what you see in the app but any interactivity, effects or transitions are not preserved in the embed.

https://www.icloud.com/keynote/0bLccPCcDBOGVv1iVJxQ-QEVA#Enron_and_Andersen_Presentation

The embed includes a prominent ‘Open in Keynote’ button which allows readers to open the document in the Keynote iCloud Web App or download the original file into a native app to see a 1:1 copy of the source presentation with all animations and interactivity intact. If you allow collaboration, then visitors to your site can update the document themselves and save those changes for everyone to see.

How do you embed a Keynote document into any arbitrary website? Apple’s release notes are phrased to imply that it isn’t really possible and you should only use this feature with their select partners. However, it is possible to get the raw <iframe> HTML code, thanks to a nifty utility made by David MacDonald.

Go to that website, paste the iCloud embed URL you found above into the text box and press Generate. It will fetch the raw <iframe> code, which can then be used anywhere you paste HTML …

One note about Keynote embeds is that the Collaborate With Others sharing must be kept enabled forever. If you disable collaboration, Apple will invalidate the public URL and the embeds will stop working.

Get started with presentation embeds by downloading Keynote for Mac and Keynote for iOS from the App Store.