Install PetMySite in React or Next.js

Load your pet once in the app shell or root layout. It stays available as visitors move between client-side routes.

Before you start

Create a PetMySite website with the same public domain as your React or Next.js app. Keep your chat provider installed in the same app if your pet opens chat.

In PetMySite, open that website's Installation page and select React / Next.js. The script's data-site value is your public site key; it is safe to use in browser code.

Install with the script

This option needs no npm package. Copy the complete script from Installation:

<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.

React

  1. Add the copied script once in the HTML template that serves your app, such as Vite's index.html.
  2. Place it just before </body>, then rebuild and publish your app.

Next.js App Router

In app/layout.tsx, use next/script inside the root <body>. Replace the example key with your own:

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"
/>

Next.js loads a script in the root layout once across route navigation. For the Pages Router, put the same next/script component in pages/_app.tsx.

Use the React package

Instead of the script, you can install @petmysite/react. Use one method or the other, not both.

npm install @petmysite/react

Render the component once in your React app shell or Next.js root layout, using the public key from your installation code:

import { PetMySite } from "@petmysite/react";

// Render once in your app shell
<PetMySite siteKey="YOUR_SITE_KEY" />

The package runs only in the browser and does not render a visible element. It keeps a single script across React rerenders, including development Strict Mode. To show messages, hide the pet on some routes or handle clicks from your components, see the React and Next.js API.

Verify installation

  1. Deploy the app to the same domain you set in PetMySite. Open a public page and confirm the pet appears.
  2. In PetMySite, continue to the final Installation step and select Verify installation. The page opens your live site and waits for the pet to check in.

Troubleshooting

No pet on the published app

  • Search the rendered page for pet.js and your public site key. A local development address or staging subdomain will not match your registered public domain.
  • In Next.js, put the script or package component in a root layout, not in a page that unmounts when visitors navigate.
  • Check your Content Security Policy allows petmysite.com and cdn.petmysite.com for scripts, connections, images and fonts, plus WebAssembly for animation. A policy that forbids inline styles blocks the current widget; contact support before changing it.

The pet appears but chat does not open

Keep your chat provider's own script installed. If you need to control the pet from React code, use the React and Next.js API.

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.