Embed the widget

Grab your project key from the admin dashboard (it starts with era_) and drop the tag anywhere in your page, ideally right before the closing </body>. It paints a floating launcher button as soon as it runs; the panel stays closed until someone clicks it.

<script
  src="https://agentifys.ai/static/widget.js"
  data-api-key="era_your_project_key"
  data-title="Assistant"
  data-primary-color="#6366f1"
  data-placeholder="Ask me anything…"
  data-position="bottom-right"
></script>

Configure the widget entirely from data-* attributes on the script tag. No build step, no config file. Each one is read once, when the script runs.

Full descriptions, the CSS-variable and ::part() theming contract, and a live playground are in the Widget API reference.

Set window.ERAConfig before the widget script loads so the agent knows who it is talking to. The id is the only required field. Anything you put under data becomes context the agent (and your policies) can use.

<script>
  window.ERAConfig = {
    user: {
      id: "user_123",           // required
      name: "Sara",
      email: "sara@acme.com",
      role: "admin",
      data: { plan: "pro", seats: 12 }
    }
  }
</script>
<script src="https://agentifys.ai/static/widget.js" data-api-key="era_your_project_key"></script>

After boot the widget re-reads window.ERAConfig.user on every request it makes, so assigning a new object switches identity on a running widget without a reload. That is also how you keep a signed identity alive: a signature expires 300 seconds after it was made, so on a page that stays open, re-sign on a timer and assign the result. The pattern is in the Widget API reference.

Once loaded, the widget exposes a small global ERA object. Use it to open the panel from your own button, push a message in, or react to what the agent says.

// Open or close the panel from your own UI
ERA.open()
ERA.close()

// Send a message as if the user typed it
ERA.sendMessage("What is my current plan?")

// End this conversation and start a new one
ERA.clear()

// Open the "My tasks" panel (scheduled tasks)
ERA.openTasks()

// Kick off per-user MCP OAuth for one server
ERA.connectMcp("tavily")

Every method, the full onMessage event shape, and what the agent can and cannot do to your page are in the Widget API reference.

The widget is a classic script, not a module. It reads its configuration from document.currentScript, which your bundler cannot give it: an import of widget.js, or a tag with type="module", leaves that null. The widget then looks at the last <script> on the page, finds no data-api-key, logs [Agentifys Widget] data-api-key is required to the console and renders nothing at all.

So inject a real script element. Do it after you know who the user is, and tear it down when they sign out:

// Mount — after your app knows the user.
function mountEra(user) {
  window.ERAConfig = { user }
  const s = document.createElement("script")
  s.id = "era-widget-script"
  s.src = "https://agentifys.ai/static/widget.js"
  s.dataset.apiKey = "era_your_project_key"
  s.dataset.title = "Assistant"
  document.body.appendChild(s)
}

// Unmount — on sign-out, or when your root component goes away.
function unmountEra() {
  window.ERA?.clear()      // drop the stored session id
  window.ERA?.destroy()    // remove the widget and its document listeners
  document.getElementById("era-widget-script")?.remove()
}