[Tutorial]Embed Office documents and PDF files on a website

Embed a Word document or PowerPoint presentation

An embedded Word document of a ski sale flyer	An embedded PowerPoint presentation of a flower show

To embed a Word 2013 document or PowerPoint 2013 presentation, there are three steps involved: upload the document to a library, generate the embed code, and then add the embed code to a web page.

Step 1: Upload the document or presentation to a library

   

1. On your website, click Settings  and choose Site contents.
2. Click Site Assets, Documents library, or create a new library by clicking add an app. You can also use a library in a team site.
3. To add the document to the library, drag and drop the document or presentation directly onto the screen, where it says drag files here, as shown here.
   

 NOTE    If you don’t see the option to drag and drop files, install the latest version of your browser software. This feature requires the latest version of Internet Explorer, Firefox, or Chrome.

As an alternative to using drag and drop, click New Document, choose Upload Existing File, and click Browseto locate the document.

4. You can also click Upload files using Windows Explorer instead and drag and drop files using Windows Explorer.
    
   
   
    NOTE    This option requires the Internet Explorer browser and when signing in, select Keep me signed in.
5. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
6. To create a publicly accessible file that does not require credentials, in the Share dialog box, type Everyone in the Invite People box, select Can view from the dropdown menu, clear the Require sign-in check box,and then click Share.

Step 2: Generate the embed code

   

1. Click the Share dialog box again, click a guest link, in the View Only box copy the URL, and then clickClose.
2. Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.
3. In the Word Web App or PowerPoint Web App, click File > Share > Embed.
4. Preview the document or presentation in the preview box.
5. Do one of the following:

PowerPoint

1. Under Dimensions, select a dimension (measured in pixels as Width x Height).
2. Click Interaction. If your presentation is set to automatically play and you want that to occur on your web page, select Use default autoadvance settings from the file. For example, you could use a presentation as an ad rotator.

Word

1. Under Dimensions, specify a width and height (measured in pixels)   .
2. Click Interaction, select the options you want, and then click the menu in the bottom right corner of the Preview box to confirm your selection.

6. When you are done choosing the Embed options, click in the Embed Code box to select all the code, and press CTRL+C. I If your browser prompts you to allow access to your Clipboard, click Allow access.
7. Click Close.
8. Close the browser tab or window you opened in step 2.

Step 3: Add the embed code to a web page

   

1. Browse to the page where you want to add the document or presentation.
2. Click the Page tab, and then in the Edit group, click Edit.
3. Place your cursor on the page where you want the embedded document or presentation to appear.
4. Click the Insert tab, and then under Embed, click Embed Code.
5. In the Embed dialog box, press CTRL+V to paste the code, and then click Insert.
6. To customize the embed code, click Edit Snippet at the bottom of the frame. For example, you might want to adjust the height and width of the frame.
7. When finished customizing the page, click Save or Save and Publish.

 TOP OF PAGE

Embed an Excel workbook

Although the Embed feature is not available in Excel Web Apps within Office 365, it is available from SkyDrive. If you don’t already have a SkyDrive account, consider getting one, as they are free, easy to use, and provide supplementary storage. You can create public folders for easy access to embedded content. Find more information about SkyDrivehere.

To embed an Excel 2013 workbook, there are three steps involved: upload the workbook to a public folder in SkyDrive, generate the embed code, and then add the embed code to a web page.

An embedded Excel workbook of mortgage comparisons

Step 1: Upload the Excel workbook to a SkyDrive public folder

   

1. Navigate to your SkyDrive site at SkyDrive.com.
2. To create a public folder, create a folder, select the folder, click Sharing, click Get a link, click Make Public, and then click Done.
3. On the SkyDrive page, click Upload near the top of the page, and then upload your workbook to the public folder.
   

Step 2: Generate the embed code

   

1. In SkyDrive, right-click the workbook, click Embed, and then click Customize how this embedded workbook will appear to others.
   
2. In the What to show box, click what you want to show on your page. Show the entire workbook, or show a chart, a named range, PivotTable, or table. For information about named ranges and named items in Excel workbooks, see Define and use names in formulas.
3. In the Appearance section, check the boxes for the options you want.
4. In the Interaction section, choose how you want to allow people to interact with the workbook.

• If you allow sorting and filtering, website visitors will be able to sort, filter, and expand or collapse the tables or PivotTables in the workbook.
• If you allow typing, changes people make in the cells will not be saved in the original workbook. For example, if you embed a mortgage calculator, you might want to enable typing so that people can fill out the loan term, loan amount, and other variables.
• If you want to specify a cell to be selected when the blog page opens, select the Always start with this cell selected check box, and then click the cell you want in the preview.

5. In the Dimensions section, type a width and height for the viewer in pixels. To see how the viewer will look at the dimensions you’ve specified, click View actual size, at the top of the preview.
   
    NOTE    You can specify a minimum of 200 by 100 pixels and a maximum of 640 by 655 pixels. If you want to use dimensions outside those limits, you can change the code after you paste it into the page. For more information, see, “Change the size of the frame” in Customize how your Excel workbook is embedded.
6. When you are satisfied with the preview, click Copy. If your browser prompts you to allow access to your Clipboard, click Allow access.

Step 3: Add the embed code to the web page

   

1. Browse to the page on your website where you want to add the document or presentation.
2. Click the Page tab, and then in the Edit group, click Edit.
3. Place your cursor on the page where you want the embedded document or presentation to appear.
4. Click the Insert tab, and then under Embed, click Embed Code.
5. In the Embed dialog box, press CTRL+V to paste the code, and then click Insert.
6. To customize the embed code, click Edit Snippet at the bottom of the frame. For example, you might want to adjust the height and width of the frame.
7. When finished customizing the page, click Save or Save and Publish.

 TOP OF PAGE

Embed a Visio diagram

You can display a Visio diagram in the Microsoft Visio Viewer for site visitors. The Visio Viewer has many ease-of-use features, including, panning, zooming, and page navigation, and is a free download. For more information, seeDownload Microsoft Visio Viewer.

Although there is no automatic way in Office 365 to generate embedded HTML code for a Visio diagram, it’s easy to create your own. Furthermore, there are several Microsoft Visio Viewer parameters that help you control the diagram behavior inside the Visio Viewer on your web page. For more information, seeEmbed a Visio Viewer Control in a Web Page.

To embed a Visio diagram by using the Visio Viewer there are two steps involved: upload the diagram to a library, and then add the embed code to a web page.

Step 1: Upload the Visio diagram to a library

   

1. On your website, click Settings  and choose Site contents.
2. Click Site Assets, another library, or create a new library by clicking add an app. You can also use a library in a team site.
3. To add the document to the library, drag and drop the diagram directly onto the screen, where it says drag files here, as shown here.
   

 NOTE    If you don’t see the option to drag and drop files, install the latest version of your browser software. This feature requires the latest version of Internet Explorer, Firefox, or Chrome.

As an alternative to using drag and drop, click New Document, choose Upload Existing File, and click Browseto locate the document.

4. You can also click Upload files using Windows Explorer instead and drag and drop files using Windows Explorer.
    

 NOTE    This option requires the Internet Explorer browser and when signing in, select Keep me signed in.

5. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
6. To create a publicly accessible file that does not require credentials, in the Share dialog box, type Everyone in the Invite People box, select Can view from the dropdown menu, clear the Require sign-in check box,and then click Share.

Step 2: Add the embed code to a web page

   

1. Browse to the page where you want to add the document or presentation.
2. Click the Page tab, and then in the Edit group, click Edit.
3. Place your cursor on the page where you want the embedded document or presentation to appear.
4. Click the Insert tab, and then under Embed, click Embed Code.
5. In the Embed dialog box, enter the embed code by using the OBJECT HTML tag. It’s a good idea to add a link to the download URL for those who do not have it installed. For visitors who cannot view the diagram, you can display instructions by inserting them inside the OBJECT HTML tag. For example:

<object width="50%" height="50%"
classid="clsid:279d6c9a-652e-4833-befc-312ca8887857">
<param name="ScrollbarsVisible" value="0">
<param name="BackColor" value="11403055">
<param name="src" value=" https://MyBiz.com/SiteAssets/northamericamap.vsd">
<param name="PagetabsVisible" value="0">
<param name="zoom" value="-2">
<p>To view this Visio diagram, you need Internet Explorer 8.0
or later, Windows 7 or later, and the Microsoft Visio Viewer installed on your
device. After downloading the Visio Viewer, you need to restart Internet Explorer.
<a href="http://www.microsoft.com/en-us/download/details.aspx?id=35811">
Download Visio Viewer</a>. </p>
</object>

6. Click Insert.
7. To customize the embed code, click Edit Snippet at the bottom of the frame. For example, you might want to adjust the height and width of the frame.
8. When finished customizing the page, click Save or Save and Publish.

 TOP OF PAGE

Embed a PDF file

There are two ways to embed a PDF file: by using Word Web App and by using the Adobe PDF Reader.

• You can open a PDF file by using Word Web App. This way, you can embed a PDF file for visitors who do not have the Adobe PDF reader installed on a device. For more information, see PDFs open in Word Web App for viewing, printing, and editing.
• You can open a PDF file by using the Adobe PDF Reader. The Adobe PDF Reader, which is an ActiveX Control, provides a toolbar, a navigation window, and additional functionality including printing and e-mailing the document.

Embed a PDF file to open in Word Web App

An embedded PDF file of a product catalog displayed in Word Web App

To embed a PDF file by using word Web App there are three steps involved: upload the PDF file to a library, generate the embed code, and then add the embed code to a web page.

Step 1: Upload the PDF file to a library

   

1. On your website, click Settings  and choose Site contents.
2. Click Site Assets, another library, or create a new library by clicking add an app. You can also use a library in a team site.
3. To add the document to the library, drag and drop the PDF file directly onto the screen, where it says drag files here, as shown here.
   

 NOTE    If you don’t see the option to drag and drop files, install the latest version of your browser software. This feature requires the latest version of Internet Explorer, Firefox, or Chrome.

As an alternative to using drag and drop, click New Document, choose Upload Existing File, and click Browseto locate the document.

4. You can also click Upload files using Windows Explorer instead and drag and drop files using Windows Explorer.
    

 NOTE    This option requires the Internet Explorer browser and when signing in, select Keep me signed in.

5. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
6. To create a publicly accessible file that does not require credentials, in the Share dialog box, type Everyone in the Invite People box, select Can view from the dropdown menu, clear the Require sign-in check box,and then click Share.

Step 2: Generate the embed code

   

1. Click the Share dialog box again, click a guest link, in the View Only box, copy the URL, and then clickClose.
2. Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.
3. In the Word Web App, click File > Share > Embed.
4. Preview the PDF file in the preview box.
5. Do the following:
1. Under Dimensions, specify a width and height (measured in pixels)   .
2. Click Interaction, select the options you want, and then click the menu in the bottom right corner of the Preview box to confirm your selection.
6. When you are done choosing the Embed options, click in the Embed Code box to select all the code, and press CTRL+C. If your browser prompts you to allow access to your Clipboard, click Allow access.
7. Click Close.
8. Close the browser tab or window you opened in step 2.

Step 3: Add the embed code to a web page

   

1. Browse to the page where you want to add the document or presentation.
2. Click the Page tab, and then in the Edit group, click Edit.
3. Place your cursor on the page where you want the embedded document or presentation to appear.
4. Click the Insert tab, and then under Embed, click Embed Code.
5. In the Embed dialog box, press CTRL+V to paste the code, and then click Insert.
6. To customize the embed code, click Edit Snippet at the bottom of the frame. For example, you might want to adjust the height and width of the frame.
7. When finished customizing the page, click Save or Save and Publish.

 TOP OF PAGE

Embed a PDF file to open in Adobe PDF Reader

An embedded PDF file of a product catalog displayed in PDF Reader

Although there is no automatic way in Office 365 to generate embedded HTML code for a PDF file, it’s easy to create your own. Furthermore, there are several PDF file parameters that help you control the document behavior inside the frame on your web page. For more information, see Parameters for Opening PDF Files.

To embed a PDF file by using PDF Reader there are two steps involved: upload the PDF file to a library, and then add the embed code to a web page.

Step 1: Upload the PDF file to a library

   

1. On your website, click Settings  and choose Site contents.
2. Click Site Assets, another library, or create a new library by clicking add an app. You can also use a library in a team site.
3. To add the PDF file to the library, drag and drop the diagram directly onto the screen, where it says drag files here, as shown here.
   

 NOTE    If you don’t see the option to drag and drop files, install the latest version of your browser software. This feature requires the latest version of Internet Explorer, Firefox, or Chrome.

As an alternative to using drag and drop, click New Document, choose Upload Existing File, and click Browseto locate the document.

4. You can also click Upload files using Windows Explorer instead and drag and drop files using Windows Explorer.
    

 NOTE    This option requires the Internet Explorer browser and when signing in, select Keep me signed in.

5. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
6. To create a publicly accessible file that does not require credentials, in the Share dialog box, type Everyone in the Invite People box, select Can view from the dropdown menu, clear the Require sign-in check box,and then click Share.

Step 2: Add the embed code to a web page

   

1. Browse to the page where you want to add the document or presentation.
2. Click the Page tab, and then in the Edit group, click Edit.
3. Place your cursor on the page where you want the embedded document or presentation to appear.
4. Click the Insert tab, and then under Embed, click Embed Code.
5. In the Embed dialog box, enter the embed code by using the OBJECT HTML tag. For example:

To use default values for all PDF file parameters

<object width="610" height="400" type="application/pdf" data="https://MyBiz.com/SiteAssets/MyEmbedFiles/MyCatalog.pdf"></object>

To zoom the page to 50%, start at page 4, and fit the page to the border width

<object width="500" height = "300" " type="application/pdf" data="https://MyBiz.com/SiteAssets/MyCatalog.pdf#page=4&zoom=50&view=FitH”></object>

6. Click Insert.
7. To customize the embed code, click Edit Snippet at the bottom of the frame. For example, you might want to adjust the height and width of the frame.
8. When finished customizing the page, click Save or Save and Publish.

 TOP OF PAGE