• Pricing
  1. Home
  2. Embed PDF
  3. How To Embed PDF
  4. How To Add a PDF Icon to HTML
embed-pdf-html@2x

How To Add a PDF Icon to HTML

by Christina Harker

You can also read this article in German, Spanish, French, Italian, Portuguese and Russian.

Help your site’s visitors access your shared PDFs easily with an embedded PDF icon that takes them straight to the PDF to view, edit, and annotate.

The embedded Smallpdf icon makes it easy for your readers to immediately access your PDF—be it a form, information material, or any other downloadable resource. They can read, fill out, and even add notes. The best part is that they won’t have to download anything to do this at all! They can do it right inside their web browser in a tab that opens when they click the icon.

open-with-smallpdf-en

Let’s go ahead and get that PDF icon onto your website.

How To Place a Smallpdf Icon in Your HTML

  1. Copy the URL of the PDF file you want readers to open.

  2. Paste the URL into our Embed PDF page’s “Add PDF link here” box.

  3. Copy the code produced by our tool in the preview box.

  4. On your HTML page, find the spot where you want the Smallpdf icon to appear.

  5. Paste the code there, and the PDF icon will appear there.

embed-pdf-html

If you want, test your code to make sure everything works just the way you want it to. The JS Bin tester is a good way to do this. Just paste the code you get when you click “Copy Code.” You’ll get a preview and can click on the PDF icon on the right-hand window to see how it works. When you’re happy with how it all works fine, you can update your HTML, sit back, and wait for readers to appreciate how easy it is to see, fill out, and add to the PDF you provided. No app, download, or registration is necessary! If you ever want to change or update the PDF you’re sending your visitors to, just repeat these steps and replace the code.

What Happens After You Click on Our PDF Icon

 

Once your visitors open your PDF by clicking on the Smallpdf icon you’ve just implemented, they’ll have three main choices: viewing, annotating, and editing.

If you’re sharing a form, filling it out using Smallpdf couldn’t be easier. Once the file is open on the Smallpdf platform, readers can use a straightforward “Add Text” feature to add information wherever they want on the PDF. They can also add shapes to highlight sections, mark passages in the margin, or draw lines to mark important passages.

If visitors to your site need to sign your PDF, they can do so using our handy eSign tool. We’ve integrated a direct link to eSign within the PDF editor. Simply click on “eSign” on the bar at the top. The PDF will stay open, and our system will even save your signature for repeat use. We also offer a range of tools for sending, compressing, merging, editing PDFs, and more.

You can find more information about all our tools for managing PDFs here.

ChristinaHarker
Christina Harker
Digital Marketing