Embed your initial form

The snippet shows your workspace’s initial form on your own website, in your colours and type. Each brief whose email is verified arrives in your Intake queue as a draft, with the page it came from. Its settings live on the Embed page of your workspace, which gives the snippet with your workspace’s address filled in.

The snippet

Paste it where the form should appear, on a page of one of your allowed domains:

<div data-agreed="your-workspace"></div>
<script async src="https://agreedwork.com/embed/agreed.js"></script>

In React or Next.js, load the script with next/script, so it runs after hydration:

import Script from "next/script";

export function ProjectBrief() {
  return (
    <>
      <div data-agreed="your-workspace" />
      <Script src="https://agreedwork.com/embed/agreed.js" strategy="afterInteractive" />
    </>
  );
}

• A page may hold several elements. The script runs once, and also finds elements added later, such as after a client-side navigation.
• It draws inside the element’s shadow root, so your page’s CSS does not reach it. Anything you put inside the element shows only if the script does not run, so a plain link there is a fallback.
• The launcher’s script tag, with data-workspace and data-name, still adds its link after itself.

Options

Every option is a data attribute on the element, and all are optional. A theme attribute overrides your Embed settings on that page; set it to default for Agreed’s own value. A value outside its rule is ignored, with a warning in the browser’s console.

Three modes

• Inline: the form sits in your page and grows with each screen, with no scroll bar of its own.
• Popup: a button opens the form in a dialog. Escape, the close button or a click outside closes it, and reopening it keeps the answers.
• Link: a button opens your hosted form in a new tab.

The button takes your accent and radius, and your page’s own font.

Events

The element dispatches three events. They bubble, so you can listen on the element or on the document. None carries an answer, a name or an email.

document.addEventListener("agreed:submitted", (event) => {
  // event.detail is { workspace, source }: record the lead in your analytics here.
});

Allowed domains

Only the domains on your Embed page, and Agreed itself, may show your form; anywhere else the browser blocks its frame. List each address visitors use, such as example.com and www.example.com. Addresses are https, except a local one such as http://localhost:4321 while you build your site. The list is public, since browsers read it from your form’s page.

Where a brief came from

Each brief carries the address of the page it was sent from, without its query or fragment, the page’s UTM parameters and the element’s data-source. They show with the draft in Intake and on its project.

Troubleshooting

• The frame is blocked. Your domain is not allowed yet: add it on the Embed page. The browser’s console names the address to add.
• Nothing appears, and the console reports a Content-Security-Policy violation. Your site sets its own policy: allow https://agreedwork.com in script-src, connect-src and frame-src.
• In React, the form vanishes or React warns about the markup. Load the script with next/script, as above, after hydration.
• The console says there is no brief. Check the address in data-agreed, and that your launcher is on in Intake.

To try your settings before you paste the snippet, open the blank test page from the Embed page.