Logo

MilkyWay

Two lines. Any stack.

MilkyWay Widget Documentation

The fastest way in: copy the snippet for your framework, replace YOUR_PROJECT_ID with your project id, and drop it into your root layout or base template. Done.

Video tutorial

Watch the full walkthrough on YouTube — setup, middleware and layout explained step by step.

How it works

01

Paste two lines

One <my-widget> element plus one <script> tag — that's the whole integration. No SDK, no config file, no build step.

02

Widget floats bottom-right

The web component renders a floating feedback button. Visitors click it, rate and leave a message.

03

Feedback lands in your dashboard

Every rating and message appears instantly in your MilkyWay dashboard, ready to act on.

Under the hood: middleware + layout

Two pieces make the widget work on this site, and the same pattern applies on yours:

1. Middleware — the proxy

middleware.ts intercepts /widget.umd.js and rewrites it to the widget host before the browser ever sees it. The embed stays same-origin — no external domain in your code, and the script is served from your own domain.

// middleware.ts — proxy
if (pathname === "/widget.umd.js") {
  return NextResponse.rewrite(
    new URL("https://embeddales.vercel.app/widget.umd.js")
  );
}

2. Layout — the mount point

The root layout renders the my-widget element and loads the proxied script. Because it lives in the layout, the widget appears on every page — one edit, whole site.

// app/layout.tsx
<my-widget project-id="38" />
<Script strategy="afterInteractive"
  src="/widget.umd.js" />

The flow: browser requests /widget.umd.js → middleware rewrites it to the widget host → the script arrives from your own origin → the web component upgrades <my-widget> into the floating feedback button. No SDK, no build step, no third-party script tag in your HTML.

Next.js (App Router)

app/layout.tsx

  1. 1Open your root layout file: app/layout.tsx
  2. 2Add the element and the Script tag before the closing </body> tag
  3. 3The script is served through the MilkyWay proxy at /widget.umd.js
  4. 4Deploy — the widget appears bottom-right on every page
import Script from "next/script";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}

        {/* MilkyWay feedback widget — script proxied via middleware */}
        <my-widget project-id="YOUR_PROJECT_ID"></my-widget>
        <Script strategy="afterInteractive" src="/widget.umd.js" />
      </body>
    </html>
  );
}

React (Vite / CRA)

src/App.jsx

  1. 1Open your root component: src/App.jsx (Vite/CRA)
  2. 2Add the widget element in JSX and load the script in a useEffect
  3. 3Same pattern as Next.js — no index.html involved
import { useEffect } from "react";

function App() {
  // Load the widget script once (served via the MilkyWay proxy).
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "/widget.umd.js";
    s.async = true;
    document.body.appendChild(s);
    return () => document.body.removeChild(s);
  }, []);

  return (
    <div>
      {/* MilkyWay feedback widget — web component in JSX */}
      <my-widget project-id="YOUR_PROJECT_ID"></my-widget>
      {/* rest of your app */}
    </div>
  );
}

export default App;

Django

templates/base.html

  1. 1Open your base template: templates/base.html
  2. 2Paste the two lines just before the closing </body> tag
  3. 3Every page that extends base.html gets the widget automatically
{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>{% block title %}My Site{% endblock %}</title>
  </head>
  <body>
    {% block content %}{% endblock %}

    <!-- MilkyWay feedback widget -->
    <my-widget project-id="YOUR_PROJECT_ID"></my-widget>
    <script src="https://www.mrdmilkyway.com/widget.umd.js"></script>
  </body>
</html>

Plain HTML

index.html

  1. 1Open your index.html (or any page)
  2. 2Paste the two lines just before the closing </body> tag
  3. 3Done — works on any static host
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Site</title>
  </head>
  <body>
    <h1>Hello world</h1>

    <!-- MilkyWay feedback widget -->
    <my-widget project-id="YOUR_PROJECT_ID"></my-widget>
    <script src="https://www.mrdmilkyway.com/widget.umd.js"></script>
  </body>
</html>

Good to know