How to Add Print This Page Widget on Your Webpage?
Step 1 – Printer Icon Images
Let us first upload a good looking printer icon image to the website. Below are some of the images you can use.
Get the complete URL of the image once it is uploaded on your site. For example, we use the first image in this example and the URL is be “https://img.webnots.com/2016/10/Printer.png”. You can right-click and select “Copy Image Address” option in Chrome browser to get the image URL.
Step 2 – Insert HTML Code
The next step is to add the below HTML code on your webpage where you want to display the printer icon.
<img border="0" src="https://img.webnots.com/2016/10/Printer.png" width="50" height="50">
Ensure to change the image URL with your own. If your image has different size then control the size with proper width and height parameters.
Step 3 – Testing On Browser
Publish your site and open the webpage on a browser. Since
Users can either take a physical print out or save the webpage as a PDF file. Refer the article on how to convert webpage into PDF on Google Chrome.
Step 4 – Decorating Printer Icon
If you feel the image is so simple and want to add more decorations, then use CSS to customize the look. You can add a CSS class to the HTML code like below along with style definitions:
box-shadow: 1px 1px #3f51b5;
border: 1px solid #ff9800;
<img class="printer" src="https://img.webnots.com/2016/10/Printer.png">
The final widget will look like below and click on the printer icon to see the print dialog box is popping up.
You can change the background and border colors of the printer icon according to your image and site appearance.
Note: As every physical print out will kill trees, you can insist your users to print only on required pages like forms where physical signature is required.