The snippet
<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.
Where it goes
Paste it just before </body> on every page where you want the chat.
Inside <head> works too. The script loads with async, so
it doesn't hold up your page either way.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
</head>
<body>
<h1>Hello</h1>
<script>window.$pidge = []; window.PIDGE_WEBSITE_ID = "YOUR-WEBSITE-ID";</script>
<script src="https://app.pidge.chat/client/l.js" async></script>
</body>
</html>
Once per page is enough.
Sites with many pages
If every page is its own file, the snippet goes in each one. If your pages share a header
or footer file (a PHP include, a server-side include, a template in your CMS), paste it
once in the footer file, before </body>.
With a static site generator, like Hugo, Jekyll or Eleventy, put it in the base layout
that every page uses, often called base, default or
baseof, and rebuild. Look for the file that has the
</body> tag.
Open the chat from your own button
<button type="button" onclick="$pidge.push(['do', 'chat:open'])">Chat with us</button>
The widget commands also let you pass a logged-in customer's name and email, hide the bubble on some pages, or start a fresh chat when someone logs out.
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.
To try the chat while you develop, add localhost to the list too. Pidge
matches the host name, so any port works. 127.0.0.1 isn't accepted, so open
your dev server at localhost.
Check that it works
- Open your site in a private window, so you're seeing what a visitor sees.
- The chat bubble should be in the bottom corner. Send yourself a message and answer it from the inbox.
- 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.
Common problems
- You opened the file straight from your computer (an address starting with
file://). The chat can't connect from there. Use a local server and addlocalhostto Domains, or test on the live site. - Your site sets a Content Security Policy. Allow the chat's address in
script-srcand inconnect-src(bothhttps:andwss:). The first line of the snippet is an inline script, so it also needs your nonce or hash. The browser console names what was blocked.
How async scripts load: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script
Other platforms
Stuck, or did a step look different on your screen? Tell us in the chat on this page.