AMBRYX PLAYGROUND
Contact us
Try the experience. Then bring it to your own website.
Connect your website
Enable hosted forms and allow your exact website origin in Client Admin. Use a site-bound integration client with contacts.submit. These forms do not require visitors to log in.
# 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=contacts.submit'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.
# 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": "Contact",
"parentOrigin": "https://your-website.com",
"resourceId": "31e355c2-28e7-4a15-b925-6af66a4a8c93"
}'Contact and Lead both use purpose Contact and a template UUID as resourceId. Use your own site’s template ID when integrating a custom form.
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 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 messages and leads are saved in Ambryx Contacts for the configured website, where your team can review them in Client Admin. After editing a template, publish it and request a fresh session. Never hardcode an issued embed URL.