GUIDES

Embed the widget

One script tag puts an agent inside your product. It reads your docs, calls your tools, and does the thing, right where your users already are.

The widget is vanilla JavaScript with zero dependencies. It renders in a Shadow DOM so it never collides with your styles. Paste one script tag, set your project key, and a floating chat button appears. That is the whole install.

Add the script

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 loads async and paints nothing until a user clicks it open.

html

<script
  src="https://eerraa.online/static/widget.js"
  data-api-key="era_your_project_key"
  data-title="Assistant"
  data-primary-color="#19c37d"
  data-placeholder="Ask me anything…"
  data-position="bottom-right"
></script>

Only data-api-key is required. Everything else has a sensible default, so the shortest working install is a single tag with just your key.

Configuration attributes

Configure the widget entirely from data-* attributes on the script tag. No build step, no config file.

Field	Type	Description
`data-api-key`required	string	Your project key. Starts with era_. Ties the widget to one project and its tools, knowledge, and keys.
`data-title`	string	Header text shown at the top of the panel. Defaults to "Assistant".
`data-primary-color`	hex	Accent color for the launcher and buttons. Defaults to #19c37d.
`data-placeholder`	string	Placeholder text in the message input.
`data-position`	string	Launcher corner: bottom-right (default) or bottom-left.
`data-theme`	string	Force a light or dark panel. Omit to follow your page.
`data-max-length`	number	Character cap on a single user message.
`data-feedback`	string	Set to "off" to hide the thumbs up / down feedback controls.
`data-options`	string	Set to "off" to disable the clickable choice buttons the agent can render.
`data-status-style`	string	Tone of the live tool-status lines: "professional" or "playful".
`data-base-url`	url	Point the widget at your own proxy instead of eerraa.online. Advanced.

Identify the current user

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.

html

<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://eerraa.online/static/widget.js" data-api-key="era_your_project_key"></script>

This is open identity. It is perfect for personalization but the browser could spoof it, so it does not unlock private uploads or the vault. To make identity tamper-proof, sign it server-side. See Identify users.

Drive it from JavaScript

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?")

// Clear the conversation
ERA.clear()

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

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

ERA only exists after the widget script has loaded. If you call it from your own inline script, wait for the load event or place your code after the widget tag.

NEXTIdentify users