Make Tracefield your own.

Start with the native project.

Tracefield is an editable Framer marketing website for an AI software business. Its interactive examples help explain your product; they do not provide an observability backend, user accounts or SaaS billing.

1. Work in your own unpublished copy. Open Pages → Start here — Tracefield for the guide included in the project.
2. Open Preview and explore Home, Product, Use Cases, Integrations, Pricing, Resources, Changelog and Contact. Resources also has a CMS article detail page; a custom 404 is included.
3. Keep Request Console in Sample data mode for a demonstration that needs no API account. The other illustrative interactions also work without an external service.

Framer hosting, CMS and localization depend on your plan. External API and email services are separate. No paid plan or third-party account is activated by this template.

• Explore the native demo ↗

Set your identity once, then review each page.

The layout and text remain editable in Framer. Shared components keep the navigation and footer consistent.

1. In Assets, edit Site Navigation and Site Footer. Change the brand, destinations and contact links in those shared components.
2. Update native text styles and page copy. Select each interactive component to change the content and colours exposed in the right-hand property panel.
3. Replace fictional product names, integration claims and example metrics with your own supported information. Check longer labels on Phone and Tablet.

Component controls apply to that instance. Updating a colour, rate or name does not automatically rewrite other instances or nearby marketing text.

Publish articles through the CMS.

Field Notes contains the article title, summary, category and rich text body. The Resources page and article template already use native CMS bindings.

1. Open CMS → Field Notes. Edit an existing article or create a draft with your own title, summary, category and body.
2. Review the article in Preview, including its URL, links and metadata. Keep the collection bindings when changing its typography.
3. Publish only reviewed articles. For imports from public JSON, follow the separate ErinTech Connect guide; imported collections still need to be bound to a layout.

• Read the Connect guide

Tune the demos to your product.

Use the property panel to adjust the request explorer and pricing calculator without changing their source code.

Connect a public request feed when ready.

On Product, select Request Console. Choose Public API and set Feed URL to a public HTTPS endpoint. Canvas uses sample records; Preview and the published site read the configured feed.

1. Try the ErinTech demo feed below. It contains a fixed, simulated snapshot; Refresh reads it again without making AI model calls.
2. For your own endpoint, use the version 1 request format, at most 100 records and unique IDs. Enable browser GET access through CORS for Preview and your published domain.
3. Test a successful response, an empty result and a failed request. Check filtering, sorting and Refresh on the final site.

Publish only deliberately public data. Requests omit credentials and time out after ten seconds. Any JSON returned by your endpoint can be inspected by visitors, including fields that the interface does not display. Keep private logs, prompts and API keys on your own backend.

• View the simulated request JSON ↗
• Feed format and troubleshooting

Turn demo requests into real enquiries.

The public Contact demo is a no-send preview. It validates sample entries, clears them and shows a confirmation. To receive real requests, configure the native form in your own unpublished project.

1. On Contact, select Contact form / connect your destination. Set Send To → Email to your own mailbox and add your privacy notice and link.
2. Review Name, Email and Workload. Keep required fields, the Email input type, and matching option values and labels. Update the copy to describe your real response process.
3. Select the native Button and restore its Default variant. Review Loading, Success and Error states. Then remove DemoForm → withDemoForm from the form so the native form can run.
4. In your own staging copy, verify invalid input, keyboard submission, mobile layout and actual receipt in your inbox. A success message alone does not prove delivery. Publish after this test.

Editing native fields does not change the separate showcase preview while its override remains active. Native email notification does not automatically send a confirmation to the requester.

Check the site your visitors will use.

Run these checks after rebranding, changing content or connecting a destination. They are a manual launch checklist, not an automatic audit or certification.

1. Replace the site title, description, social image, favicon and language. Give each public page a distinct title and description and a meaningful H1.
2. On your final domain, verify canonical URLs, robots.txt and sitemap.xml. For multiple languages, publish real translated pages with the appropriate Framer localization setup.
3. Test desktop, tablet, phone and 320px widths. Use the menu, filters, calculator, FAQ and form with a keyboard; check focus and reduced motion.
4. Review links, draft CMS content, example claims, form destinations and third-party costs before publishing. Keep the editor setup guide unpublished.