SDK Integration

Embed the widget as a web component — one tag, works in React, Vue, Angular, or plain HTML.

The @prestatech/agentic-widget package registers a <presta-agent-widget> element you can use anywhere. It's self-contained: no build step required, and its styling never clashes with your page.

Before you start: create an agent and copy its Agent ID → Create your agent.

Step 1 — Add the package

npm install @prestatech/agentic-widget

Or load it straight from a CDN — no install:

<script src="https://unpkg.com/@prestatech/agentic-widget"></script>

Step 2 — Add the widget

Two attributes are required: your Agent ID and the base URL.

<presta-agent-widget
  agent-id="YOUR_AGENT_ID"
  base-url="https://api.prestatech.com/widget">
</presta-agent-widget>

With just those, the applicant verifies themselves with a one-time passcode before the flow begins.

Step 3 — Skip the passcode (recommended)

To send the applicant straight into the flow, start a session on your backend and pass the returned token:

<presta-agent-widget
  agent-id="YOUR_AGENT_ID"
  base-url="https://api.prestatech.com/widget"
  token="THE_TOKEN_FROM_YOUR_SESSION">
</presta-agent-widget>

Step 4 — Listen for the result

The widget reports completion with DOM events on the element:

const el = document.querySelector('presta-agent-widget')

el.addEventListener('done', (e) => {
  console.log('Finished', e.detail) // { agentId, processId }
})

el.addEventListener('error', (e) => {
  console.log('Could not start', e.detail.code)
})

Framework snippets

React

import '@prestatech/agentic-widget'

export function Onboarding() {
  return (
    <presta-agent-widget
      agent-id="YOUR_AGENT_ID"
      base-url="https://api.prestatech.com/widget"
      token="THE_TOKEN"
      ref={(el) => el?.addEventListener('done', (e) => console.log(e.detail))}
    />
  )
}

Vue

<script setup>
import '@prestatech/agentic-widget'
</script>

<template>
  <presta-agent-widget
    agent-id="YOUR_AGENT_ID"
    base-url="https://api.prestatech.com/widget"
    token="THE_TOKEN"
    @done="(e) => console.log(e.detail)"
  />
</template>

Tell Vue the tag is a custom element so it doesn't warn: app.config.compilerOptions.isCustomElement = (tag) => tag === 'presta-agent-widget'.

Attributes

Sizing

The element is the widget — size it by styling the tag:

presta-agent-widget {
  display: block;
  max-width: 920px;
  margin: 0 auto;
}