Embed Office documents and PDF files on a website

Once you have created the basic structure, style, and navigation of your Public Web Site, you often want to add content to it because many customers and site visitors look for richer and more compelling information.

Although you can create downloads, a more powerful method is to embed Word documents, PowerPoint presentations, Excel workbooks, Visio diagrams, or PDF files, so site visitors can view the contents inline on the page.

Learn how embedding content can boost your business

Embedding means displaying information directly on a web page by using an <IFRAME> or <OBJECT> HTML tag. The content is immediately viewable, but usually resides in another location. Embedding is surprisingly easy to do. In many cases, you can automatically generate the HTML code, and then just add it to a web page. By embedding content, you can make your website look even more professional and further promote your business.

Furthermore, once you embed the document on your web page, you don’t need to update the page to update the content. For example, if you embed a workbook and then make changes, they are displayed on the web page when it’s refreshed or opened.

Here are a few examples of embedding Office documents and PDF files that can enrich your website and make it more popular, attractive, and interesting:

Lists of inventory-clearance items, last-minute travel tours, and other real-time data You can embed Excel spreadsheets (with tables, charts, and slicers) that visitors can filter, sort, and interact with, such as most popular sales items, current inventories, and savings calculators.

Diagrams, flow charts, maps, and posters, and colorful displays By using the Microsoft Visio Viewer, you can embed Visio diagrams that site visitors can see in a high quality rendering. They can also easily pan, zoom, and navigate the diagram.

Instruction manuals, user guides, brochures, and comparison guides Some products and services require some additional consideration and planning, such as color coordination and personalized treatment. Customers welcome guidance on making the right choices before and after purchasing items. By embedding Office documents and PDF files, visitors can immediately see the content, find what they are looking for, and may not even need to download the document.

Tip Browse Microsoft Office Templates to get more ideas about using Word documents, PowerPoint presentations, Excel workbooks, and Visio diagrams along with samples and downloads.

Click the ellipsis . . . next to the name to open the hover card, and then click Share.

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-incheck box, and then click Share.

Step 2: Generate the embed code

Click the Share dialog box again, click a guest link, in the View Only box copy the URL, and then click Close.

Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.

In the Word Online or PowerPoint Online, click File > Share > Embed.

Preview the document or presentation in the preview box.

Do one of the following:

PowerPoint

Under Dimensions, select a dimension (measured in pixels as Width x Height).

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

Under Dimensions, specify a width and height (measured in pixels).

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.

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.

Click Close.

Close the browser tab or window you opened in step 2.

Step 3: Add the embed code to a web page

Browse to the page where you want to add the document or presentation.

Click the Page tab, and then in the Edit group, click Edit.

Place your cursor on the page where you want the embedded document or presentation to appear.

Click the Insert tab, and then under Embed, click Embed Code.

In the Embed dialog box, press CTRL+V to paste the code, and then click Insert.

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.

Embed an Excel workbook

There are two ways to embed an Excel workbook: by using the public web site and by using OneDrive.

You can embed an Excel workbook in a way similar to a Word document or a PowerPoint presentation where the file is located in the Site Assets library.

You can also embed an Excel workbook from OneDrive. You might find this useful when the workbook is already located on OneDrive and you don’t want to or need to move it.

Tip If you don’t already have a OneDrive 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 OneDrivehere.

Embed an Excel workbook by using the public website

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

Step 1: Upload the workbook to a library

On your website, click Settings and choose Site contents.

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.

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 Browse to locate the document.

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

Click the ellipsis . . . next to the name to open the hover card, and then click Share.

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-incheck box, and then click Share.

Step 2: Generate the embed code

Click the Share dialog box again, click a guest link, in the View Only box copy the URL, and then click Close.

Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.

In the Excel Online, click File > Share > Embed.

right-click the workbook, click Embed, and then click Customize how this embedded workbook will appear to others.

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.

In the Appearance section, check the boxes for the options you want.

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.

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.

To create a public folder, create a folder, select the folder, click Sharing, click Get a link, click Make Public, and then click Done.

On the OneDrive page, click Upload near the top of the page, and then upload your workbook to the public folder.

Step 2: Generate the embed code

In OneDrive, right-click the workbook, click Embed, and then click Customize how this embedded workbook will appear to others.

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.

In the Appearance section, check the boxes for the options you want.

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.

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.

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

Browse to the page on your website where you want to add the document or presentation.

Click the Page tab, and then in the Edit group, click Edit.

Place your cursor on the page where you want the embedded document or presentation to appear.

Click the Insert tab, and then under Embed, click Embed Code.

In the Embed dialog box, press CTRL+V to paste the code, and then click Insert.

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.

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, see Download 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, see Embed 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

On your website, click Settings and choose Site contents.

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.

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 Browse to locate the document.

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

Click the ellipsis . . . next to the name to open the hover card, and then click Share.

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-incheck box, and then click Share.

Step 2: Add the embed code to a web page

Browse to the page where you want to add the document or presentation.

Click the Page tab, and then in the Edit group, click Edit.

Place your cursor on the page where you want the embedded document or presentation to appear.

Click the Insert tab, and then under Embed, click Embed Code.

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:

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 Online

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

To embed a PDF file by using Word Online 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

On your website, click Settings and choose Site contents.

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.

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 Browse to locate the document.

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

Click the ellipsis . . . next to the name to open the hover card, and then click Share.

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-incheck box, and then click Share.

Step 2: Generate the embed code

Click the Share dialog box again, click a guest link, in the View Only box, copy the URL, and then click Close.

Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.

In the Word Online, click File > Share > Embed.

Preview the PDF file in the preview box.

Do the following:

Under Dimensions, specify a width and height (measured in pixels).

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.

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.

Click Close.

Close the browser tab or window you opened in step 2.

Step 3: Add the embed code to a web page

Browse to the page where you want to add the document or presentation.

Click the Page tab, and then in the Edit group, click Edit.

Place your cursor on the page where you want the embedded document or presentation to appear.

Click the Insert tab, and then under Embed, click Embed Code.

In the Embed dialog box, press CTRL+V to paste the code, and then click Insert.

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.

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

On your website, click Settings and choose Site contents.

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.

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 Browse to locate the document.

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

Click the ellipsis . . . next to the name to open the hover card, and then click Share.

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-incheck box, and then click Share.

Step 2: Add the embed code to a web page

Browse to the page where you want to add the document or presentation.

Click the Page tab, and then in the Edit group, click Edit.

Place your cursor on the page where you want the embedded document or presentation to appear.

Click the Insert tab, and then under Embed, click Embed Code.

In the Embed dialog box, enter the embed code by using the OBJECT HTML tag. For example:

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>

Click Insert.

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.