Microsites

Mini-sites — Complete User Guide

What are Mini-sites?

Mini-sites let you build and publish your own website directly inside OrbitingFox — no coding needed. Each site gets its own public URL, custom pages, images, and contact form. You can browse all published sites at /sites/.

Creating your first site

  1. Go to Mini-sites Dashboard → click + New Site.
  2. Fill in a title, internal slug (URL-safe nickname), and optional description.
  3. Click Create — you land in the Builder.

The Builder

The Builder has two main areas:

  • Left sidebar — your pages list. Click a page to edit it. Use the visibility eye icon to control who sees each page.
  • Canvas (right) — your block editor. Each block is one piece of content (text, image, button, etc.).

The topbar has quick-access buttons:

  • Preview — see the public view of your page
  • Settings — site-wide settings (colours, logo, SEO, nav style)
  • ↓ Export ZIP — download the full site as a portable file
  • Revisions — browse and restore previous snapshots

Pages & sections

Each site is made of pages (called sections). Pages appear in your site's navigation automatically.

  • Click + Add Page in the sidebar to create a new page.
  • Give it a label (what appears in the nav) and a slug (short URL-safe name, e.g. services).
  • Drag pages up/down to reorder the navigation.
  • Visibility per page: Public (everyone), Owner only (only you), Hidden (not shown in nav).

Sub-pages

You can nest pages up to 4 levels deep. To make a page a child of another, set its Parent page when adding/editing. Sub-pages appear as dropdown items in the navigation.

Block types

Click + Add Block inside a page to insert content. Available block types:

BlockWhat it does
TextRich text editor (bold, italic, lists, links). Great for paragraphs and formatted content.
Raw HTMLPaste Bootstrap 5 HTML — designed for AI-generated layouts. Has a built-in AI prompt helper.
ImageDisplay an image from a URL, with optional caption and width control.
ButtonA styled call-to-action link. Use #page-slug as the URL to scroll to another page on the same site.
CollapseAn expandable panel — perfect for FAQs. Visitors click the title to reveal the answer.
FormBuilt-in contact form. Only works on a page named contact. Submissions appear in your Messages inbox.
MapEmbed a Google Map using an address or place name.
YouTubeEmbed a YouTube video by URL.
VideoLink or upload a video file.
FileUpload or link a PDF, markdown, or HTML file for visitors to download/view.
EmbedPaste any iframe embed code (e.g. Calendly, Google Form, Typeform).
ColumnsSide-by-side layout columns — great for two-column info sections.
TOCAuto-generated table of contents based on headings in the page.
NavbarA secondary navigation bar within the page.
Divider / SpacerA horizontal rule or blank vertical space for visual separation.

AI prompt helper (Raw HTML blocks)

When you add a Raw HTML block, a purple Customize with AI panel appears. Click it to expand — it shows a ready-made AI prompt for that section type.

  1. Scroll to the [EDIT THIS PART] at the bottom of the prompt and replace the example with your own content.
  2. Click Copy Prompt.
  3. Paste into ChatGPT or Gemini (both free).
  4. Copy the HTML the AI returns → paste it into the code box → click Save.

Tip — linking buttons to sections: If the AI gives you a button like <a href="#">Learn More</a>, replace # with #your-page-slug. Example: <a href="#services">Our Services</a> scrolls to the page with slug services.

A green Tips panel below the AI helper explains this and reminds you to use the built-in Form block for contact forms (not AI-generated HTML forms).

Settings tab

Open the Settings tab in the builder to configure site-wide options:

  • Basics — title, slug, description, SEO title/description/keywords, banner title
  • Branding — header image, logo, favicon, animated logo
  • Colours — background, logo area, header, footer (hex colour pickers)
  • Logo carousel — upload multiple logos for a scrolling strip; control slide interval, alignment
  • Navigation — layout (Left sidebar / Top bar / Right sidebar), theme (Light / Dark / Transparent)
  • Contact form — show phone field toggle, make phone/email required
  • OrbitingFox badge — show or hide the site attribution badge
  • Publishing — set your Public URL, visibility mode, and Publish/Unpublish buttons

Publishing your site

  1. In the Settings → Publishing section, enter a Public URL (a unique slug, e.g. my-bakery). Your site will be available at /sites/my-bakery/.
  2. Choose Publish Visibility:
    • Public — listed in the /sites/ directory, anyone can find it
    • Unlisted — accessible by direct URL only, not listed in the directory
    • Group — only accessible to members of a selected contact group
  3. Click Publish. A revision snapshot is saved automatically.
  4. To take your site offline, click Unpublish.

Contact messages

When someone submits your contact form, the message appears in Dashboard → your site → Messages.

Each message has a status you can update:

  • NewReadRepliedArchived

Reply by clicking the sender's email (opens your email client with a pre-filled address).

Revision history

Every time you click Publish, OrbitingFox saves a snapshot of your entire site. Visit Revisions (topbar button) to browse snapshots.

  • Each card shows the date, time, and a summary of pages and blocks at that moment.
  • Click Restore this version to roll back. A confirmation dialog warns you the change is immediate.
  • Importing a ZIP into an existing site also creates a before/after revision pair.

Duplicating a site

On the Dashboard, click the menu next to a site → Duplicate. A full copy is created (all pages, blocks, settings, images) with a new internal slug. The public URL is not copied — you must set a new one.

ZIP export, import & VSCode workflow

Export your existing site

Builder topbar → ↓ Export ZIP. The ZIP contains:

  • site.json — all your pages, blocks, and settings in a readable format
  • images/ and files/ — all uploaded media
  • README.md — step-by-step guide for users and AI assistants
  • AI_CONTEXT.md — full technical reference for AI agents and developers

Download a blank starter template

Dashboard → ↓ Starter Template. Same ZIP format, pre-filled with a Home page (hero block) and a Contact page (form block). Start here if you want to design from scratch in VSCode.

Edit in VSCode with AI

  1. Unzip → open folder in VSCode.
  2. Tell an AI assistant: "Read AI_CONTEXT.md first, then help me with my website."
  3. Describe changes in plain English. The AI edits site.json for you.
  4. Re-zip and upload.

Re-upload (import)

Dashboard → ↑ Import ZIP.

  • Leave the dropdown blank → creates a new draft site.
  • Pick an existing site from the dropdown → replaces that site's content and saves a revision automatically so you can roll back.

What is NOT imported

  • Public URL — you must set your own
  • Published state — always starts as a private draft
  • Contact messages — stay on the original server
  • Group restrictions — groups are server-specific

Security

OrbitingFox scans every uploaded ZIP for unsafe content. Rejected ZIPs include a plain-English explanation of why they were blocked (e.g. "unsafe HTML detected", "disallowed file type").