Use the OneNote save dialog on your web pages

Learn how to use the OneNote save dialog, the quick and easy way to save web content to a OneNote notebook.

Last modified: January 22, 2016

Applies to: OneNote service

Note Note

See this topic on our new documentation site for consumer and enterprise OneNote APIs.

The OneNote save dialog provides web developers with an easy way to enable users to save web pages to their OneNote notebooks. All you need to do is embed a URL with the necessary parameters, and the save dialog does the work of authenticating and prompting the user to save a web page to OneNote.

You can preview the save page dialog by copying the following anchor tag into the HTML of your own web page and then clicking on the link. The dialog will save this page.

HTML
Copy 
<a href="https://www.onenote.com/clipper/save?sourceUrl=
http://msdn.microsoft.com/EN-US/library/dn800500(v=office.15).aspx&
imgUrl=http://antyapps.pl/wp-content/uploads/2013/09/onenote-logo-630x347.jpg&
title=Use the OneNote save dialog on your web pages&
description=Learn how to use the OneNote save dialog, the quick and easy way to save web content to a OneNote notebook.&
notes=Saving from MSDN."
onclick="window.open(this.href, 'targetWindow', 'width=525, height=525'); return false;">Try the OneNote save dialog</a>

You’ll need to authenticate with your Microsoft account. After you authenticate, you’ll see the dialog that appears in Figure 1.

Figure 1. The OneNote save dialog

The OneNote save dialog prompts the user

Select the notebook and section where you want to save the page and click the Save button.

We recommend that you launch the save dialog in a window whose dimensions are 525x525 pixels.

Also, if you’d like to create a button that uses the OneNote logo, see our Branding guidelines for OneNote API developers topic for guidance on how to design it.

The next section breaks down the URL used in the link and shows you how to construct your own URLs.

The base URL for launching the OneNote save dialog is https://www.onenote.com/clipper/save.

This is what a full URL looks like with placeholders for each of the query string parameters:

HTML
Copy 
https://www.onenote.com/clipper/save?sourceUrl=URL&imgUrl=URL&title=text&description=text&notes=text

The following table describes each of the query string parameters. Even though only the sourceUrl parameter is required, it’s a best practice to populate the imgUrl, title, and description parameters to ensure a good user experience.

Parameter

Description

sourceUrl (required)

The URL that points to the web page that you want to save. A screen shot of this page will be saved to a notebook and section that the user chooses.

imgUrl (recommended)

An image that appears in the upper left corner of the save dialog after the user has authenticated. This image should provide a preview of the web page or a visual cue that will help the user recognize and verify the page that is going to be saved. It doesn’t get saved to OneNote.

title (recommended)

The title of the page. This gets saved to OneNote.

Description (recommended)

A description of the web page to be saved. Like the image passed to the imgUrl parameter, this text should help the user recognize and verify the page. The text appears in the dialog and doesn’t get saved to OneNote. Any description text that exceeds 90 characters will be truncated.

notes (optional)

Notes about the web page to be saved. This prepopulates the text box in the dialog. The user can also add notes in the dialog before saving the page. Notes get saved to OneNote.

Show: