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:

How to hide chat widgets when taking a screenshot with Puppeteer

Screenshot Tools