How to hide chat widgets when taking a screenshot with Puppeteer

When you want to take chat widgets, there are annoying chat widgets that you would love to hide. It is easy to do.

2 min read

Written by

Dmytro Krasun

Published on

Jul 28, 2022

All you need is to detect the selector of the chat container and then apply display: none !important to it.

Let’s look, for example, with Crisp chat on ScreenshotOne main page:

The ScreenshotOne site with a chat widget

To hide it, find the selector of the main container of the chat. You can do it by using Chrome DevTools:

The ScreenshotOne site with Chrome DevTools

And then add the hiding styling before taking a screenshot:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: true });
    try {
        const page = await browser.newPage();

        await page.setViewport({ width: 1280, height: 1024 });

        await page.goto('https://screenshotone.com/', { waitUntil: ['load', 'domcontentloaded', 'networkidle0'] });

        await page.addStyleTag({
            content: '.crisp-client { display: none !important; }',
        });

        await page.screenshot({ type: 'png', path: 'screenshot.png' });
    } catch (e) {
        console.log(e)
    } finally {
        await browser.close();
    }
})();

And voila:

The ScreenshotOne site without the chat widget

If you take screenshots at scale, you need to do this for every chat widget. Or you can use [ScreenshotOne API] that knows how to hide Facebook Messenger, Tawk, Crisp, Intercom, Drift, and many more.

Have a nice day 👋 and you also might find helpful:

Written by

Published on

Read more posts

Cloudflare Workers as an API gateway

How to screenshot websites in Next.js

How to take website screenshots with Java

Automate website screenshots

Screenshot Tools