Browse all guides

Install Pengo on any website (HTML)

Paste one small script before the closing body tag and the Pengo chat bubble appears on every page of your site. Works with any HTML site or template.

Install the widget 2 min read Updated Oct 19, 2026

On this page

Add the snippet
What the snippet does
Where your website ID comes from
Check that it works
Other platforms

This guide works for any website where you can edit the HTML: hand-written pages, static site generators, and server-rendered templates in PHP, Django, Rails, Laravel and so on. You paste one snippet into your site’s shared layout, and the chat bubble appears on every page.

Using a website builder? There’s a dedicated guide for each one under Other platforms at the end of this page.

#Add the snippet

Open the file that every page of your site shares.

That’s usually a layout, base template or footer include, such as layout.html, base.html, footer.php or _footer.html.erb. If your site is a set of plain HTML files with no shared layout, you’ll repeat the next step in every file.
Find the closing </body> tag.

Paste the snippet you copied from Pengo just above it.

It looks like this. The snippet you copy from Pengo already has your website ID in place of YOUR_PROPERTY_ID:

Pengo snippet

<!-- Pengo Widget -->
<script>
  (function() {
    // A stub, so pengo('identify', …) and other calls work before the widget has loaded.
    window.pengo = window.pengo || function() { (window.pengo.q = window.pengo.q || []).push(arguments); };
    window.pengo.propertyId = 'YOUR_PROPERTY_ID';
    window.pengo.q = window.pengo.q || [];
    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://app.pengo.chat/embed.js?v=2';
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(script, firstScript);
  })();
</script>

Save the file and deploy your site as you normally would.
Open your site in a new browser tab. The chat bubble appears in the corner.

#What the snippet does

The snippet is short on purpose. When a page loads, it:

Sets up a tiny pengo() function. Any pengo(...) calls your page makes before the widget is ready, such as pengo('open') or pengo('identify', ...), wait in a queue and run in order once it loads.
Saves your website ID, so Pengo knows which website’s settings, inbox and Intelligence to use.
Loads a small loader script, embed.js, from https://app.pengo.chat asynchronously, so it never holds up the rest of your page.

The loader draws the chat bubble straight away, using your settings from the visitor’s last visit when it has them. The full widget loads as soon as the visitor hovers, taps or tabs to the bubble, or when the browser is idle, whichever comes first. The chat window itself runs in a secure frame served from app.pengo.chat.

To control the widget from your own code, see the JavaScript API.

#Where your website ID comes from

Every website you add to Pengo has its own ID. It’s the propertyId value in the snippet. You can also copy it on its own with the copy button on the website’s card in Settings Workspace Websites .

If you run more than one website, make sure each site gets the snippet with its own ID. See domains and multiple websites.

#Check that it works

Open your site and look for the bubble, then confirm that Pengo has detected the install. Verify your installation walks through it, with a troubleshooting checklist if the bubble doesn’t show.

#Other platforms

HTML WordPress Shopify Webflow Next.js Wix Squarespace Google Tag Manager

Common questions

Can I put the snippet in the head instead?

Yes. It loads asynchronously and waits for the page body before it draws the bubble, so the head works too. Before the closing body tag is the usual spot.

What happens if the snippet ends up on a page twice?

Nothing breaks. Pengo checks for a copy that is already running and only shows one chat bubble.

Does the widget slow down my site?

The script that loads on every page is small and loads asynchronously. The rest of the widget loads when the visitor moves towards the bubble or when the browser is idle.

Was this guide helpful?

Your answer helps us improve it.

Install the widgetVerify your installation Install the widgetInstall Pengo with Google Tag Manager DevelopersJavaScript API