notesnook/docs/help/contents/web-clipper/clipping-your-first-web-page-with-web-clipper.md

title, description

title	description
Clipping your first webpage with web clipper	Clip web pages & save interesting things you find on the web with Notesnook web clipper in a private & secure way.

Clipping your first webpage with web clipper

Connecting the with the web app

Before you can clip pages, you must connect the web clipper with the Notesnook web app. The web clipper works completely offline and relies on the web app to sync & save your clips.

1. Activate the web clipper by clicking on the Notesnook icon in your browser toolbar

   info Pin the Notesnook Web Clipper to toolbar

   Modern browsers group all extensions under their Extensions dropdown by default. It is recommended that you Pin to toolbar the Notesnook Web Clipper.

   Chrome

   

   Firefox

   

   ---

2. Click on Connect to Notesnook

3. Notesnook web app will open in a new tab in the background. Wait a few seconds and the web clipper should automatically connect.

   error What to do if the web clipper doesn't connect?

   There are a few things you can do to troubleshoot:

   1. Make sure you are logged in on the Notesnook web app
   2. Make sure you have the Notesnook web app opened in the background
   3. The web clipper doesn't yet support multiple browser windows so make sure there aren't any additional browser windows opened in the background.
   4. Try restarting the browser

Selecting the clipping area

The web clipper provides a few options to help you clip exactly the part of the page you need:

Full page

The Full page mode clips the web page from top to bottom including every possible detail. This mode is also the largest in size & consequently takes longer to clip.

Article

The Article mode is best for blogs & articles on the web because it tries to finds the "content" part of the page using a couple of heuristics. It works similar to Firefox's Reader Mode.

Visible area

The Visible area mode clips only the nodes that fit in the viewport. Any nodes that are partially in the viewport are also included.

Selected nodes

The Selected nodes mode allows you to select exactly which nodes you want to clip:

1. Select the Selected nodes mode from the Notesnook Web Clipper
2. You should now see a small popup in the bottom-right corner of the page
3. Click on all the nodes you want to clip (they can be in any part of the screen).

   info

   The web clipper stacks all the selected nodes vertically during final processing.

4. Clicking again on the selected nodes will deselect them.
5. Once you are done, click on the Clip button
6. Activate the Notesnook Web Clipper and save your clip.

Selecting the clipping mode

The clipping mode controls how the final clip should look.

Simplified

Simplified mode doesn't include any styles. It is best suited for long-form content such as articles & blogs. All clips in Simplified mode are saved directly as is i.e. they do not appear as web clip embeds in the Notesnook editor.

Screenshot

info Pro users only

Screenshot mode is only available to Pro users

Screenshot mode includes all the styles + images but the final result is saved as an image i.e. it is non-interactive.

Complete with styles

info Pro users only

Complete with styles mode is only available to Pro users

Complete with styles mode saves all images, styles & everything on the page to retain the maximum amount of information. The final result appears as an embed in the Notesnook editor which is full interactive.

Organizing your web clip

Notesnook Web Clipper offers 3 easy ways to organize your web clips (all of which are completely optional):

Append to note

You can choose to append your web clip to an existing note and it'll be automatically added at the bottom of that note:

1. Click on Select a note to append to
2. Select the note you want to append to

Add to notebook

info

You can only assign the web clip to an existing notebook. Creating new notebooks is not supported from inside the web clipper.

1. Click on Select a notebook
2. Select the notebook you want to add the web clip to

Assign tags

1. Click on Assign a tag
2. Select the tag you want to assign (you can assign multiple tags)
3. You can also create & assign a new tag by typing in the search bar

---

Saving your web clip

1. Click on the Save button to save & sync your web clip.