Webflow
Install the Yaplet chat widget on your Webflow site using the built-in custom code settings — no coding experience required.
Overview
Webflow lets you inject custom code site-wide through its project settings. Pasting the Yaplet embed script into the footer code section adds the widget to every page on your site.
Installation Steps
Copy your Yaplet embed code
Log in to your Yaplet dashboard and go to Settings → Widget → Embed. Copy the full embed script shown on the page.
Open your Webflow project settings
In the Webflow Designer, click the gear icon in the left sidebar (or go to Site Settings from your Webflow dashboard).
Paste the script into the footer code
Navigate to the Custom Code tab. Paste your Yaplet embed code into the Footer Code text area. This injects the script just before the closing </body> tag on every page.
Publish your site
Click Publish to push the changes live. The custom code only takes effect on the published site, not in the Webflow Designer preview.
Verify the widget appears
Open your published Webflow site in a new browser tab. You should see the Yaplet launcher button in the bottom-right corner.
Adding to a Single Page
If you only want the widget on specific pages instead of site-wide:
- Select the page in the Webflow Designer
- Open Page Settings (gear icon in the Pages panel)
- Scroll to the Custom Code section
- Paste the embed script into the Before
</body>tag field - Publish your site
Troubleshooting
If the widget doesn't appear after publishing:
- Check that you published — Custom code only runs on the published site, not in the Webflow Designer or preview mode.
- Verify your plan — Webflow's free plan does not support custom code injection. You need a paid site plan (Basic or higher).
- Check for conflicts — If you have other chat widgets or scripts that modify the bottom-right corner of the page, they may overlap with Yaplet.