Back to guides

Add content over screenshots

Last updated february 09, 2024

With the js parameter, you can inject javascript into the page before screenshot capture. To add content over a screenshot, you can simply use it to inject some code that adds the HTML content you want to display.

Don't forget to URL encode the javascript code before passing it to the js parameter.

Pick one of the following examples, adjust it to your needs and simply pass it to the js parameter.

Example 1 • Add a white watermark at the top left of the page

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const watermark = document.createElement('div');
watermark.style.all = 'initial'; // Prevent the website style from affecting the watermark.
watermark.style.position = 'fixed';
watermark.style.top = '50px';
watermark.style.left = '50px';
watermark.style.color = 'white';
watermark.style.fontSize = '100px';
watermark.style.textShadow = 'black 0 0 5px';
watermark.style.zIndex = '9999';
watermark.innerHTML = 'Some Watermark';
document.body.appendChild(watermark);

Example 2 • Add the date and time of screenshot capture

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const dateContainer = document.createElement('div');
dateContainer.style.all = 'initial'; // Prevent the website style from affecting the date.
dateContainer.style.position = 'fixed';
dateContainer.style.top = '10px';
dateContainer.style.left = '10px';
dateContainer.style.color = 'black';
dateContainer.style.fontSize = '20px';
dateContainer.style.zIndex = '9999';
dateContainer.innerHTML = new Date().toLocaleString('fr-FR', {timeZone: 'Europe/Paris'});
document.body.appendChild(dateContainer);

Example 3 • Add a logo at the center of the page

1
2
3
4
5
6
7
8
9
const logoContainer = document.createElement('div');
logoContainer.style.all = 'initial'; // Prevent the website style from affecting the logo.
logoContainer.style.position = 'fixed';
logoContainer.style.top = '50%';
logoContainer.style.left = '50%';
logoContainer.style.transform = 'translate(-50%, -50%)';
logoContainer.style.zIndex = '9999';
logoContainer.innerHTML = '<img src="https://apiflash.com/static/logo.svg" width="100" height="100" />';
document.body.appendChild(logoContainer);