Install PetMySite on Framer

Add the PetMySite script once in your Framer project's Custom Code settings.

Before you start

  • Publish to the same domain you entered in PetMySite, and keep your chat provider installed if your pet opens chat.
  • Set up your website in PetMySite and note its public site key. Your chat provider must also be installed on the pages where your pet opens chat.

Copy your install code

In PetMySite, open your website, go to Installation, choose Framer and select Copy code. It includes your website's public key. The example below shows its shape.

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

Add the code in Framer

  1. Open Project Settings → Custom Code. Select Add Script, or the + button if you already have scripts.
  2. Name it PetMySite, paste your install code, choose all pages, and place it at the end of the body.
  3. Choose Once for how often it runs, save, and publish the site.

Framer's canvas preview does not show custom code added through settings. Test the published site.

If the menus look different, see Framer's custom code instructions.

Publish and verify

  1. Open a public page on the same domain you entered in PetMySite. Check that your pet appears and that your chat provider still works.
  2. Return to PetMySite's Installation page, continue to the last step and select Verify installation. It opens your site and waits for the pet to check in.

Troubleshooting

The pet doesn't appear

If the pet does not appear in preview, open the published URL instead. Check that the script applies to all pages and the correct domain.

  • View the published page source and search for pet.js. If it is absent, revisit the code location and publish again.
  • Check the domain against your PetMySite website address. www. is ignored, but a different subdomain or staging address is a different website.
  • Keep just one PetMySite script on each page. If your site uses a Content Security Policy, allow petmysite.com and cdn.petmysite.com for scripts, connections, images and fonts, and permit WebAssembly for animation. A policy that forbids inline styles also blocks the current widget; contact support before changing that policy.

The pet appears but chat doesn't open

Keep your chat provider's own script active on the same pages. PetMySite opens that chat; it does not install the provider.

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.