Adding and Managing Your Websites

Adding a Website

1. Go to Sites → Add Website
2. Enter the full URL (e.g., https://yourapp.com)
3. Give it a friendly name
4. Click Add

Your site loads in the preview iframe. Check the top right for connection status.

Connection Status

🔒 Secure • Connected — HTTPS site loaded successfully

🟢 Connected — Site loaded via HTTP

🔴 Failed — Check the URL or site availability

What Works

Illumate UI works with any modern website:

SPAs (React, Vue, Next.js, Nuxt)

Static sites and landing pages

WordPress, Shopify, Webflow

Any site accessible via URL

If your site loads in a browser, it works in Illumate UI.

Switching Between Sites

Click any site in the "Your Sites" sidebar to load it. Tours and hints are scoped per site — switching shows only that site's content.

Per-Site Features

Each site is fully isolated:

Own tours and hints — No overlap between sites

Own branding — Different colors, fonts, and button styles per site

Own connection status — Independent health checks

Plan Limits

| Plan | Websites |
|------|----------|
| Free | 1 |
| Pro | Unlimited |

Removing a Website

Deleting a site removes all its tours and hints permanently. This cannot be undone. Export your tours first if you want to keep them.

Troubleshooting

Site won't load?

Include https:// in the URL

Make sure the site is publicly accessible

Some sites block iframe embedding via X-Frame-Options header

Elements not clickable in Editor Mode?

Scroll to the element first

Dynamically loaded content may need a page refresh

Try reloading the site with the refresh button in the toolbar

⚠️ Your Site Looks Broken During the Tour?

Illumate UI does not modify, inject, or alter your website's code in any way. What you see during the tour is exactly how your site renders in any standard browser.

If elements overlap, layouts break, or styles look off during the slideshow — the issue is in your website's code, not in Illumate UI.

Common culprits include:

Improper z-index stacking

Missing responsive breakpoints

Non-standard CSS hacks

Poor DOM structure

Illumate UI acts as a mirror. If the reflection doesn't look right, it's time to talk to your development team.

---

Next: Editor Mode explained