Webflow has a built-in custom code section in its Site settings. Pasting the Yaplet code into the Footer code section adds the widget to every published page on your site — no plugins or extensions needed.
Custom code needs a paid Webflow Site plan (Basic or higher) or a paid Workspace plan (Core, Growth, Agency or Freelancer). A free Starter site in a free Starter Workspace can't use it.
1. Get your Yaplet code
Log in to your Yaplet dashboard and go to Brand → (your brand) → Chat widget → Install. If the tab asks where your website runs, choose Webflow. Copy the code with the copy button on the code block. If you want to understand what it does first, see Install Yaplet.
Webflow's custom code fields need JavaScript inside <script> tags, so the code you paste in step 3 must have them.
2. Open your Webflow Site settings
In your Webflow dashboard, go to Site settings for your site.
3. Paste the code in the Footer code section
Open the Custom code tab. In the Footer code section, paste the Yaplet code. The code you paste must start with a <script> line and end with a </script> line; if what you copied starts with !function (Yaplet instead, type <script> on a new line before it and </script> on a new line after it. Webflow places this code just before the closing </body> tag on every page.
Click Save changes.
4. Publish your site
Click Publish, tick the domain(s) you want to publish to, and click Publish to selected domains. You can see custom code working in Webflow's preview mode, but it goes live for visitors only on the domains you publish to.
5. Verify the widget appears
Open your published site in a new browser tab and reload the page. The Yaplet chat button appears in the bottom-right corner. Click it to check that the chat opens.
For a full checklist, see Verify your installation.
Add the widget to a single page only
To show Yaplet on one specific page rather than site-wide:
- In the Webflow Designer, hover over the page in the Pages panel.
- Click the Page settings icon next to the page name.
- Scroll to the Custom code section.
- Paste the Yaplet code, with its
<script>and</script>lines, into the Before </body> tag field, and save your changes. - Publish your site.
Troubleshooting
- Widget doesn't appear after publishing — Custom code goes live only on the domains you publish to. Make sure you published to the domain you are checking after saving your custom code.
- The code shows up as text on your pages — The
<script>tags are missing. Add them around the Yaplet code in Footer code, save, and publish again. - Webflow free plan — Custom code is not available on a free Starter site in a free Starter Workspace. Add a paid Site plan, or upgrade to a paid Workspace plan, to use it.
- Widget overlapping with other elements — If another fixed-position element sits in the bottom-right corner of your site, it may cover the Yaplet launcher. Adjust the conflicting element's position, change the launcher position in your widget's Design settings, or contact support to reposition the launcher.