Site Preview Toolbar

The toolbar at the top of the site preview is your command center. Here's what every button and indicator does.

URL Bar

Type or paste any URL from the same domain and click Go to navigate. This is how you move between pages when creating multi-page tours.

The URL updates automatically when you navigate within the site — useful for confirming which page path to set on your hints.

Toolbar Buttons

🔄 Refresh

Reloads the current page in the preview. Use this when:

Dynamically loaded content hasn't appeared

You've made changes to your site and want to see them

Elements aren't responding in Editor Mode

🔗 Open External

Opens the current page in a new browser tab. Useful for comparing how your site looks in the preview vs. a normal browser window.

✕ Close

Closes the site preview and returns to the Sites list view.

Connection Status

Top right corner shows your site's security status:

🔒 Secure • Connected — Your site loaded over HTTPS with a valid SSL certificate. Everything is working perfectly.

🟢 Connected — Site loaded but not over HTTPS. Tours will work, but consider migrating to HTTPS.

⚠️ SSL Warning — Certificate issues detected. The site loads, but your users may see browser warnings. Check your SSL configuration.

Top Action Buttons

▶ Play Tour / Tour Dropdown

Click to start playing a tour. The dropdown lets you pick which tour to preview if you have multiple.

👁 Hide/Show Hints

Toggle standalone hint visibility on the page. The badge shows how many hints are currently visible. Useful for seeing your site without hints during editing.

🎨 Branding

Opens the Branding editor modal to customize colors, fonts, border radius, and button styles for this specific site.

✏️ Editor Mode

Toggles Editor Mode on/off. When active, the button changes to Exit Editor and every page element becomes clickable for hint creation.

+ Add Website

Quick shortcut to add another website without leaving the Sites page.

Pro Tips

Use the URL bar for multi-page tour setup. Navigate to each page, enable Editor Mode, and add hints page by page. The Page Path auto-fills based on the current URL.

Refresh after site deployments. If you've pushed an update to your site, hit refresh to load the latest version in the preview.

Open External to test responsiveness. The preview iframe has a fixed width. Open externally to test how hints look at different screen sizes.

---

Next: Adding and managing websites