Is it possible to disable print screen on Webflow websites?

Design help Custom code
#1

Hi,

I have a client who is requesting that the print screen function is disabled on their website. I was doubtful it was a thing at first, but he showed me examples of where this is happening, and I am looking to recreate it.

I’ve tried a few opensource javascripts which don’t seem to be working. Perhaps I am integrating them wrong…

I’ve also inserted javascript onto the page to prevent copy+paste function and that is working fine.

Any help/insight is greatly appreciated!

#2

You can’t actually disable any screen capture of a webpage from a browser. Pretty sure that’s only possible with specific software on the machine that a visitor would be using.

#3

Hey Noah, my research showed the same results… however, my client has been able to show me a website where this feature is indeed implemented.

To be clear, ‘screen capture’ (i.e. using a snipping tool) is not disabled, but when a ‘print screen’ is tried, the content grabbed is not what is on the page. I’m wondering if there’s a way to change what’s copied to the print screen clipboard to something blank or generic.

Thanks!

#4

Were you just trying to have certain sections of your site not be printable? You could use “@media print” in your css to control that. For example:

.noprint {
}

@media print {
.noprint { display: none }
}

#5

Where would you place this code? can you use a code embed? or do you need to wrap the code of the whole page with this?

#6

Welcome to the community @TCM_Consulting11 :wave:

You’d just add the class noprint to the body of the page(s) you’d like to prevent from being shown when using the Print Screen, then include the following in the Page Settings within the <head> code section of the page you’d want hidden:

<style>
@media print { .noprint { display: none; } }
</style>

If you want all of your pages content hidden when a visitor uses Print Screen, then you can change up your custom code a bit and move it to the Project Settings instead (still within the <head> code section):

<style>
@media print { body { display: none; } }
</style>

Keep in mind that code used in either the Page or Project Settings only affects published sites—however given the type of modification this is I’m not sure if it will ever work from within the Designer Preview.