Help · Add to Framer

How to add OhhChats to Framer

Add the OhhChats chat bubble to your Framer site via Site Settings → Custom Code. Takes about 5 minutes.

What you'll need

A Framer project you can edit and publish.
A paid Framer site plan — custom code only publishes after you upgrade from the free plan. {{CONFIRM}} the exact minimum tier (e.g. Mini).
Your OhhChats snippet (below).

Plan requiredCustom code publishes only on a paid Framer site plan. {{CONFIRM}} the exact minimum tier.

Your OhhChats snippet

<script
  src="https://ohhchats.onrender.com/widget.js?siteId=YOUR_SITE_ID"
  data-site-id="YOUR_SITE_ID"
  async></script>

Use your own snippetCopy the exact line from your OhhChats dashboard — it carries your unique site ID (shown here as YOUR_SITE_ID). {{CONFIRM}}: the host above (ohhchats.onrender.com) is the address used in this codebase — confirm the production widget domain before publishing these articles.

Open Site Settings
In the Framer editor, open Site Settings (the gear icon, top left).
/help/img/framer-01-site-settings.pngEditor → Site Settings
Find Custom Code under General
Go to General → Custom Code. You'll see four boxes: Start of <head>, End of <head>, Start of <body>, End of <body>.
/help/img/framer-02-custom-code.pngGeneral → Custom Code
Paste into End of
Paste your OhhChats snippet into the End of <body> tag box.
/help/img/framer-03-paste-snippet.pngPaste into End of <body>
Publish
Click Publish (top right) → Update. Custom code only runs on the published site, not in the editor.
/help/img/framer-04-publish.pngPublish → Update
Check it worked
Open your live published site and refresh — the OhhChats bubble should appear in the corner.
/help/img/framer-05-live-test.pngBubble live on your site