How to embed your HTML5 presentation into a website or blog

Do you want to embed a PowerPoint presentation into your website? The best way is to convert it to HTML5 format. A great advantage of HTML5 presentations is that they can be viewed on virtually any PC or mobile device, including iPads. In this article you will learn two ways to insert a PowerPoint presentation in your website or blog:

  1. to use presentation sharing sevice
  2. to convert a PPT presentation to HTML5, upload it to FTP and embed via JavaScript or iframe.

Are there easier alternatives?

Before getting down to actually following the instructions, you should be aware that there is a much easier alternative. You can always choose to use iSpring Cloud, a handy presentation sharing service that automatically converts your PowerPoint and instantly generates an embed code:

Screenshot of embed code in iSpring

Once you copy the embed code from iSpring, paste it into your website’s HTML code.

Example of a Presentation on iSpring Cloud

To make sure it does the work that you want it to, you can start a free trial of iSpring Cloud, upload a presentation and see for yourself. Besides embedding presentations, iSpring Cloud allows you to share them by email, social media, or shortlink.

Did you know that you can use PowerPoint hyperlinks to create the navigation of your presentation? iSpring Converter Pro greatly supports hyperlinks and also provides advanced navigation and branching features.

HTML5 presentations created with iSpring Converter Pro can be published and inserted into a website in three simple steps:

  1. Publish HTML5 presentation for uploading to Web
  2. Get presentation’s URL on the server
  3. Insert your HTML5 presentation into a website

Step 1: Publishing presentation for uploading to Web

After your PowerPoint is ready for converting to HTML5, you can publish and put the presentation on a website using the Publish button on the iSpring toolbar. Choose one of the following ways of publishing:

a) Publish to My Computer

Select the Web option. You can choose a local folder for the HTML5 presentation, where a new folder with the specified file name will be created. Then click Publish.

Publish HTML5 presentation to My Computer

Once the publishing process is complete, you need to upload the entire folder of the specified file name to the server.

b) Publish straight to FTP

Follow the instructions above for publishing to your computer. After the publishing process is complete, the Presentation Preview window will open. Select the option Upload to FTP to publish straight to the server. You need to specify your FTP account information and enter the folder name.

Publish HTML5 presentation to FTP

Step 2: Getting presentation’s URL

You need to find out the HTTP URL of the uploaded HTML5 presentation and copy the URL to clipboard. The URL of the presentation depends on the specific settings of your server.

Tip: Make sure that the selected URL starts with ‘http://’ and not ‘ftp://’

Step 3: Inserting your HTML5 presentation into a website

To have your PowerPoint presentation logically fit into a website, you can choose one of the following ways to play it:

  • play on a separate webpage;
  • open in a pop-up;
  • insert into an iframe.

a) Play HTML5 Presentation on a Separate Webpage

One of the easiest ways to share your presentation via a website is to provide a hyperlink to the presentation somewhere in a webpage. To insert a hyperlink, switch to the HTML editing mode and use the following code:

<a title="CUSTOM TITLE OF THE LINK" href=”ENTER YOUR URL” target=”_blank”> CUSTOM TEXT OF THE  HYPERLINK</a>  

You can choose to open the presentation in a new browser tab (target=”_blank”) or in the same tab (target=“_self”)

b) Open HTML5 Presentation as a pop-up

To open your presentation in a pop-up window, make sure that your website allows using JavaScript code.

You can use the following code to create an on-click pop-up:

<script>  function popup(url)  {
     window.open(url, 'new', 'width=800,height=600,scrollbars=no,menubar=no,status=no,toolbar=no');
 }
 </script>
 <a onClick="popup('http:// ENTER YOUR URL ')">CUSTOM TEXT OF THE HYPERLINK</a>  

You can customize the width and height and add different elements to your pop-up (learn more).

Alternatively, you can set the pop-up window to appear as soon as the webpage is loaded:

<script>  function popup(url)  {
     window.open(url, 'new', 'width=800,height=600,scrollbars=no,menubar=no,status=no,toolbar=no');
 }
 popup('http://ENTER YOUR URL');
 </script>
 

c) Insert HTML5 presentation into iframe

If you want to show your HTML5 presentation right within your webpage, you can insert it into an iframe using the following HTML code (learn more):

<iframe src="http://ENTER YOUR URL" width="800" height="600" scrolling=”no” />

Published on your website in one of the described ways, your HTML5 presentation can be delivered to much wider audiences using modern Web browsers, mobile devices and iPads. To make sure that your HTML5 presentation will be played back properly, check out iSpring Converter’s tech specs.