Webflow integration
Embed the Paperchat chat widget on a Webflow site in under five minutes, no plan upgrade required.
This guide shows you how to add the Paperchat chat widget to a Webflow site using the built in Custom Code panel. You do not need a CMS or Business plan for this to work.
Webflow exposes a Custom Code panel on every project. Pasting a single script there is enough to add the Paperchat chat bubble to every published page across your site.
What you will need
- A published Paperchat chatbot. If you have not built one yet, start with the How to use Paperchat guide.
- Your chatbot ID from the Embed tab in your Paperchat dashboard.
- Editor or higher permissions on your Webflow project.
Add your Webflow domain to the allowed list
In the Paperchat dashboard, open your chatbot's Setup tab and add your published domains to Allowed Domains. Include both your custom domain (for example yourcompany.com) and your Webflow staging domain (yourcompany.webflow.io) so the widget shows up while you preview.
Install the widget
Open Project Settings
In the Webflow Designer, click the project name in the top left and choose Project Settings. You can also reach the same panel from the dashboard by hovering your project and clicking the settings icon.
Open the Custom Code tab
Inside Project Settings, switch to the Custom Code tab. You will see two large text areas, one for Head Code and one for Footer Code.
Paste the embed snippet
Paste the snippet below into the Footer Code 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>Footer Code injects the script just before the closing </body> tag, which is the recommended location for chat widgets because it does not delay the rest of your page.
Save and publish
Click Save Changes at the bottom of the Custom Code panel, then open the Designer and click Publish. Custom code only runs on published sites, so the chat bubble will not appear in the Designer preview.
Verify the widget is live
Visit your published site in a new browser tab. The Paperchat bubble should appear within a couple of seconds. If you only see it on some pages, double check that you pasted the snippet into the project level Custom Code panel and not into the page level Page Settings > Custom Code, which is scoped to a single page.
Embedding on a single page only
Sometimes you only want the chat widget on a specific page, such as a pricing or contact page. Open that page in the Designer, click the cog icon in the navigator to open Page Settings, scroll to Custom Code, and paste the same snippet inside the Before </body> tag field. Leave the project level Footer Code empty in that case.
Troubleshooting
The widget does not appear on the published site. Custom Code only runs after a publish. If you saved the snippet but never republished, the live site is still serving the old version. Publish again.
The widget appears in staging but not on the custom domain. Your custom domain is not in the chatbot's Allowed Domains list. Add it in the Paperchat dashboard and refresh.
The widget loads but conversations fail. Open your chatbot's Sources tab and confirm at least one source has finished training. A chatbot with no data will return a generic fallback for every message.
If something is still off, write to support@paperchat.co with a link to your site.