Add live chat to Jekyll

Before you start

• A Jekyll site. The steps below use minima, the theme jekyll new sets up.
• 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 minima 2.5

jekyll new installs minima 2.5, the release on RubyGems. Its head is in _includes/head.html inside the theme gem. Jekyll uses a file in your own site before the theme's file with the same name, so you copy that one file and add the snippet to your copy.

1. In your site's folder, find where the theme is installed:

bundle info --path minima

2. Copy _includes/head.html from that folder into an _includes folder in your site. Create the folder if it isn't there:

mkdir -p _includes
cp "$(bundle info --path minima)/_includes/head.html" _includes/head.html

3. Open your copy, _includes/head.html, and paste your two lines just before </head>:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {%- seo -%}
  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
  {%- feed_meta -%}
  {%- if jekyll.environment == 'production' and site.google_analytics -%}
    {%- include google-analytics.html -%}
  {%- endif -%}
  <script>window.$pidge = []; window.PIDGE_WEBSITE_ID = "YOUR-WEBSITE-ID";</script>
  <script src="https://app.pidge.chat/client/l.js" async></script>
</head>

4. Run bundle exec jekyll serve to check it, then build and deploy as usual.

Keep the rest of the copied file as it is. Your copy replaces the theme's whole head, so deleting a line from it removes that line from your site. It also means a later minima update won't change your head.

minima 3 and other themes

minima 3, installed from GitHub, includes an empty _includes/custom-head.html for this. Create _includes/custom-head.html in your site with just the two lines. You don't need to copy head.html.

Other themes work the same way. Look in the theme's _includes or _layouts folder for the file that holds </head>, or an include meant for extra head tags, and put your own file with the same name in your site.

A theme you've copied straight into your site, with no theme gem, has no gem to override. Paste the two lines before </head> in its own head file.

Open the chat from a button

Put a button in a layout or include 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.

For a GitHub Pages site, list yourname.github.io if visitors use that address, and your own domain if you've set one up.

To try the chat with jekyll serve, add localhost to the list too. Pidge matches the host name, so port 4000 is fine. Jekyll prints http://127.0.0.1:4000, but 127.0.0.1 isn't accepted, so open http://localhost:4000 instead.

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.

Jekyll's own guide: jekyllrb.com/docs/themes/. minima's readme: github.com/jekyll/minima

Other platforms

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

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