Webflow guide Install ToastUp on Webflow
in 5 minutes
Copy your ToastUp snippet, paste it into Webflow Custom Code in your site settings, publish the site, and your toasts are ready to fly without writing code.
<script async src="https://toastup.co/widget.v1.js" data-site="YOUR_SITE_KEY"></script>
Make sure
these are ready.
Webflow integration is quick and painless if your site supports custom code and you have active admin access.
- 🔐Admin / Designer accessAccess to your Webflow dashboard or designer settings.
- 🌐Connected domainA published Webflow site connected to the same domain you add in ToastUp.
- 📋Ready snippetYour ToastUp snippet copied from Dashboard -> Install snippet.
- 🧩Premium plan / Workspace custom codeA paid Webflow Site Plan or Workspace Plan to enable Custom Code.
- 🚀Step 1Copy your ToastUp snippetIn ToastUp, open Dashboard -> Install snippet, add your Webflow domain, then copy the script snippet.
- ⚙️Step 2Open Webflow Site SettingsGo to your Webflow Dashboard, click the three dots (...) menu on your site, and select Settings.
- 💻Step 3Navigate to Custom CodeIn the left sidebar (or top tabs in older Webflow interface), click Custom Code.
- 📌Step 4Paste inside Head CodeFind the Head Code section, paste your full ToastUp script snippet into the text field, and save changes.
- ⚡Step 5Publish your websiteClick Publish in the top-right corner, select your custom domains, and click Publish to Selected Domains.
How to check
that it works.
After publishing your Webflow changes, run through this quick checklist to ensure everything is connected.
- 🕵️Open your published Webflow site in a new incognito window.
- 🔎View page source and search for widget.v1.js.
- 🔑Confirm the snippet contains your data-site key from ToastUp.
- 📣Confirm the toast is published and assigned to this Webflow website.
- 🎯Test on a URL and device that match the toast targeting rules.
Toast Not Showing?
Most Webflow installation questions come down to publishing or workspace permissions. Let's fix them:
Custom Code field is locked
Webflow requires a paid Site Plan (Basic, CMS, Business) or a paid Workspace Plan to add custom code. Make sure your site supports this feature.
Changes are not appearing on live site
You must publish your Webflow site to make the Custom Code changes active. Simply saving the settings does not apply them live.
Incorrect script location
Ensure the snippet is placed inside the Head Code box in settings, not the Footer Code box. ToastUp works best when loaded in the site head.
Domain mismatch
The domain registered in your ToastUp dashboard must match the live Webflow URL (including subdomains or the webflow.io preview domain if testing).
Frequently Asked Questions
Find the information you need in a snap. Complete answers to make your experience easier.
Where do I paste the ToastUp script in Webflow?+
Go to your Webflow Site Settings -> Custom Code, and paste the full script inside the Head Code textarea. Save and publish your site.
Can I add ToastUp to a single Webflow page instead of the entire site?+
Yes. In the Webflow Designer, open the Pages panel, click the gear icon next to the specific page, scroll down to Custom Code, and paste the ToastUp snippet inside the "Inside <head> tag" box. Then publish.
Do I need a paid Webflow plan to use ToastUp?+
Yes, Webflow restricts the Custom Code feature to sites with an active paid Site Plan (e.g., Basic, CMS, or Business) or sites in a workspace with a paid Workspace plan.
Why is my toast not showing on Webflow?+
Make sure your Webflow site is published, the script tag is present in the source, the toast is published in ToastUp, and all page targeting settings match the URL you are visiting.
Ready to add ToastUp to Webflow?
Create your account, copy one snippet and launch your first conversion toast.
Start Free with ToastUpWant the full tour first? See every ToastUp feature or compare plans & pricing.