Embed Office documents and PDF files on a website

An embedded PowerPoint presentation of a flower show 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.

What do you want to do?


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:

  • Promotions, bonus material, and contests    You can attract interest and return visitors with creative items by displaying Word documents (calendars, coupons, training manuals, and flyers) and PowerPoint presentations (ad rotators, photo essays, animated product presentations, travel guides, and company overviews).
  • 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.

Top of Page Top of Page

Embed a Word document or PowerPoint presentation

An embedded Word document of a ski sale flyer An embedded PowerPoint presentation of a flower show
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 SharePoint Online Public Website Settings button 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.
    Drag and drop images to library

 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.

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

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

  2. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
  3. 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 click Close.
  2. Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.
  3. In the Word Online or PowerPoint Online, 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.
  1. 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.
  2. Click Close.
  3. 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 Top of Page

Embed an Excel workbook

Example of an embedded Excel workbook, a mortgage comparison 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 OneDrive here.

An embedded Excel workbook of mortgage comparisons

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

   
  1. On your website, click Settings SharePoint Online Public Website Settings button 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.
    Drag and drop images to library

 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.

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

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

  2. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
  3. 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 click Close.
  2. Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.
  3. In the Excel Online, click File > Share > Embed.
  4. right-click the workbook, click Embed, and then click Customize how this embedded workbook will appear to others.
    Embed command
  5. 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.
  6. In the Appearance section, check the boxes for the options you want.
  7. 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.
  1. 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.

  1. When you are satisfied with the preview, click Copy. If your browser prompts you to allow access to your Clipboard, click Allow access.

Configure options for embedding

  1. 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.
  2. Click Close.
  3. 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 Top of Page

Embed an Excel workbook by using OneDrive

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

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

   
  1. Navigate to your OneDrive site at OneDrive.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 OneDrive page, click Upload near the top of the page, and then upload your workbook to the public folder.
    Add files

Step 2: Generate the embed code

   
  1. In OneDrive, right-click the workbook, click Embed, and then click Customize how this embedded workbook will appear to others.
    Embed command
  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.
  1. 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.

  2. When you are satisfied with the preview, click Copy. If your browser prompts you to allow access to your Clipboard, click Allow access.

Configure options for embedding

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 Top of Page

Embed a Visio diagram

An embedded Visio diagram of North America 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

   
  1. On your website, click Settings SharePoint Online Public Website Settings button 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.
    Drag and drop images to library

 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.

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

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

  1. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
  2. 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>

  1. Click Insert.
  2. 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.
  3. When finished customizing the page, click Save or Save and Publish.

Top of Page Top of Page

Embed a PDF file

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

  • You can open a PDF file by using Word Online. 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 Online 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 Online

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

An embedded PDF file of a product catalog displayed in Word Online

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

   
  1. On your website, click Settings SharePoint Online Public Website Settings button 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.
    Drag and drop images to library

 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.

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

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

  1. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
  2. 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 click Close.
  2. Open a new browser tab or window, paste the URL in the address bar, and Press ENTER.
  3. In the Word Online, 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 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

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 SharePoint Online Public Website Settings button 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.
    Drag and drop images to library

 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.

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

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

  1. Click the ellipsis . . . next to the name to open the hover card, and then click Share.
  2. 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>

  1. Click Insert.
  2. 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.
  3. When finished customizing the page, click Save or Save and Publish.

Top of Page Top of Page

Learn more

See Public Website help for Office 365.

Top of Page Top of Page

 
 
Quyidagiga qo'llanadi:
SharePoint Online Website