Install Yaplet on a Webflow site

Updated May 22, 2026

Webflow has a built-in custom code section in its project settings. Pasting the Yaplet snippet into the footer code area adds the widget to every published page on your site — no plugins or extensions needed.

Custom code injection requires a paid Webflow site plan (Basic or higher). It is not available on the free plan.

1. Get your embed code

Log in to your Yaplet dashboard, click Widgets in the sidebar, click your widget, then click the Embed button. Copy the full embed script. If you want to understand what it does first, see Install Yaplet with the JavaScript snippet.

2. Open your Webflow project settings

In the Webflow Designer, click the gear icon (⚙) in the top-left panel, or open Site Settings from your Webflow dashboard by clicking the three-dot menu next to your project.

3. Paste the script in the footer code

Navigate to the Custom Code tab. Scroll to the Footer Code section and paste your Yaplet embed script there. This injects it just before the closing </body> tag on every page.

Click Save Changes.

4. Publish your site

Click Publish (the blue button at the top of the Designer) and publish to your domain. Custom code only takes effect on the published site — it does not run in the Designer preview or the staging subdomain unless you explicitly publish there.

5. Verify the widget appears

Open your live Webflow URL in a new browser tab. The Yaplet launcher button should appear in the bottom-right corner. Click it to confirm it opens correctly.

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:

  1. In the Webflow Designer, select the page in the Pages panel.
  2. Click the gear icon next to the page name to open its settings.
  3. Scroll to the Custom Code section.
  4. Paste the Yaplet script into the Before </body> tag field.
  5. Publish your site.

Troubleshooting

  • Widget doesn't appear after publishing — Custom code only runs on the published site. Make sure you clicked Publish after saving your custom code changes.
  • Webflow free plan — Custom code injection is not available on free Webflow plans. Upgrade to a paid site 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 Appearance settings, or contact support to reposition the launcher.

Did this article answer your question?