Single-Page Apps

Many apps — especially study platforms — use a simple “show one div, hide the rest” navigation pattern rather than a full framework router. EpisBox works perfectly with this pattern.

This guide is based on the AuraSpace integration — a 5000+ line single HTML file app that embedded EPIS Chat in under an hour.

The pattern

Your app probably has a nav() function that shows one page and hides all others. EpisBox mounts once at page load and persists across page switches — no remounting needed.

<!-- 1. Load SDK in <head> or before </body> -->
<script src="https://cdn.pastpaperlm.com/episbox/v1.js" defer></script>

<!-- 2. Add to your sidebar nav -->
<div class="nav-item" onclick="nav('epis-chat')" id="nav-epis-chat">
  <span class="nav-icon">🧠</span>
  <span class="nav-label">EPIS Chat</span>
  <span class="nav-badge">NEW</span>
</div>

<!-- 3. Add page sections (inside your .content area) -->
<div class="page" id="page-epis-chat" style="height: calc(100vh - 60px);">
  <div id="epis-chat-container" style="width: 100%; height: 100%;"></div>
</div>

<!-- 4. Init once after DOM ready -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    EPIS.init({
      clientId: 'your-client-id',
      theme: {
        primary:  '#3dd6c8',
        mode:     'dark',
        font:     'Poppins',
        radius:   '20px'
      }
    })
    .mountChat('#epis-chat-container');
  });
</script>

Why height on the page div matters

The page <div> must have an explicit height. calc(100vh - 60px) is the typical pattern where 60px is your header height. If you omit height, the iframe collapses to 0px and EPIS appears invisible.

The iframe inside each container fills 100% of its parent. The chain:

page div (calc(100vh - 60px))
  └── container div (100%)
        └── iframe (100%) ← this is what renders EPIS

Every level in the chain needs a height. Breaking any level = invisible embed. Your existing nav() function already hides/shows .page divs. You don’t need to change it — the EPIS page divs use the same class. Just add the nav items:

// Your existing nav function — no changes needed if it uses .page class
function nav(page) {
  document.querySelectorAll('.page').forEach(p => p.style.display = 'none');
  document.getElementById('page-' + page).style.display = 'block';

  document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
  document.getElementById('nav-' + page)?.classList.add('active');
}

The EPIS iframes keep running in the background when their page div is hidden — sessions stay alive, tokens stay valid. Switching back to the EPIS page is instant.

Mobile nav

If your app has a mobile bottom nav bar:

<div class="mobile-nav-item" onclick="nav('epis-chat')" id="mnav-epis-chat">
  <div class="mobile-nav-icon">🧠</div>
  <div class="mobile-nav-label">EPIS</div>
</div>

Listening for auth in a SPA

Update your UI when users authenticate:

EPIS.on('auth', function (data) {
  // Update your own user display
  document.getElementById('user-avatar').src = data.user.avatar || '/default-avatar.png';
  document.getElementById('user-name').textContent = data.user.name;

  // Show EPIS-specific UI elements
  document.getElementById('epis-user-section').style.display = 'flex';
});

EPIS.on('auth-error', function (err) {
  if (err.code === 'popup_blocked') {
    showToast('Please allow popups to sign in with PastpaperLM.', 'warning');
  }
});

Lazy loading (performance optimization)

If your SPA is performance-sensitive, defer SDK loading until the user first navigates to EPIS:

let episLoaded = false;

function nav(page) {
  // ... existing nav logic ...

  if (page === 'epis-chat' && !episLoaded) {
    episLoaded = true;
    const script = document.createElement('script');
    script.src = 'https://cdn.pastpaperlm.com/episbox/v1.js';
    script.onload = function () {
      EPIS.init({ clientId: 'your-client-id', theme: { preset: 'dark' } })
          .mountChat('#epis-chat-container');
    };
    document.head.appendChild(script);
  }
}

The SDK is ~15KB minified and gzipped, served from Cloudflare edge. For most apps, eager loading (on DOMContentLoaded) is the right call — the extra network cost is negligible and auth can start in the background before the user navigates to EPIS.

Get Started

Frameworks

SDK Reference

Theming

More

Single-Page Apps

The pattern

Why height on the page div matters

Sidebar nav integration

Mobile nav

Listening for auth in a SPA

Lazy loading (performance optimization)

​The pattern

​Why height on the page div matters

​Sidebar nav integration

​Mobile nav

​Listening for auth in a SPA

​Lazy loading (performance optimization)

The pattern

Why height on the page div matters

Sidebar nav integration

Mobile nav

Listening for auth in a SPA

Lazy loading (performance optimization)