Framer integration
Add the Paperchat chat widget to a Framer site using the built in Custom Code panel. Works on every Framer plan with a connected domain.
This guide walks you through adding the Paperchat chat widget to a Framer site. The whole process takes a few minutes using Framer's built in Custom Code feature.
Framer projects can run custom HTML in either the document head or just before the closing body tag. The Paperchat widget belongs in the body, since it is a runtime UI element that does not need to block the rest of the page from loading.
What you will need
- A published Paperchat chatbot. If you have not built one yet, follow the How to use Paperchat guide first.
- Your chatbot ID from the Embed tab in your Paperchat dashboard.
- Edit access on the Framer project. Custom Code requires a paid Framer plan.
Add your Framer domain to the allowed list
Open your chatbot in the Paperchat dashboard, go to Setup, and add your published domain to Allowed Domains. If you preview on the Framer subdomain (yoursite.framer.website), add that as well.
Install the widget
Open Site Settings
In the Framer designer, click the project title in the top left and choose Site Settings. The settings drawer slides in from the left.
Open the General tab
Inside Site Settings, select the General tab. Scroll down to the Custom Code section. You will see two text areas, Start of head tag and End of body tag.
Paste the embed snippet
Paste the snippet below into the End of body tag field. Replace YOUR_CHATBOT_ID with the ID from your Paperchat dashboard.
<script async src="https://paperchat.co/widgets/livechat/v1.js" data-paperchat-id="YOUR_CHATBOT_ID"></script>Publish
Click Done, then click Publish in the top right of the designer. Custom code only takes effect on the published site, not in the preview.
Verify the widget is live
Open your live Framer site in a new tab. The chat bubble should load within a few seconds. If the bubble is missing, open the browser console, search for paperchat, and check whether the script reported a configuration error.
A note on Framer overlays
Framer's component overlays and modals are rendered with high z-index values. In rare cases, a full screen overlay can sit on top of the chat bubble. If you see that, give the affected overlay a lower z-index in its style panel, or simply hide the chat bubble while the overlay is open by toggling the script's container from the parent component.
Troubleshooting
The widget does not show on the published site. Confirm you pasted the snippet into the End of body tag field and not the Start of head tag field. Republish the site after saving.
The widget shows on the Framer subdomain but not on your custom domain. Add the custom domain to the chatbot's Allowed Domains list in the Paperchat dashboard.
Conversations return generic answers. The chatbot has no trained data yet. Open the Sources tab and add files, URLs, or text. Wait for training to complete before testing again.
If something is still off, email support@paperchat.co with a link to your Framer site.