Add live chat to Hugo

Before you start

• A Hugo site with a theme. The steps below use PaperMod, and there's a note for other themes.
• Your snippet from Websites in the Pidge inbox.

<script>window.$pidge = []; window.PIDGE_WEBSITE_ID = "YOUR-WEBSITE-ID";</script>
<script src="https://app.pidge.chat/client/l.js" async></script>

Your own copy is in the Pidge inbox under Websites, in Code for your website, with your website ID already filled in. If you've set up a chat domain, it loads from there instead.

Add the snippet with PaperMod

PaperMod leaves an empty partial, extend_head.html, at the end of its <head>, for exactly this. You make your own copy of it in your site's folder.

1. In your site's root (next to hugo.toml, not inside themes/), create layouts/_partials/extend_head.html.
2. Paste your two lines into it:

<script>window.$pidge = []; window.PIDGE_WEBSITE_ID = "YOUR-WEBSITE-ID";</script>
<script src="https://app.pidge.chat/client/l.js" async></script>

3. Run hugo server to check it, then build and deploy as usual.

Hugo uses a file in your own layouts folder before the theme's file with the same name, so yours replaces the empty one and lands in the head of every page.

• layouts/_partials, with the underscore, is the folder name since Hugo 0.146. The older layouts/partials still works: we tried both on Hugo 0.169. If your site already has a layouts/partials folder, put the file there.
• Don't edit the copy in themes/PaperMod. Updating the theme, or a Git submodule checkout, puts the original back and the chat disappears.
• hugo --minify is fine. It shortens the two lines and they still work.

Other themes

Most themes have a partial like this. Open the theme's layouts folder and look at the file that writes <head>, usually baseof.html or _partials/head.html, for a partial with a name like extend_head, head-additions or custom-head. Create a file with the same name and path in your own layouts folder, as above.

In Ananke, Hugo's quick-start theme, it's layouts/_partials/head-additions.html. We built a site with that file and the snippet was in the head of every page.

If the theme has nothing like it, copy the theme file that holds </head> to the same path under your own layouts, and paste the two lines just before </head>. Your copy then won't pick up that file's changes when you update the theme.

Open the chat from a button

Put a button in a template or partial with onclick="window.$pidge.push(['do', 'chat:open'])". The widget commands list everything else you can push.

List your domains in Pidge

The chat only connects on domains you've listed for the website. In the inbox, open Websites and put each domain on its own line in Domains. Subdomains are included, so example.com also covers www.example.com.

If people visit the site on your host's own address too, like yoursite.netlify.app, list that full address as well.

To try the chat with hugo server, add localhost to the list too. Pidge matches the host name, so port 1313 is fine. 127.0.0.1 isn't accepted, so open http://localhost:1313 rather than the IP address.

Check that it works

1. Open your site in a private window, so you're seeing what a visitor sees.
2. The chat bubble should be in the bottom corner. Send yourself a message and answer it from the inbox.
3. In the inbox, the website's Not installed yet label goes away after the first visit from a listed domain.

If the bubble shows but the chat won't connect, the domain you're on isn't in the website's list in Pidge. If there's no bubble at all, the snippet isn't on the page, or the platform is still serving an older copy of it.

Hugo's own guide: gohugo.io/templates/new-templatesystem-overview/. PaperMod's notes on extend_head.html: github.com/adityatelange/hugo-PaperMod/wiki/FAQs

Other platforms

• WordPress
• Shopify
• Squarespace
• Wix
• Webflow
• Ghost
• Framer
• Next.js
• Astro
• React
• Vue and Nuxt
• Gatsby
• Jekyll
• Laravel
• Django
• Carrd
• Plain HTML

Stuck, or did a step look different on your screen? Tell us in the chat on this page.