Page Builder

The Page Builder lets you create custom-rendered pages inside the application without writing a single line of code. Useful for landing pages, custom dashboards, public-facing content, in-app announcements, internal portals.

What You Can Build

• Marketing pages: Landing pages, About, Pricing, FAQ.
• In-app dashboards: Custom-tailored data views by team.
• Workflows: Multi-step forms, wizards, surveys.
• Portals: Customer-facing record views, member areas.
• Internal docs: SOPs, runbooks, onboarding guides.

Available Blocks

• Text: Rich-text paragraphs with formatting.
• Image: Single or gallery, with focal-point cropping.
• Form: Embed any form from the form library.
• Data table: List of records from any datastore with filters.
• Chart: Bar, line, pie, gauge from saved queries.
• Button: Call to action with linked target.
• Embed: Video, map, custom HTML.
• Layout: Columns, sections, dividers.

Page Permissions

Each page can be set:

• Public — no sign-in required (good for marketing pages).
• Signed-in only — visible to authenticated users.
• Group-restricted — visible only to specific security groups.
• Tenant-restricted — visible within a specific tenant.

Worked Examples

• Pricing page: Public, three-column tier comparison, sign-up CTA.
• Customer portal: Sign-in required, shows the customer's account info and recent orders.
• Internal SOP: Group-restricted to operations team, embedded videos plus a checklist form.
• Event registration: Public landing page with details and an embedded registration form.

This article walks through creating a new page from the empty state, adding sections, and arranging blocks to form a coherent layout.

Step-by-Step

1. Open Architect Panel → Page Builder → Pages and click New page.
2. Pick a starting point — blank, or a template (Landing page, Dashboard, Knowledge article).
3. Set the page title, URL slug and visibility.
4. Add sections. Each section is a container that occupies the full width — they stack vertically.
5. Within a section, add blocks. Use columns to put blocks side-by-side.
6. Configure each block via the inspector — text, image source, form ID, query.
7. Preview as a typical user — different browser, signed-out vs signed-in.
8. Publish.

Section Templates

• Hero: Large heading + sub + CTA + background image.
• Two-column: Text on one side, image on the other.
• Three-card: Three equal-width cards with icon, title, body, link.
• FAQ: Accordion list of question/answer pairs.
• CTA strip: Centered headline + button — pre-formatted for conversions.
• Gallery: Grid of images with captions.
• Embed: Iframe-wrapped external content.

Responsive Design

• Each block has visibility toggles per breakpoint — show on desktop only, on mobile only, or both.
• Columns automatically stack on narrow screens.
• Test using the device preview dropdown (Desktop, Tablet, Phone).

Worked Examples

• Landing page: Hero section with CTA, three-card features section, FAQ section, final CTA strip.
• Member portal home: Personalised hero (uses signed-in user's name), recent activity feed, account summary, quick links.
• Product info page: Hero, two-column overview, gallery, embedded video, CTA, FAQ.
• Internal team page: Two-column heading + photo, three-column “meet the team” cards, embedded calendar, embedded survey.

Friendly URLs are human-readable web addresses (e.g. /about, /pricing, /help/getting-started) instead of internal IDs. They're crucial for SEO, sharing, brand consistency and ease of recall.

Slug Rules

• Lowercase ASCII letters, digits and hyphens only.
• Cannot start or end with a hyphen.
• Cannot contain spaces (auto-converted to hyphens on save).
• Cannot collide with reserved paths (/api, /login, /admin).
• Should be short and meaningful — aim for under 5 words.

Nested Paths

Slugs can be nested using slashes: /help/getting-started/datastores. This creates URL structure that mirrors content hierarchy — great for documentation and large content sites.

Redirects

When you change a slug, the old slug auto-redirects (HTTP 301) to the new one for 90 days. After 90 days the old slug expires unless you set a permanent redirect rule.

SEO Considerations

• Use keywords customers actually search for.
• Avoid stop-words like “and”, “or”, “the” unless they add meaning.
• Keep slugs stable — frequent changes hurt search ranking.
• Canonical URL tag confirms which slug is authoritative for indexable pages.

Worked Examples

• SaaS marketing: /, /features, /pricing, /about, /contact — short, brand-fitting.
• Documentation: /docs/getting-started, /docs/api/authentication — nested hierarchy.
• Knowledge base: /help/article-name — flat, single-level, all under /help.
• Multi-language: /en/pricing, /fr/tarifs — locale-prefixed.
• Marketing campaigns: /summer-2026, /black-friday — campaign-specific landing pages.