{"updated":"2026-06-26","examples":[{"id":"react-default-renderer","kind":"implementation","title":"React default renderer","summary":"Install the SDK, define a form, create a publishable client, and render native controls.","whenToUse":"Use this when the app just needs a working native form that follows the SDK defaults and saves responses in Fillo.","prompt":"Add a basic Fillo form to a React or Next.js page.","tags":["react","nextjs","install","default-renderer","native-form"],"useCases":["feedback","contact","waitlist","intake"],"patterns":["defineForm","createClient","FilloForm","code-defined-form"],"fieldKinds":["short_text","email","dropdown","long_text"],"packageHints":["@usefillo/react","@usefillo/core"],"sourceUrl":"https://fillo.so/docs/embed","previewUrl":"https://fillo.so/docs/embed","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"Get in touch","description":"We usually reply within a day.","pages":[{"id":"p1","blocks":[{"id":"name","kind":"short_text","label":"Your name","required":true},{"id":"email","kind":"email","label":"Email","required":true},{"id":"topic","kind":"dropdown","label":"What's this about?","options":[{"id":"sales","label":"Sales"},{"id":"support","label":"Support"},{"id":"feedback","label":"Feedback"},{"id":"other","label":"Something else"}]},{"id":"message","kind":"long_text","label":"Message","required":true,"maxLength":4000}]}],"settings":{"submitLabel":"Send message","successTitle":"Message sent","successMessage":"Thanks — we'll get back to you shortly."}},"codeSnippet":"import { FilloForm, createClient, defineForm } from \"@usefillo/react\";\nimport \"@usefillo/react/styles.css\";\n\nconst client = createClient({ key: process.env.NEXT_PUBLIC_FILLO_KEY! });\n\nconst form = defineForm({\n id: \"stable-form-id\",\n title: \"Product feedback\",\n pages: [{ id: \"p1\", blocks: [\n { id: \"email\", kind: \"email\", label: \"Work email\", required: true },\n { id: \"notes\", kind: \"long_text\", label: \"What should we know?\" },\n ]}],\n});\n\nexport function ProductFeedback() {\n return ;\n}"},{"id":"support-intake-dark-panel","kind":"style","title":"Dark support intake panel","summary":"A support form with priority, area, notes, and status updates styled to match a dark app surface.","whenToUse":"Use this for support widgets, account help pages, or admin panels where the host app already has a dark product shell.","prompt":"Support request inside a dark customer portal with priority, affected area, and screenshots or details.","tags":["support","dark-mode","customer-portal","panel","uploads","status"],"useCases":["support","bug-report","customer-success"],"patterns":["theme-prop","css-overrides","multi-select","toggle","file-evidence"],"fieldKinds":["dropdown","phone","multi_select","long_text","checkbox"],"packageHints":["@usefillo/react"],"sourceUrl":"https://fillo.so/examples#support-intake","previewUrl":"https://fillo.so/examples#support-intake","screenshots":[{"label":"Desktop style preview","src":"https://fillo.so/agent-examples/previews/support-intake-dark-panel?viewport=desktop","viewport":"1440x1000","alt":"Dark support intake panel desktop preview: Dark card with quiet borders, high-contrast inputs, and one bright action color."},{"label":"Mobile style preview","src":"https://fillo.so/agent-examples/previews/support-intake-dark-panel?viewport=mobile","viewport":"390x844","alt":"Dark support intake panel mobile preview: Dark card with quiet borders, high-contrast inputs, and one bright action color."}],"visualNotes":["Use the host app panel, toolbar, and spacing before reaching for a new form container.","Keep the submit button as the only saturated element.","Put upload or evidence fields after the issue description so support gets narrative first."],"style":{"mode":"css-classes","surface":"support-panel","summary":"Dark card with quiet borders, high-contrast inputs, and one bright action color.","visualDirection":"The form should look embedded in a product help panel, not like a marketing form dropped onto a dark background.","codeSnippet":"
\n \n
","cssSnippet":".support-panel {\n background: #101217;\n color: #f4f0e8;\n border: 1px solid #252936;\n border-radius: 16px;\n}\n\n.support-panel .fillo-field {\n gap: 0.45rem;\n}\n\n.support-panel .fillo-control,\n.support-panel .fillo-select,\n.support-panel .fillo-textarea {\n background: #171a22;\n border-color: #303544;\n color: #fff8ef;\n}\n\n.support-panel .fillo-submit {\n background: #37d19d;\n color: #07110d;\n}","visualNotes":["Use the host app panel, toolbar, and spacing before reaching for a new form container.","Keep the submit button as the only saturated element.","Put upload or evidence fields after the issue description so support gets narrative first."]},"schema":{"version":1,"title":"Support request","description":"Ask for the evidence support needs before the ticket is routed.","pages":[{"id":"support","blocks":[{"id":"priority","kind":"dropdown","label":"Priority","required":true,"options":[{"id":"low","label":"Low"},{"id":"normal","label":"Normal"},{"id":"urgent","label":"Urgent"}]},{"id":"callback","kind":"phone","label":"Callback number"},{"id":"area","kind":"multi_select","label":"Affected area","options":[{"id":"billing","label":"Billing"},{"id":"uploads","label":"Uploads"},{"id":"account","label":"Account"}]},{"id":"details","kind":"long_text","label":"What should support know?","required":true},{"id":"followup","kind":"checkbox","label":"Send me status updates","appearance":"toggle"}]}],"settings":{"submitLabel":"Open ticket","successTitle":"Ticket opened","successMessage":"Support has the context."}},"theme":{"radius":"12px"},"codeSnippet":"
\n \n
"},{"id":"article-feedback-inline","kind":"style","title":"Inline article feedback","summary":"One-tap helpful/not-helpful feedback with conditional detail only when the answer needs it.","whenToUse":"Use this at the end of docs, help center articles, AI answers, changelog entries, or onboarding tips.","avoidWhen":"Do not use this for long surveys. If there are more than one or two real questions, keep a submit button.","prompt":"Was this helpful feedback at the bottom of a docs article with optional follow-up.","tags":["docs","article","auto-submit","thumbs","feedback","inline"],"useCases":["docs-feedback","help-center","article-feedback","ai-answer-feedback"],"patterns":["submitMode:auto","once_per_visitor","conditional-follow-up","hidden-context"],"fieldKinds":["hidden","select","long_text"],"packageHints":["@usefillo/react","@usefillo/dom"],"sourceUrl":"https://fillo.so/docs/embed","previewUrl":"https://fillo.so/docs/embed","screenshots":[{"label":"Desktop style preview","src":"https://fillo.so/agent-examples/previews/article-feedback-inline?viewport=desktop","viewport":"1440x1000","alt":"Inline article feedback desktop preview: Compact inline surface that feels like part of the article footer."},{"label":"Mobile style preview","src":"https://fillo.so/agent-examples/previews/article-feedback-inline?viewport=mobile","viewport":"390x844","alt":"Inline article feedback mobile preview: Compact inline surface that feels like part of the article footer."}],"visualNotes":["Hide the title if the surrounding section already asks the question.","Use auto-submit only when a single discrete answer can complete the response.","Reveal a text follow-up only for the negative answer."],"style":{"mode":"theme-prop","surface":"article","summary":"Compact inline surface that feels like part of the article footer.","visualDirection":"Small, calm, and close to the content. The form should not interrupt reading or look like a modal.","visualNotes":["Hide the title if the surrounding section already asks the question.","Use auto-submit only when a single discrete answer can complete the response.","Reveal a text follow-up only for the negative answer."]},"schema":{"version":1,"title":"Docs feedback","description":"A tiny feedback form at the end of the install docs.","pages":[{"id":"feedback","blocks":[{"id":"page","kind":"hidden","label":"Page"},{"id":"vote","kind":"select","label":"Was this page helpful?","required":true,"options":[{"id":"up","label":"Yes","icon":"thumbs_up"},{"id":"down","label":"No","icon":"thumbs_down"}]},{"id":"unclear","kind":"long_text","label":"What wasn't clear?","placeholder":"Tell us what you were trying to do, or where the docs got fuzzy.","required":true,"visibleIf":[{"fieldId":"vote","op":"eq","value":"down"}]}]}],"settings":{"submitMode":"auto","submissionLimit":"once_per_visitor","submitLabel":"Send note","successTitle":"Thanks for the feedback","successMessage":"That helps us make the docs clearer."}},"theme":{"radius":"12px"},"codeSnippet":"const articleVote = defineForm({\n id: \"article-feedback\",\n title: \"Was this helpful?\",\n pages: [{ id: \"vote\", blocks: [\n { id: \"path\", kind: \"hidden\", label: \"Page\", paramName: \"path\" },\n { id: \"vote\", kind: \"select\", label: \"Was this helpful?\", required: true,\n options: [\n { id: \"up\", label: \"Yes\", icon: \"thumbs_up\" },\n { id: \"down\", label: \"No\", icon: \"thumbs_down\" },\n ] },\n { id: \"note\", kind: \"long_text\", label: \"What should we add?\",\n visibleIf: [{ fieldId: \"vote\", op: \"eq\", value: \"down\" }] },\n ]}],\n settings: { submitMode: \"auto\", submissionLimit: \"once_per_visitor\" },\n});"},{"id":"settings-cancellation-review","kind":"style","title":"Settings-page cancellation review","summary":"A cancellation form that lives inside account settings and captures reason, timing, and save context.","whenToUse":"Use this for account settings workflows where the form should sit beside billing, plan, or danger-zone controls.","prompt":"Cancellation review inside account settings with reason, retention note, and cancel-after date.","tags":["settings","cancellation","billing","account","retention","danger-zone"],"useCases":["cancellation","billing-change","account-settings"],"patterns":["headless-layout","settings-panel","conditional-copy","date-field"],"fieldKinds":["select","long_text","date"],"packageHints":["@usefillo/react"],"sourceUrl":"https://fillo.so/examples#custom-layout","previewUrl":"https://fillo.so/examples#custom-layout","screenshots":[{"label":"Desktop style preview","src":"https://fillo.so/agent-examples/previews/settings-cancellation-review?viewport=desktop","viewport":"1440x1000","alt":"Settings-page cancellation review desktop preview: Uses the app's settings panel, section header, and action row while Fillo owns field state."},{"label":"Mobile style preview","src":"https://fillo.so/agent-examples/previews/settings-cancellation-review?viewport=mobile","viewport":"390x844","alt":"Settings-page cancellation review mobile preview: Uses the app's settings panel, section header, and action row while Fillo owns field state."}],"visualNotes":["Render fields inside the same settings grid as native account controls.","Use existing destructive-action styling only for the final action, not every field.","Keep the response short enough that cancellation still feels like an account workflow."],"style":{"mode":"headless-layout","surface":"settings-page","summary":"Uses the app's settings panel, section header, and action row while Fillo owns field state.","visualDirection":"Operational and quiet. The form should inherit the settings page rhythm rather than becoming a standalone survey card.","codeSnippet":"import { FilloProvider, FormField, useFillo } from \"@usefillo/react\";\n\nexport function CancellationPanel() {\n return (\n \n \n \n
Account
\n
Before you cancel
\n \n
\n \n \n \n
\n \n \n \n );\n}\n\nfunction SubmitRow() {\n const form = useFillo();\n return ;\n}","visualNotes":["Render fields inside the same settings grid as native account controls.","Use existing destructive-action styling only for the final action, not every field.","Keep the response short enough that cancellation still feels like an account workflow."]},"schema":{"version":1,"title":"Cancellation review","description":"Capture reason, timing, and handoff details before the account is closed.","pages":[{"id":"cancel","blocks":[{"id":"reason","kind":"select","label":"Main reason","required":true,"options":[{"id":"cost","label":"Cost"},{"id":"missing","label":"Missing feature"},{"id":"switching","label":"Switching tools"}]},{"id":"keep","kind":"long_text","label":"What would change your mind?"},{"id":"date","kind":"date","label":"Cancel after"}]}],"settings":{"submitLabel":"Send cancellation","successTitle":"Request saved","successMessage":"Success and finance have the context."}},"theme":{"radius":"12px"},"codeSnippet":"import { FilloProvider, FormField, useFillo } from \"@usefillo/react\";\n\nexport function CancellationPanel() {\n return (\n \n \n \n
Account
\n
Before you cancel
\n \n
\n \n \n \n
\n \n \n \n );\n}\n\nfunction SubmitRow() {\n const form = useFillo();\n return ;\n}"},{"id":"onboarding-profile-native","kind":"style","title":"Native onboarding profile","summary":"A first-run onboarding form embedded in a product setup screen with hidden source context.","whenToUse":"Use this when a user signs up and the app needs account context before creating their first project or workspace.","prompt":"Workspace onboarding form with role, first use case, and source context.","tags":["onboarding","workspace","signup","profile","hidden-fields","native-layout"],"useCases":["onboarding","workspace-setup","activation","product-qualified-leads"],"patterns":["hidden-context","compact-setup","multi-select","native-product-flow"],"fieldKinds":["short_text","select","multi_select","hidden"],"packageHints":["@usefillo/react"],"sourceUrl":"https://fillo.so/examples#beta-access","previewUrl":"https://fillo.so/examples#beta-access","screenshots":[{"label":"Desktop style preview","src":"https://fillo.so/agent-examples/previews/onboarding-profile-native?viewport=desktop","viewport":"1440x1000","alt":"Native onboarding profile desktop preview: Bright setup screen with one focused form section and product navigation around it."},{"label":"Mobile style preview","src":"https://fillo.so/agent-examples/previews/onboarding-profile-native?viewport=mobile","viewport":"390x844","alt":"Native onboarding profile mobile preview: Bright setup screen with one focused form section and product navigation around it."}],"visualNotes":["Use the app's onboarding layout, progress copy, and primary action placement.","Capture hidden source or campaign context through URL prefill instead of visible questions.","Route in onSubmitted only after Fillo records the response."],"style":{"mode":"theme-prop","surface":"onboarding","summary":"Bright setup screen with one focused form section and product navigation around it.","visualDirection":"This should feel like the next step in signup, not a hosted survey detour. Let the app chrome carry trust.","visualNotes":["Use the app's onboarding layout, progress copy, and primary action placement.","Capture hidden source or campaign context through URL prefill instead of visible questions.","Route in onSubmitted only after Fillo records the response."]},"schema":{"version":1,"title":"Set up your workspace","description":"Collect product context before the first project is created.","pages":[{"id":"profile","blocks":[{"id":"workspace","kind":"short_text","label":"Workspace name","required":true},{"id":"role","kind":"select","label":"What do you do?","required":true,"options":[{"id":"founder","label":"Founder"},{"id":"engineer","label":"Engineer"},{"id":"product","label":"Product"},{"id":"ops","label":"Ops"}]},{"id":"first-use","kind":"multi_select","label":"What will you collect first?","options":[{"id":"feedback","label":"Feedback"},{"id":"files","label":"Files"},{"id":"applications","label":"Applications"},{"id":"support","label":"Support requests"}]},{"id":"source","kind":"hidden","label":"Source","paramName":"src"}]}],"settings":{"submitLabel":"Create workspace","successTitle":"Workspace profile saved","successMessage":"The next screen can use this context."}},"theme":{"primary":"#2457ff","radius":"14px"},"codeSnippet":" router.push(\"/projects/new\")}\n/>"},{"id":"security-review-upload","kind":"template","title":"Security review with large uploads","summary":"Multi-page review request with region, procurement files, review deadline, and notes.","whenToUse":"Use this when a product workflow needs customer-owned file uploads, procurement evidence, or security review packets.","prompt":"Security review form with large document upload and data region.","tags":["security","procurement","upload","documents","enterprise","large-files"],"useCases":["security-review","vendor-access","procurement","file-request"],"patterns":["file_upload","multi-page","customer-owned-storage","progress"],"fieldKinds":["email","short_text","dropdown","file_upload","date","long_text"],"packageHints":["@usefillo/react","@usefillo/dom"],"sourceUrl":"https://fillo.so/examples#support-intake","previewUrl":"https://fillo.so/examples#support-intake","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"Security review","description":"Collect documents, regions, and stakeholders before procurement.","pages":[{"id":"company","title":"Company","blocks":[{"id":"email","kind":"email","label":"Requester email","required":true},{"id":"company","kind":"short_text","label":"Company name","required":true},{"id":"region","kind":"dropdown","label":"Data region","required":true,"options":[{"id":"eu","label":"EU"},{"id":"us","label":"US"},{"id":"global","label":"Global"}]}]},{"id":"documents","title":"Documents","blocks":[{"id":"security-packet","kind":"file_upload","label":"Security or procurement packet","required":true,"maxFiles":3,"maxFileSizeMb":5000,"accept":[".pdf",".doc",".docx",".xlsx"]},{"id":"deadline","kind":"date","label":"Review deadline"},{"id":"notes","kind":"long_text","label":"What should the reviewer know?"}]}],"settings":{"submitLabel":"Start review","successTitle":"Review queued","successMessage":"Security has the files and context.","showProgress":true}},"theme":{"radius":"12px"}},{"id":"checkout-help-inline","kind":"style","title":"Checkout help in flow","summary":"A compact help form in checkout with hidden cart context and support follow-up.","whenToUse":"Use this when a user is blocked in checkout and support needs enough context without sending them away.","prompt":"Checkout issue form with hidden cart id, email, problem type, and details.","tags":["checkout","commerce","support","hidden-context","inline","cart"],"useCases":["checkout-help","commerce-support","support"],"patterns":["hidden-context","native-flow","select","onSubmitted"],"fieldKinds":["hidden","email","select","long_text"],"packageHints":["@usefillo/react"],"screenshots":[{"label":"Desktop style preview","src":"https://fillo.so/agent-examples/previews/checkout-help-inline?viewport=desktop","viewport":"1440x1000","alt":"Checkout help in flow desktop preview: Small support box that inherits checkout spacing and uses the commerce accent color."},{"label":"Mobile style preview","src":"https://fillo.so/agent-examples/previews/checkout-help-inline?viewport=mobile","viewport":"390x844","alt":"Checkout help in flow mobile preview: Small support box that inherits checkout spacing and uses the commerce accent color."}],"visualNotes":["Use hidden cart/account fields so the respondent does not retype product context.","Keep the form short enough that checkout can continue.","Use onSubmitted for analytics or local UI changes, not for response storage."],"style":{"mode":"theme-prop","surface":"checkout","summary":"Small support box that inherits checkout spacing and uses the commerce accent color.","visualDirection":"Do not block the whole checkout. Keep it beside the order summary or below the failing step.","visualNotes":["Use hidden cart/account fields so the respondent does not retype product context.","Keep the form short enough that checkout can continue.","Use onSubmitted for analytics or local UI changes, not for response storage."]},"schema":{"version":1,"title":"Checkout help","description":"Capture enough context to help without leaving checkout.","pages":[{"id":"p1","blocks":[{"id":"cart","kind":"hidden","label":"Cart id","paramName":"cart"},{"id":"email","kind":"email","label":"Email for the order","required":true},{"id":"problem","kind":"select","label":"What is happening?","required":true,"options":[{"id":"payment","label":"Payment failed"},{"id":"shipping","label":"Shipping option missing"},{"id":"coupon","label":"Coupon does not work"}]},{"id":"details","kind":"long_text","label":"Anything else support should know?"}]}],"settings":{"submitLabel":"Ask support","successTitle":"Support has the cart context","successMessage":"You can keep checking out while the team reviews it."}},"theme":{"primary":"#ef5f3c","radius":"10px"},"codeSnippet":" track(\"checkout_help_requested\", { responseId: id })}\n/>"},{"id":"nps-conditional-follow-up","kind":"template","title":"NPS with conditional follow-up","summary":"A 0-10 recommendation score with different follow-up copy for low and high scores.","whenToUse":"Use this for product pulse checks where a numeric score matters but the follow-up should stay relevant.","prompt":"NPS survey with score and conditional follow-up question.","tags":["nps","linear-scale","conditional-logic","feedback","survey"],"useCases":["nps","customer-feedback","pulse-survey"],"patterns":["linear_scale","visibleIf","conditional-follow-up","hidden-source"],"fieldKinds":["linear_scale","long_text","checkbox"],"packageHints":["@usefillo/react","@usefillo/dom"],"sourceUrl":"https://fillo.so/examples#nps","previewUrl":"https://fillo.so/examples#nps","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"How are we doing?","pages":[{"id":"p1","blocks":[{"id":"score","kind":"linear_scale","label":"How likely are you to recommend us?","min":0,"max":10,"minLabel":"Not likely","maxLabel":"Very likely","required":true},{"id":"why","kind":"long_text","label":"What should we improve?","description":"Shown only when the score is 8 or lower.","visibleIf":[{"fieldId":"score","op":"lt","value":9}]},{"id":"followup","kind":"checkbox","label":"You can email me about this"}]}],"settings":{"submitLabel":"Send feedback","successTitle":"Thanks for the feedback","successMessage":"Every response goes straight to the team."}}},{"id":"job-application-multipage","kind":"template","title":"Multi-page job application","summary":"Role application with contact details, portfolio, screening fields, and applicant confirmation.","whenToUse":"Use this for applications where respondents need orientation and progress across multiple pages.","prompt":"Job application with resume or portfolio, role selection, and screening questions.","tags":["job-application","hiring","multi-page","portfolio","signature"],"useCases":["job-application","application","screening"],"patterns":["multi-page","showProgress","signature","date"],"fieldKinds":["short_text","email","phone","url","select","date","long_text","signature"],"packageHints":["@usefillo/react","@usefillo/dom"],"sourceUrl":"https://fillo.so/examples#job-application","previewUrl":"https://fillo.so/examples#job-application","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"Apply to Acme","description":"Engineering, design, and product roles. Takes about two minutes.","pages":[{"id":"about","title":"About you","blocks":[{"id":"name","kind":"short_text","label":"Full name","required":true},{"id":"email","kind":"email","label":"Email","required":true},{"id":"phone","kind":"phone","label":"Phone"},{"id":"portfolio","kind":"url","label":"Portfolio or GitHub","placeholder":"https://"}]},{"id":"role","title":"The role","blocks":[{"id":"team","kind":"select","label":"Which team?","required":true,"options":[{"id":"eng","label":"Engineering"},{"id":"design","label":"Design"},{"id":"product","label":"Product"}]},{"id":"start","kind":"date","label":"Earliest start date"},{"id":"pitch","kind":"long_text","label":"Why Acme?","maxLength":600},{"id":"sign","kind":"signature","label":"Sign to confirm your application"}]}],"settings":{"submitLabel":"Submit application","successTitle":"Application received","successMessage":"We'll be in touch soon."}}},{"id":"custom-fields-code-first","kind":"implementation","title":"Code-first custom fields","summary":"Use custom field kinds when the host app owns specialized inputs like color, slider, or address pickers.","whenToUse":"Use this when a default input would be awkward and the host app already has a component that should own the interaction.","prompt":"A code-defined form with custom color and slider fields rendered by host components.","tags":["custom-field","code-first","custom-components","slider","color"],"useCases":["project-setup","configuration","product-builder"],"patterns":["custom-components","defineForm","host-owned-ui"],"fieldKinds":["short_text","select","custom"],"packageHints":["@usefillo/react","@usefillo/core"],"sourceUrl":"https://fillo.so/examples#code-first","previewUrl":"https://fillo.so/examples#code-first","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"Start a project","description":"This whole form is a plain object in the page — open the source.","pages":[{"id":"p1","blocks":[{"id":"name","kind":"short_text","label":"Project name","required":true},{"id":"plan","kind":"select","label":"Plan","required":true,"options":[{"id":"hobby","label":"Hobby"},{"id":"pro","label":"Pro"},{"id":"scale","label":"Scale"}]},{"id":"accent","kind":"custom","component":"color","label":"Brand color","config":{"swatches":["#18181b","#16a34a","#e8501a","#db2777","#a16207"]}},{"id":"seats","kind":"custom","component":"slider","label":"Seats","config":{"min":1,"max":50}}]}],"settings":{"submitLabel":"Create project","successTitle":"Project created","successMessage":""}},"codeSnippet":"const customComponents = {\n color: ColorPickerField,\n slider: SeatSliderField,\n};\n\n;"},{"id":"headless-product-layout","kind":"implementation","title":"Headless product layout","summary":"Run the Fillo engine while placing fields inside the host app's own layout and surrounding content.","whenToUse":"Use this when the form belongs inside an existing modal, wizard, settings page, or product-specific card.","prompt":"Custom layout with first and last name side by side and plan selection in the host app design.","tags":["headless","custom-layout","formfield","provider","native-layout"],"useCases":["onboarding","settings","account-setup","product-layout"],"patterns":["FilloProvider","FormField","useFillo","host-owned-layout"],"fieldKinds":["short_text","email","select"],"packageHints":["@usefillo/react"],"sourceUrl":"https://fillo.so/examples#custom-layout","previewUrl":"https://fillo.so/examples#custom-layout","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"Custom layout","pages":[{"id":"p1","blocks":[{"id":"first","kind":"short_text","label":"First name","required":true},{"id":"last","kind":"short_text","label":"Last name","required":true},{"id":"email","kind":"email","label":"Email","required":true},{"id":"plan","kind":"select","label":"Plan","required":true,"options":[{"id":"starter","label":"Starter"},{"id":"team","label":"Team"}]}]}],"settings":{}},"codeSnippet":"import { FilloProvider, FormField, useFillo } from \"@usefillo/react\";\n\nexport function CancellationPanel() {\n return (\n \n \n \n
Account
\n
Before you cancel
\n \n
\n \n \n \n
\n \n \n \n );\n}\n\nfunction SubmitRow() {\n const form = useFillo();\n return ;\n}"},{"id":"beta-access-request","kind":"template","title":"Beta access request","summary":"Collect feature interest, team size, and follow-up consent before enabling a beta.","whenToUse":"Use this for feature gates, beta rollouts, waitlists, and early-access workflows inside an app.","prompt":"Beta waitlist with feature choice, team size, and feedback-call consent.","tags":["beta","waitlist","feature-gate","early-access","product"],"useCases":["beta-access","waitlist","feature-request"],"patterns":["dropdown","number","checkbox","product-context"],"fieldKinds":["email","dropdown","number","checkbox"],"packageHints":["@usefillo/react","@usefillo/dom"],"sourceUrl":"https://fillo.so/examples#beta-access","previewUrl":"https://fillo.so/examples#beta-access","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"Beta access","description":"Collect the right context before enabling a new feature for a customer.","pages":[{"id":"access","blocks":[{"id":"email","kind":"email","label":"Work email","required":true},{"id":"feature","kind":"dropdown","label":"Feature","required":true,"options":[{"id":"ai","label":"AI assistant"},{"id":"uploads","label":"Large uploads"},{"id":"audit","label":"Audit logs"}]},{"id":"team","kind":"number","label":"Team size","min":1,"max":500},{"id":"terms","kind":"checkbox","label":"I can join a feedback call"}]}],"settings":{"submitLabel":"Request access","successTitle":"Request queued","successMessage":"Product has the account context."}},"theme":{"radius":"14px"}},{"id":"product-priority-ranking","kind":"template","title":"Product priority ranking","summary":"Let an account rank roadmap priorities and save that signal with the response.","whenToUse":"Use this when a customer success, product, or onboarding flow needs structured priority signal.","prompt":"Feature priority ranking form for a customer account.","tags":["ranking","roadmap","product-feedback","priorities"],"useCases":["roadmap","product-feedback","customer-success"],"patterns":["ranking","structured-feedback","native-product-flow"],"fieldKinds":["ranking"],"packageHints":["@usefillo/react","@usefillo/dom"],"sourceUrl":"https://fillo.so/examples#feature-priority","previewUrl":"https://fillo.so/examples#feature-priority","screenshots":[],"visualNotes":[],"schema":{"version":1,"title":"Feature priority","description":"Let an account rank what should happen next.","pages":[{"id":"rank","blocks":[{"id":"priorities","kind":"ranking","label":"Rank next priorities","required":true,"options":[{"id":"audit","label":"Audit logs"},{"id":"sso","label":"SSO"},{"id":"exports","label":"CSV exports"},{"id":"roles","label":"Custom roles"}]}]}],"settings":{"submitLabel":"Save ranking","successTitle":"Ranking saved","successMessage":""}},"theme":{"radius":"12px"}}]}