# Poily high-fidelity integration — reusable agent prompt (``) For when a site wants **Poily to render the form** (schema, validation, submission, attribution all owned by Poily) but styled to look **native/on-brand** — no iframe, one custom element. This is the middle tier of the forms guide (https://docs.poily.com/forms), the counterpart to scan-to-create import. Use it for the "we want a Poily-managed form that looks like ours" case. ## Operator fill-ins - `{{FORMS_DOMAIN}}` — tenant forms host, e.g. `forms.doerfy.com` - `{{SLUG}}` — a **published** Poily form's slug (from `app.poily.com → Forms → [form] → Distribution`) - `{{PAGE_URL}}` — the **deployed** page to place it on - `{{PLACEMENT}}` — per-CTA attribution tag, e.g. `home_hero` - `{{BRAND}}` — the site's font / accent color / radius (for the CSS below) ## Operator precheck — confirm first 1. A **published** Poily form exists and you have its `{{SLUG}}` (unlike import, this tier does **not** create the form — it renders an existing one). If you don't have one, use the scan-to-create import prompt first, or build it in the Forms module. 2. `{{FORMS_DOMAIN}}/poily-form.js` is live and current: `curl -sI https://{{FORMS_DOMAIN}}/poily-form.js` → 200. 3. The agent can edit the **deployed** source of `{{PAGE_URL}}` (not just a preview). --- ## Prompt (paste to the tenant's marketing-site agent) > Render our Poily form on the page with Poily's `` web component, styled to match our > brand. Poily owns the schema/validation/submission/attribution; we own the CSS. > > **1) Add the component where the form should appear on `{{PAGE_URL}}`:** > ```html > > > ``` > **2) Style it from our stylesheet** (these pierce the component's shadow DOM — no iframe limits): > ```css > poily-form { > --poily-font: {{BRAND font}}; > --poily-accent: {{BRAND accent}}; > --poily-field-radius: {{BRAND radius}}; > --poily-gap: 18px; > /* also available: --poily-text --poily-muted --poily-field-bg --poily-field-border > --poily-button-bg --poily-button-text --poily-button-radius --poily-label-color > --poily-label-weight --poily-error */ > } > poily-form::part(button) { text-transform: uppercase; letter-spacing: .04em; } > poily-form::part(label) { font-weight: 700; } > /* parts: form intro field-grid field label input select textarea options option button error success required */ > ``` > Optional microcopy via slots: `…`, `No credit card. No spam.`. > Half-width fields auto-flow into a 2-column grid; it collapses to one column on narrow screens. > > **3) Deploy to `{{PAGE_URL}}` — the real live origin** (the component fetches the schema + submits to > the Poily gateway, and CORS keys off your origin; a preview/localhost may be blocked). > > **4) Verify on the LIVE page — not a replay.** DevTools → Network + Console: > - `poily:ready` fires (the schema loaded) and the form renders styled. > - Submit → `POST …/dev/f/{{SLUG}}/submit` → `200 {"id":"…"}` and a `poily:submitted` event. > - Then the row in `app.poily.com → [tenant] → Submissions` (with `{{PLACEMENT}}` + any UTMs). > > **Report:** the submit `id` from the real Network trace, and a screenshot of the styled form. --- ## import vs high-fidelity — pick the tier - **`data-poily-import` (scan-to-create):** you already have a native `

`; Poily builds its form from your markup and captures. Your HTML renders. Zero form-building. - **`` (this prompt):** you want **Poily** to render a managed form that *looks* native. Needs an existing slug. Best when there's no good native form to reuse, or you want Poily to own validation/layout while matching your brand.