Build Print This Page Button

Page Content

How to Create a "Print This Page" Button

Adding a “Print This Page” button gives visitors an easy way to print the contents of a webpage. This can be especially helpful for pages with detailed instructions, checklists, or event information. In this section, you’ll learn how to insert simple code into a general content type to add this functionality.

Learning objectives

  • Learn how to manually add a “Print This Page” button using basic HTML in the general content type

Print This Page Button

Instructions

From the T4 Site Structure, navigate to the page you are updating.

How to add a "Print This Page" button to a webpage

  1. Click the Add Content button.
  2. Select General Content Type from the list of content types.
  3. In a general content type, select View on the main body toolbar. 
  4. From the View dropdown menu, select "source code." 
  5. Insert the following code:
    <p><button onclick="window.print()">Print This Page</button></p>
  6. Press the Save on the source code window.
  7. Then, click the Save Changes button to save content as a draft, or press the arrow and select Save and Approve to save and publish updates.

Best practices

  • Place the button at the top of the page so it’s easy for users to find right away
  • Test the button to ensure it opens the print dialog as expected on all major browsers
  • Only use on pages with content that makes sense to print, such as forms or instructions

Additional resources

Adding a print button is a quick way to improve user experience for visitors who prefer printed content. Now that you know how to insert the code, you can easily apply this feature to any page that would benefit from a printable version.

Explore the possibilities: Content type examples

Browse through the examples below to see how the type can be used in different scenarios and design choices.

Ready to enhance your content further?

Check out the next module.

Tile: Color
menu
Close