AMBRYX PLAYGROUND

Create your account

Try the experience. Then bring it to your own website.

Sample only

Your website. Ambryx behind it.

Embed the hosted form on your website. Ambryx handles the form and stores the submitted data.

Integration: Hosted iframe
Data destination: Ambryx accounts

Configure your website and credentials in Client Admin. Each website uses its own site binding and exact registered origins.

b6f83181-f2cc-46a3-b173-65e4a9e8af5fSample template UUID. Use your own template UUID for a custom website form.

Connect your website

Enable hosted forms and allow your exact website origin in Client Admin. Use a site-bound integration client with users.register. These forms do not require visitors to log in.

Your website UUID

Website origin

Get a machine token · backend

# Run on your server; use the integration credentials from Client Admin.
curl --request POST 'https://api.ambryx.io/connect/token' \
  --data-urlencode 'grant_type=client_credentials' \
  --data-urlencode "client_id=$AMBRYX_CLIENT_ID" \
  --data-urlencode "client_secret=$AMBRYX_CLIENT_SECRET" \
  --data-urlencode 'scope=users.register'

Create a short-lived form session

Your backend fixes the site, parent origin and form. Validate visitor Origin/CSRF and apply rate limits. Return only embedUrl and expiresAt with Cache-Control: no-store.

Create a session · backend

# Backend only. Use your own site-bound integration client.
# Never expose AMBRYX_ACCESS_TOKEN or the client secret to the browser.
curl --request POST 'https://api.ambryx.io/api/v2/sites/YOUR_FULL_SITE_UUID/form-sessions' \
  --header "Authorization: Bearer $AMBRYX_ACCESS_TOKEN" \
  --header 'Content-Type: application/json' \
  --data '{
  "purpose": "AccountRegistration",
  "parentOrigin": "https://your-website.com"
}'

Signup selects the published website Signup template, falling back to the Master default. Do not send resourceId.

Embed on your website

Implement the initialization endpoint and CSRF token in this example. The form UI stays hosted by Ambryx; your website can place it anywhere in its layout.

Iframe + initialization · frontend

<iframe id="ambryx-form" title="Ambryx hosted form"
  sandbox="allow-scripts allow-same-origin allow-forms"
  referrerpolicy="no-referrer" height="760"
  style="width:100%;border:0"></iframe>
<script>
const frame = document.getElementById('ambryx-form');
const apiOrigin = "https://api.ambryx.io";
async function initializeForm(csrfToken) {
  // Implement this endpoint on YOUR backend. Fix the site, form and
  // parentOrigin there; validate Origin/CSRF and apply rate limits.
  const response = await fetch('/api/ambryx/form-session', {
    method: 'POST', credentials: 'same-origin',
    headers: {'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken},
    body: '{}'
  });
  if (!response.ok) throw new Error('Unable to initialize form');
  const data = await response.json();
  const url = new URL(data.embedUrl);
  if (url.origin !== apiOrigin) throw new Error('Untrusted form origin');
  frame.src = url.href;
}
window.addEventListener('message', event => {
  if (event.origin !== apiOrigin || event.source !== frame.contentWindow) return;
  const data = event.data;
  if (data?.type === 'ambryx:form:resize' && Number.isFinite(data.height))
    frame.height = String(Math.max(300, Math.min(10000, Math.ceil(data.height))));
});
// Obtain your visitor CSRF token, then call initializeForm(csrfToken).
// Show a retry state on failure and request a fresh session when retrying.
</script>

Data stays in Ambryx

Real signup creates Ambryx accounts and site memberships, with email confirmation. It does not automatically create a logged-in website session. After editing a template, publish it and request a fresh session. Never hardcode an issued embed URL.