How to automatically watermark images in Webflow

Memberscripts needed

1. https://www.memberstack.com/scripts/auto-watermark

Tutorial

Cloneable 

Why/Use Cases

- Prevent users from downloading and using images that they’d normally have to pay for.

Automatically adding watermarks on images on a Webflow site

If you’ve got images on your site that you don’t want your visitors to freely download and use, adding watermarks might be a good solution.

This guide will help you automatically add watermarks to images on your site by manipulating the actual files instead of just applying an overlay.

This is achieved using client-side JavaScript, which means that a more tech-savvy user could look at your source code and find the original, non-watermarked images. As such, keep in mind that this is just a quick and simple solution that will be effective against most people, but not all.

To automatically add watermarks to the images on your Webflow site, we’re going to use MemberScript #133 – Auto Watermark Images. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting it up

All you need to do on the actual site is add this attribute to every image you want watermarked:

· ms-code-watermark=”VALUE”

For the value, simply input what you want the watermark to say.

Making it work

Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #133 custom code to your page, before the closing body tag.

If you want to edit the style of the watermark, there are helpful comments inside the code that will help you edit the values for whatever you want to change (e.g. font size, transparency, placement, rotation, etc.).

Conclusion

That’s everything, you can now go ahead and test images on your live site.

If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.

Our demo can help you automatically watermark images on your site.

Take me to Cloneable!‍