Install PetMySite manually

Paste one script tag into your website’s code. It works on any site that lets you add custom code, from site builders to hand-written HTML.

Copy your install code

In PetMySite, open your website, go to Installation, choose Manual and select Copy code. It’s a single line:

<script async src="https://cdn.petmysite.com/pet.js" data-site="YOUR_SITE_KEY"></script>
Example only. Copy your own code from Installation in your PetMySite website, where YOUR_SITE_KEY is already filled in.

The script loads asynchronously, so it won’t hold up the rest of your page. The data-site value is your website’s public key; it isn’t a secret, and it only works on your website’s domain.

Where to paste it

  1. Add the code once, on every page, just before the closing </body> tag. A shared footer or layout is the easiest place.
  2. Keep your chat provider’s script on the same pages. The pet opens that chat; it doesn’t replace it.
  3. Save and publish your site. If you use page or CDN caching, clear it so visitors get the new code.

Site builders

Choose your platform for its exact code location, publishing steps and troubleshooting. React and Next.js have their own guide too.

HTML and custom sites

Paste the code into the template or include file that renders your footer, just before </body>. On a static site without a shared footer, add it to each page.

Add it only once per page. A second copy is ignored, but keeping one makes future changes simpler.

React and Next.js

See the React and Next.js guide for the root layout, the package prepared for npm, and the direct script option. For a single-page app, add the script tag to index.html so it loads once.

In a Next.js App Router project, add it to the root layout with next/script, using your own key:

import Script from "next/script";

// app/layout.tsx, inside <body>
<Script
  src="https://cdn.petmysite.com/pet.js"
  data-site="YOUR_SITE_KEY"
  strategy="afterInteractive"
/>

To show messages, hide the pet or respond to clicks from your own code, use the JavaScript API.

Verify installation

  1. Back in PetMySite, continue to the last step of Installation and select Verify installation.
  2. Your website opens in a new tab. When the pet loads, it checks in and the Installation page shows Verified.

Troubleshooting

The pet doesn’t appear

  • View your page source and search for pet.js. If it isn’t there, the change hasn’t been published or a cache is serving an older page.
  • Test on the same domain as your PetMySite website. The pet only loads on that domain; www. is ignored, but other subdomains and staging addresses are not the same website.
  • Check the code wasn’t altered on paste. Some editors convert quotes to curly quotes or strip the data-site attribute.
  • If your site sends a Content Security Policy, allow https://petmysite.com and https://cdn.petmysite.com for scripts, connections, images and fonts, and permit WebAssembly. Without WebAssembly the pet shows a still pose. A policy that forbids inline styles blocks the current widget; contact support before changing it.
  • Performance plugins that delay JavaScript until interaction will delay the pet too. Exclude pet.js from petmysite.com.

The pet appears but chat doesn’t open

Keep your chat provider’s script installed and make sure it loads on the same pages. PetMySite opens it rather than replacing it, and falls back to the original chat button if it can’t.

Other ways to install

Every method loads the same pet with the same settings. Use one method per website.

Still stuck? Email support@petmysite.com with your website address and the method you used.