SETUP GUIDES / RELAY
Give your next handoff a home.
Relay is a marketing website for workflow automation software serving sales, support and operations teams. Start with your story, then make the content library your own.
Relay 1.0.0 · Native Framer website and companion kit · Purchase terms 1.1.
Keep your order and delivery together.
After a verified purchase, you receive an editable Framer copy and a separate companion kit. The purchase documents explain the one-project license, support and first-month offer.
- Keep the product-delivery email: its private link opens your order page. A payment receipt is a separate message.
- Create the native project copy in your own Framer workspace, download the companion and open START_HERE.html after extraction. The ZIP alone is not a Framer project import.
- A download link expires after five minutes. Reopen the private email link for a fresh download for a valid order. After refreshing the delivery page, reopen that email link if asked for access.
- If the email or an item is missing, contact info@erintechlabs.com with your order reference for verification. Do not buy again or share private delivery links. Recovery is support-assisted, not an automatic email lookup.
Understand what the template provides.
Relay provides an editable Framer website and illustrative interactions. The Framer CMS manages published website content; it is not an inbox for incoming requests, an automation engine or a customer account system.
- Use an unpublished copy of your delivered native Framer project. Keep your original copy as a reference.
- Review Home, Product, Workflows, Integrations, Pricing, Guides, Changelog, Contact and the 404 page in Preview.
- Replace the fictional product story and illustrative integration claims with capabilities your own software actually supports.
The local authoring plugin is an internal construction tool, not a buyer requirement or a hosted SaaS backend. Framer hosting and CMS capacity depend on your own plan.
Make the visual identity yours.
Page copy, links and the editorial photograph are native Framer layers. Small code components provide the workflow demonstrations, connection map and closing ribbon.
- In Assets, open Relay Navigation and select Navigation controls. Edit Brand, Links and CTA there to update the shared navigation across all pages. Check the phone menu and avoid detaching individual instances.
- Open Relay Footer in Assets to edit its native closing copy, links and credit once for the whole site. Use the Relay text styles in Assets to adjust typography. Keep article paragraph and heading styles separate from large marketing headings.
- Replace the human handoff image, keep a useful crop at narrow widths, and update its alternative text. The included photograph depicts fictional people.
- Select an interactive component to edit the controls shown in the property panel. Controls apply to that instance; changing a color does not automatically update other instances or native section backgrounds.
Manage your content through the CMS.
Workflows, Integrations, Guides and Updates are native content collections. Their index lists and detail pages use CMS bindings, so the same page design can display different records.
- Open CMS and choose a collection. Create a draft or edit an existing example.
- Set Title, Summary, Category and Body. Use paragraphs, lists and headings in the rich-text editor instead of adding manual spacing with blank lines.
- In Workflows, Integrations and Guides, replace Cover and its alternative text. Detail pages read this image from the current record; Workflows and Guides also show it in their index rows. Clearing Cover hides its image area. Check the crop on desktop and phone.
- In a workflow, choose Related integrations. The related list on its detail page shows those records and links to their integration pages. Preview a second workflow to check that the selection changes.
- Keep a workflow's Body as its overview. Fill Trigger, Prerequisites, Steps and Expected result for the dedicated sections. Destination controls the Talk through this workflow button; replace the sample contact link with a valid destination for that workflow.
- In Integrations, edit Icon monogram, Example triggers and actions and Setup notes. The directory and detail page display the monogram; clearing it hides both tiles. Choose Related workflows to display the corresponding workflow links. These selections are edited separately from a workflow's Related integrations field; update both records when you want reciprocal links.
- In Guides, choose Related workflow to show one relevant recipe. In Updates, set Published on to control the date above the article title. The sample article uses October 3, 2026; replace it with your announcement's date. To omit it, single-click the Published on cell in the CMS grid and press Backspace with the cell selected. Confirm that the cell is empty; the article then hides the date.
- Optional sections collapse when their fields are empty: Trigger, Expected result, Prerequisites, Steps and Destination on workflows; Icon monogram, Example triggers and actions and Setup notes on integrations. Clearing a related-record field hides its heading and list together. On the published site, this section also disappears when every selected related item is a draft. Keep Title, Summary, Category and Body populated for a useful article.
- When no items are published, each full library shows its empty-state message and a link to Product; featured selections collapse. To edit this copy, select the full CMS list, switch Content → State to Empty, edit its native text, then return to Default. Do not remove the list’s visibility rules.
- Choose a descriptive, unique slug. Changing a published slug can break existing links; configure the appropriate redirect before publishing.
- Preview the index, open the item, and check the title, summary, body and navigation. Publish reviewed records only.
Native remix delivery has been tested in a separate workspace, including shared branding, CMS editing, a missing update date and mobile interactions. Empty collections and draft-only relationships were also checked in a separate published copy. Editor Preview can still show draft records; verify their exclusion on your reviewed published copy.
Choose the featured workflow or guide
Workflows and Guides each open with one illustrated featured item, followed by the complete library. Both sections use native CMS content, including the title, summary, cover and article link.
- Open the Workflows or Guides collection in Framer CMS and enable Featured on the item you want to promote.
- The opening section displays the first eligible item in the collection’s manual order. To choose one specific item, disable Featured on the others or move your selection above them in the CMS.
- If no item has Featured enabled, the opening section collapses. The full library still includes every published item, whether featured or not.
- Preview the library and follow the featured item’s link before publishing. Changing Featured changes presentation; it does not publish a draft item or run an automation.
Preserve the content bindings when styling articles.
A CMS rich-text layer has its own paragraph and heading style mappings. Styling a nearby text layer does not change these mappings.
- Open the collection detail template and select its Body layer. Keep Content connected to the Body field.
- In the Text panel, use Relay / Body for Paragraph and Relay / Article section for Heading 2. Review the mappings for any other heading levels you use.
- Check a short article and a longer one in Preview, including links and lists. Make sure text remains readable on Phone.
Avoid detaching a field variable or replacing the bound text with a fixed string when changing the design.
Prepare search and sharing previews.
The source includes page titles, descriptions, a social image, light/dark favicons and an Apple touch icon. Replace these alongside your brand before publishing.
- Open Settings → General to change the default title, description, language and site images. Keep Accessibility enabled so native movement respects reduced-motion preferences.
- Open each page under Page settings and replace its custom title and description. These page values take precedence over the general defaults.
- CMS detail titles use {{Title}} and descriptions use {{Summary}}. Workflows, Integrations and Guides use Cover for Social preview. Keep these variables connected and inspect the crop after replacing a cover. An empty workflow Cover uses the site’s default social image, so replace that default as part of your branding.
- The 404 is excluded from search engines and site search. Keep construction pages in draft. After publishing your reviewed copy, inspect the generated metadata and social previews, including an item without Cover.
Use the scenes to explain your product.
The interactive examples run locally in the visitor's browser. They do not send inquiries, create CRM records, connect accounts or execute real workflows.
Follow the flow
The hero animation follows a handoff, pauses for an explicit approval and can be replayed. It demonstrates the difference between automatic routing and a human decision.
Product demonstration
Run the example on Product, inspect a stage and explicitly approve the handoff. The circular graphic tracks execution while the selected stage shows its explanation. Reset returns to the first step. Title, stage labels and accent are editable controls. Explanations contains the four stage descriptions. Interface copy contains the badge, dial labels, status messages and actions; use {step} and {total} in Running status. The four-stage sequence always pauses at the third stage for explicit approval.
Frequently asked questions
Select Relay questions in the Common questions section on Home or Product. Edit Questions in the property panel to add, reorder or replace question/answer pairs. Each instance has its own content. Test long answers, Space/Enter activation and narrow layouts after editing.
Workflow scenarios
Switch Sales, Support or Operations and select individual steps. The selected stage changes the graphic and the example outcome. Select Relay scenario showcase, then edit Scenarios in the property panel. Each item exposes Name, Eyebrow, Steps, Description, Outcome and Symbol. Enter one step per line; the final step reveals Outcome. Add or reorder up to six scenarios. Blank lines are ignored, an empty Steps field uses Start / Complete, and clearing every scenario hides the scene. These are per-instance component settings, separate from the CMS workflow library.
Connection map
Select a tool role to reveal its purpose in the handoff. Select Relay integration map and edit Brand and Connections in the property panel. Each connection exposes Name, Symbol, Outcome and Description. Add, reorder or remove up to six roles; clearing the list hides the scene. These per-instance settings are separate from the CMS directory. They are explanatory graphics, not installed connectors.
Motion preferences
Scene animations have reduced-motion alternatives. Test your operating system's reduced-motion setting, keyboard activation and touch interaction after customization.
Import public content only when you need it.
ErinTech Connect is a separate free plugin for importing supported public JSON fields into a managed Framer collection. It does not automatically synchronize Relay's existing collections or install integrations with the services named in the demo.
- Start with manually edited native CMS records if you do not have a public content feed.
- For an import, follow the Connect guide, review the supported field types and inspect its preview before applying changes.
- Bind the imported collection to a suitable native list and detail template, then test the resulting routes. Do not assume rich text, images or relationships are mapped automatically.
Use only data intended for public access. Never put API secrets, private customer records or paid delivery links in a public feed.
Configure your own prices and contact destination.
Your SaaS subscription prices are separate from the one-time purchase of this website template. Replace sample plan copy and connect your own sales process before publishing.
- Select Relay pricing lab on Pricing. Plan 1, Plan 2 and Plan 3 expose each plan’s name, completed runs per month and description. Edit the corresponding Plan 1 / month, Plan 2 / month and Plan 3 / month prices, yearly discount, currency label and contact link. Yearly mode shows both the monthly equivalent and the full annual invoice. Changing the currency label does not convert amounts.
- Confirm your actual allowances and taxes. The original limits are 2,500, 15,000 and 75,000 completed runs. The estimator selects the first displayed plan that covers the visitor’s volume and shows a custom-plan CTA above every allowance. Its input maximum is twice the largest allowance. Keep the three plans in the order you want recommended. Estimator copy controls the heading, explanation, custom-plan message, button labels and disclosure. These values are editable component settings, not CMS fields; billing and usage labels remain English.
- Contact contains a native Form with required Name, Email and Your handoff fields. The withDemoForm override keeps those fields editable on the canvas and replaces native delivery with a separate no-send preview. The preview has no form submission handler and its button is disabled.
- In your unpublished copy, select Contact form / configure delivery. Configure Form → Send to and your privacy information, restore the native button's Default variant, remove Code overrides → DemoForm → withDemoForm, and replace the demo notice. The native fields and the demo preview are separate: edit your production fields on the canvas. A CMS collection is not a submission inbox.
- Test delivery with your own destination and a clearly identified test inquiry before accepting customer requests. Previewing the Relay demo does not perform this setup for you.
Relay’s offer is EUR 49 for the first calendar month from actual availability, then EUR 89, one time and VAT inclusive. The product page shows the exact Europe/Rome schedule before purchase.
Review the whole site before publication.
A working Home page is only one part of launch readiness. Verify navigation, CMS records, contact destinations and metadata across your own copy.
- Review desktop, tablet and phone layouts, including 320px. Test the longest titles and labels you expect to publish.
- Follow every index-to-detail link, previous/next link and return link. Check an empty collection and missing-page behavior.
- Replace page titles, descriptions, social images and the site icon. Verify the canonical domain and any redirects you need.
- Keep construction pages and unfinished records in draft. Connect your own domain and publish only after the content and form checks pass.
Check the binding before rebuilding a page.
Most content problems can be isolated by checking the record, the collection binding and the layer's style independently.
When requesting support, include the affected page, device width and steps to reproduce. Do not send passwords, private API keys or customer data. License and support terms 1.1 are linked above; your order identifies the applicable version.
The new item is missing
Check its draft state, the list's collection, filters and item limit. Preview the correct collection item rather than relying on the editor's selected example.
Article text is too large
Select the Body layer and inspect its Paragraph and Heading mappings. A logo or hero text style is unsuitable for article paragraphs.
A scene looks static
Use Preview rather than the editing canvas, trigger the scene's controls and check reduced-motion settings. The closing ribbon reveals when it enters the viewport.
A contact request does not arrive
Check the actual form or booking destination in your copy. The illustrative workflow and native CMS do not provide email delivery.
CHECK / 06
Your launch checklist
Mark the checks you have completed. Progress stays only on this page and resets on reload. You can print the guide with your browser.
Need a hand?
For template or plugin questions, include your version and a short reproduction using sample data. Custom setup and integrations are quoted separately.
info@erintechlabs.com