How to hide chat widgets when taking a screenshot with Puppeteer

Published on Dmytro Krasun 2 min read
When you want to take chat widgets, there are annoying chat widgets that you would love to hide. It is easy to do.

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('', { waitUntil: ['load', 'domcontentloaded', 'networkidle0'] });
await page.addStyleTag({
content: '.crisp-client { display: none !important; }',
await page.screenshot({ type: 'png', path: 'screenshot.png' });
} catch (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: