Chasing your final website development payment? Simply add a website watermark!

Online, you can find a plethora of tutorials that can help you watermark images on your website by using clever jQuery and CSS techniques, but there are not many which detail how to watermark a whole website. One might ask why anyone would want to do this? Well, for a self-employed website designer, this tactic can be useful for making sure clients part with their final payment before website release.

I very much dislike being a cynic when it comes to doing business with people, and I am often more lenient than not when it comes to late payments, but any freelance web developer will know how crucial cashflow is to ensure business continuity – therefore by using this cheeky little watermarking tip, you can gently usher your client into making full payment for the service that you have lovingly designed – in a way that comes across as friendly rather than forceful.

Regardless or not of whether you took a deposit for your website that you have created, once it is finished, you may find that the urgency that a client had to get the project started can often wane when it comes to settling the final invoice! Their website is live, it’s getting traffic, and they can show their customers their beautiful creation – what do they care whether you get your money or not?

Often delay tactics will be deployed to try to adjourn any talk of payment. These can include:

• “We need to get our marketing team to fully check over the website.”
• “I need to fully test it before we go live in all browsers.”
• “Can you add this, tweak that, or edit this section please?”
• “We’re just awaiting head office to clear the payment”

By adding a watermark to a website, this ensures the client can view their website in all its glory, can navigate from page to page, and can benefit from Google spidering their website and ranking the pages accordingly – however, they’ve now got this nagging repeating background image, like you’d get on an image from Getty or Shutterstock – which they ideally will want removed as soon as possible. Therefore, it is up to them to do the needful to make sure this is taken off in order to experience the website at it’s level best.

TOGGLE THIS BUTTON TO SEE WHAT IT WOULD LOOK LIKE

So, how do you do this? Well, there are two elements to it.

---

1) Create watermark.js file

Firstly, you need to open up a Notepad or TextEdit file on your computer, and enter the following code. Save the file as watermark.js and upload it to your website.

content.document.body += "<div id='webwatermark' style='position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background: url(https://websiteright.co.uk/wp-content/uploads/2018/09/website-watermark.png) rgba(0,0,0,1); background-repeat: repeat; opacity:0.04; pointer-events:none;'></div>";

Make sure you change the long URL to your own company logo which is both small in size, but also white.

---

2) Enter Javascript code in footer

Subsequently, place the following line of code in your website footer (not the header). If you have WordPress installed, you may be able to do this in your theme code, within the dedicated Editor, alternatively just download the SOGO Header and Footer Plugin which will make this easy for you.

<script src="https://websiteright.co.uk/wp-content/uploads/2018/09/watermark.js"></script>

Obviously, do change the URL to match the path of the file you uploaded in the first step. Once you have done this, your watermark will appear on all pages of the website!

---

Whilst someone who may be fairly skilled at WordPress and/or coding may know how to remove what you have entered, the majority of your clients will not know how to undo this, therefore giving them a gentle reminder that payment indeed needs to be made.

Thankfully, I have been very fortunate with the clients that I have worked with, therefore have not yet had the need to deploy this tactic, however I do hope this tip comes in handy for anyone that is chasing payment, as it gives a friendly little nudge that can certainly help you get the money in the bank as quickly as possible.

GET IN TOUCH IF YOU NEED ANY HELP!