Vanilla JS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <!-- Load EpisBox SDK -->
  <script src="https://cdn.pastpaperlm.com/episbox/v1.js" defer></script>
</head>
<body>

  <!-- Chat container -->
  <div id="epis-chat" style="width: 100%; height: 600px;"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      EPIS
        .init({
          clientId: 'your-client-id',
          theme: {
            primary:  '#4f46e5',
            mode:     'dark',
            font:     'Inter',
            radius:   '12px',
          }
        })
        .mountChat('#epis-chat')
        .on('auth', function (user) {
          console.log('User signed in:', user.name);
        })
        .on('error', function (err) {
          console.error('EPIS error:', err.code, err.message);
        });
    });
  </script>

</body>
</html>

EPIS
  .init({ clientId: 'your-client-id', theme: { primary: '#E32E78', mode: 'dark' } })
  .mountChat('#chat')
  .on('auth',    user => updateGreeting(user.name))
  .on('message', msg  => logActivity(msg.content))
  .on('error',   err  => showErrorBanner(err.message));

EPIS.unmount('#epis-chat');

EPIS.unmountAll();

// You can now call EPIS.init() again with different config
EPIS.init({ clientId: 'your-client-id', theme: { preset: 'light' } })
    .mountChat('#epis-chat');

EPIS
  .on('auth', function (user) {
    // user = { id, name, email, tier }
    document.getElementById('welcome').textContent = 'Welcome, ' + user.name + '!';
    document.getElementById('welcome').style.display = 'block';
  })
  .on('auth-error', function (err) {
    if (err.code === 'popup_blocked') {
      alert('Please allow popups for this site to sign in with PastpaperLM.');
    }
  });