Site Setup

Configure your app's basic information: name, description, URL slug, and app icon.

The first step is to configure your app’s basic information. In the Dashboard, fill out the Site Info section.

App Name

The name of your app as it appears in the App Store. This is displayed at the top of your privacy policy, support page, and data deletion page.

Description

A short description of your app (optional, up to 4,000 characters to match the App Store limit). Shown below the app name on your hosted pages.

URL Slug

Your site’s URL path. If you choose my-cool-app, your site will be available at sites.orbitkit.io/my-cool-app.

Must be 1–63 characters, lowercase letters, numbers, and hyphens only
Cannot start or end with a hyphen
Must be unique across all OrbitKit users
Certain slugs are reserved (e.g., admin, api, dashboard)

App Icon

Upload your app icon (PNG, JPEG, or WebP, max 2 MB). It will be resized to 512x512 and displayed on all your hosted pages.

When you upload an icon, OrbitKit automatically extracts the dominant color from the image and uses it to create a color-matched background for your site. The homepage features a radial gradient tinted with your icon’s color, and all other pages receive a subtle color wash in the header area. This works in both light and dark mode.

Security note SVG files are not accepted because they can contain embedded scripts. Your icon is re-encoded server-side to strip any metadata.

Custom Homepage HTML

If the default hero section (icon + name + description) doesn’t fit your app’s brand, you can replace it with your own HTML. The site nav and footer remain.

To use it:

In the Dashboard, expand the Custom Homepage section under Site Setup.
Toggle Use custom HTML for homepage on.
Paste HTML in the editor or click Or upload an HTML file (max 50 KB).
Re-deploy your site to publish.

What works

Allowed	Notes
Structural tags (`div`, `section`, `h1`–`h6`, `p`, `ul`/`ol`, `table`)	Standard semantic HTML
Inline `style` attributes	Any CSS property
`class`, `id`, `data-`, `aria-` attributes	For styling and accessibility hooks
`<img>` from `https://` and `data:` URIs	Use `<img>` for SVGs (e.g., `<img src="https://.../icon.svg">`)
`<a href>` for `https://` and `mailto:`	Other schemes blocked
`<video>` / `<audio>`	Stream from HTTPS sources
`<picture>` / `<source>`	For responsive images

What’s blocked (and why)

Blocked	Why
`<script>` and inline event handlers (`onclick=`)	XSS prevention. The site’s CSP also blocks any script execution.
`<iframe>`	Cannot be embedded; CSP blocks third-party frames.
`<form>` and `<input>`	Phishing prevention. CSP also blocks form submissions.
`<style>` blocks and external `<link>` stylesheets	CSS-based data exfiltration prevention. Use inline `style` attributes instead.
External `<font>`/`@font-face`	Only the site’s built-in font stack is loaded.
`<svg>` elements	Large attack surface. Use `<img src="https://.../file.svg">` instead.
`<object>`, `<embed>`, `<base>`, `<meta>`	Various XSS / clickjacking risks.
`javascript:`, `data:`, and protocol-relative (`//`) URLs in `<a href>`	Phishing prevention.

Limits

Maximum size: 50 KB (51,200 bytes). The dashboard counter shows current usage.
Sanitization runs server-side on every save — there’s no way to bypass it. If you paste HTML containing blocked tags, they’re silently stripped from the saved version.

Tips

Use inline style="..." for any custom CSS. The default site CSS is still available on the page so you can also use existing classes (e.g. class="container").
For testing, use the Preview button in the dashboard before deploying.
If your custom HTML breaks the layout, toggle Use custom HTML off — the default hero comes back instantly.