Quickstart

<script>
  document.addEventListener('DOMContentLoaded', function () {
    EPIS.init({
      clientId: 'your-client-id',
      theme: {
        primary: '#4f46e5',
        mode: 'dark',
        font: 'Inter',
        radius: '12px',
      }
    });

    EPIS.mountChat('#epis-chat');
  });
</script>

import { useEffect } from 'react';

export function EPISChat() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.pastpaperlm.com/episbox/v1.js';
    script.defer = true;
    script.onload = () => {
      window.EPIS.init({
        clientId: 'your-client-id',
        theme: { preset: 'dark', primary: '#4f46e5' }
      }).mountChat('#epis-chat');
    };
    document.head.appendChild(script);
    return () => window.EPIS?.unmount('#epis-chat');
  }, []);

  return <div id="epis-chat" style={{ height: '600px' }} />;
}

<script src="https://cdn.pastpaperlm.com/episbox/v1.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    EPIS.init({
      clientId: 'your-client-id',
      theme: { primary: '#4f46e5', mode: 'dark' }
    })
    .mountChat('#epis-chat-container');
  });
</script>

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