Add one tag to your base layout. No JS framework, no hydration.
Eleventy is a static site generator with no client runtime of its own, so the widget is the only JavaScript you are adding. Put the script in your base layout and every templated page inherits it.
<!doctype html>
<html lang="en">
<body>
{{ content | safe }}
<script src="https://unpkg.com/@usero/sdk"></script>
<script>
Usero.initUseroFeedbackWidget({ clientId: "YOUR_CLIENT_ID" });
</script>
</body>
</html>Replace YOUR_CLIENT_ID with the id from your Usero dashboard.
Built for Eleventy
Eleventy layouts chain, so adding the script to your top-level base layout means every page that extends it ships the widget.
Eleventy outputs plain HTML with no runtime. The widget is the only script in play, so there is nothing for it to conflict with.
Nunjucks, Liquid, Handlebars, plain HTML. The script tag is template-agnostic, so the layout language you use does not matter.
Prefer not to use a CDN? Add the bundle to a passthrough-copy directory and reference the local path from your layout.
Canny pulls a 200kb iframe onto an otherwise script-free Eleventy page. Usero is one 12kb script, in keeping with a static site.
FAQ
In your base layout file (often _includes/layouts/base.njk), before </body>. Pages that extend that layout then carry the widget automatically.
No. The script tag is plain HTML in a layout. No Eleventy plugin, no JavaScript config change is required.
Yes. Use addPassthroughCopy to copy the @usero/sdk IIFE build into your output, then reference that local path instead of the CDN.
It is independent of the data cascade. If you want a per-site client id from data, interpolate a template variable into the init call.
Free tier. No credit card. Two-minute install. Cancel by deleting two lines of code.
Install guides