AliveSim Window Launch Test Page

🚀 AliveSim Window Launch Test Page

⚠️ Testing Mode Active
This page uses embed-testing.js which allows launching any HTTPS URL for testing purposes. Before production, switch to embed.js with TESTING_MODE: false.

Test 1: Simple Test URLs

Test basic window launch behavior with simple websites. These should open in a popup window at 90% screen size, centered, with no browser chrome.

What to verify:
  • Window opens at 90% of your screen size
  • Window is centered (5% margins on all sides)
  • No address bar, toolbar, or menu bar visible
  • Only window title bar with minimize/maximize/close buttons
  • Button shows "Opening..." then returns to original text
  • Button is disabled while window is open

Test 2: Multiple Independent Buttons

Test that multiple buttons work independently. Each should manage its own state separately.

What to verify:
  • Can open multiple windows simultaneously
  • Each button tracks its own state independently
  • One button being disabled doesn't affect others

Test 3: Programmatic API (Advanced)

Test the JavaScript API for programmatic control. These buttons use custom JavaScript rather than data attributes.

<button onclick="AliveSim.launch('https://example.com')"> Custom Launch </button>

Test 4: Error Handling

Test that errors are handled gracefully with helpful messages.

Expected behaviors:
  • Missing URL: Should show error about missing data-module-url
  • Invalid URL: Should show validation error in console
  • HTTP URL: Should reject (HTTPS only)

Test 5: Real AliveSim Module - Window vs Tab Comparison

Compare the new windowed approach with the old tab-based approach side-by-side.

✅ Ready for production testing!
Replace the placeholder URL with your actual AliveSim module URL:
data-module-url="https://alivesim.com/syandus/scorm-test/syandus-85278327-0ead-4de1-a941-922dbff40336"
Compare the difference:
  • Window (New): 90% size, centered, minimal chrome, feels integrated with your page
  • Tab (Old): Full browser, feels like leaving the page, address bar visible, tab switching required
  • User Experience: Window approach keeps your page visible underneath, creating better context
  • Return Experience: Closing window returns directly to this page vs finding the right tab

📋 Testing Checklist

Desktop Testing:

  • ✅ Window opens at 90% screen size
  • ✅ Window is centered with 5% margins
  • ✅ No browser chrome (address bar, toolbars, menu bar)
  • ✅ Window is resizable (try dragging edges)
  • ✅ Window can be maximized
  • ✅ Button shows "Opening..." during launch
  • ✅ Button is disabled while window is open
  • ✅ Button re-enables when window closes
  • ✅ Multiple windows can open simultaneously
  • ✅ Rapid clicking doesn't open multiple windows

Browser Testing:

  • ✅ Chrome (test popup blocker detection)
  • ✅ Firefox
  • ✅ Safari (strict popup blocking)
  • ✅ Edge

Mobile Testing:

  • ✅ Opens in full screen (sizing parameters ignored on mobile)
  • ✅ Button state management works
  • ✅ Can return to parent page

Multi-Monitor Testing:

  • ✅ Window opens on same monitor as parent browser
  • ✅ 90% sizing calculated correctly for that monitor
  • ✅ Window can be dragged to other monitors

Window vs Tab Comparison:

  • ✅ Window feels more integrated than tab
  • ✅ Parent page stays visible underneath window
  • ✅ Easier to return to parent (close vs tab switching)
  • ✅ Better sense of context throughout experience

Style Guide

The perfect template to dial in your theme settings.
Typography

You have the ability to have different typography settings for your website and landing pages which is what you see below. You can also control your blog posts typography seperately in the theme settings.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Morbi ultricies, this is a text link nibh quis tincidunt scelerisque, magna purus malesuada erat, feugiat semper urna lectus at sapien. Maecenas ornare, metus ut mattis vehicula, nulla nulla efficitur lacus, vitae congue nisi nibh eget massa. Sed nec pharetra mauris, ac volutpat metus. Praesent sed enim mollis, tincidunt orci sit amet, mattis risus.

  • Bullet Point
  • Bullet Point
  • Bullet Point
  1. Bullet Point
  2. Bullet Point
  3. Bullet Point
In sit amet massa sed dolor tempor mattis id et tellus.
Icons

You can set a global default color for icons and will also have control in each module to select a specifc color if needed.
CTAs & Standard Buttons

You can set up various button styles to create a visual hierarchy. Pro-top: Make the Primary button pop the most.

cta-primary
cta-secondary
cta-tertiary
cta-four
cta-five
Modal Popup

Modals pop-ups are features of various modules. You can give them global style.

Modal Popup
Forms

Create a form that has input fields, dropdowns, checkboxes, and everything. Then style it here.