Full-Height Space
Utilizes 100% viewport height (100dvh) and anchors the user chat input seamlessly at the bottom.
Zero API Key Setup
Embeds securely client-side without exposing backend credentials. Automatic domain tracking out of the box.
Character Persona Chat
Interactive character selector with Jesus of Nazareth, Paul, Moses, King David, and Christian theologians.
EL App Partner REST API (v1)
Server-to-server access via https://www.elapp.ai with API keys issued from Admin → Partner API. Widget embed below stays zero-key.
Auth headers
Authorization: Bearer elapp_live_... X-External-User-Id: <your-end-user-id>
Endpoints (https://www.elapp.ai)
- POST https://www.elapp.ai/api/v1/chat
- GET|POST https://www.elapp.ai/api/v1/search
- GET https://www.elapp.ai/api/v1/bible
- GET|POST https://www.elapp.ai/api/v1/lookup
Every call requires X-External-User-Id so usage (tokens, input, output) can be attributed for your billing system. EL App does not enforce per-user quotas — your app should block over-limit users before calling these endpoints. Pull usage via admin GET /api/admin/api-usage (authenticated admin session). Optional on chat: origin_source (channel + end-user), partner_style (ministry tone/length/guardrails as a secondary overlay), and/or X-Source-* headers. Use persona: "theologian" and a mapped tradition (e.g. mbb). Do not inject role: "system" prompts in messages.
curl -X POST "https://www.elapp.ai/api/v1/chat" \
-H "Authorization: Bearer elapp_live_YOUR_KEY" \
-H "X-External-User-Id: user_123" \
-H "Content-Type: application/json" \
-d '{"messages":[{"role":"user","content":"Explain John 1:1"}],"language":"en","origin_source":{"platform":"whatsapp","channel_type":"dm","account_id":"123"}}'Prompt Google Antigravity or Cursor
Paste this prompt into your AI editor's chat. It commands the AI to take advantage of 100% full width and height, anchoring the user input bar perfectly at the bottom of the page without outer double scrollbars.
I want to integrate the EL App theological AI assistant into my React / Next.js application using its official SDK.
Target Script URL:
https://www.elapp.ai/widget-sdk.js
Please create:
1. A reusable client component ("components/ELAppWidget.tsx")
2. A responsive page layout ("app/chat/page.tsx" or your main chat view)
STRICT LAYOUT & SPATIAL DIRECTIVES (CRITICAL):
- FULL WIDTH & FULL HEIGHT UTILIZATION:
The widget must take full advantage of available screen space (100% width and full viewport height).
Wrap the page in a flex column: "flex flex-col h-screen h-[100dvh] w-full overflow-hidden bg-background".
The widget container itself must be "flex-1 w-full relative overflow-hidden" below any navigation bar, expanding dynamically to 100% of remaining vertical space.
- BOTTOM-DOCKED USER INPUT PLACEMENT:
The chat user input box at the bottom of the widget must stay pinned seamlessly at the bottom of the viewport on both desktop and mobile screens.
Set "overflow: hidden" on the host wrapper so the browser window never creates an awkward outer double scrollbar. Internal message scrolling is handled automatically by the widget.
SDK LIFECYCLE & INITIALIZATION:
- Mark the component with 'use client'.
- Check if "<script id='elapp-sdk-script'>" is already present in document.body; if not, dynamically append it with src="https://www.elapp.ai/widget-sdk.js" and async=true.
- Listen for the "ELAppSDKReady" event on window (or initialize immediately if window.ELApp is already defined).
- Guard against duplicate creation on re-renders by setting container.setAttribute('data-initialized', 'true').
- Clean up the event listener in the useEffect return function.
- Instantiate via:
window.ELApp.createWidget({
containerId: 'elapp-chat-widget',
theme: 'dark', // 'dark' | 'light'
character: 'jesus', // 'theologian' | 'jesus' | 'paul' | 'moses' | 'david' | 'mary' ...
showCharacterSelector: true,
width: '100%',
height: '100%'
});
Please generate the complete, self-contained, typed code.Step-by-Step React / Next.js Implementation
Create Widget Component (components/ELAppWidget.tsx)
Notice height="100%" and width="100%", allowing the widget to expand to fill all available vertical and horizontal space.
'use client';
import React, { useEffect } from 'react';
interface Props {
containerId?: string;
theme?: 'dark' | 'light';
character?: string;
height?: string;
className?: string;
}
export default function ELAppWidget({
containerId = 'elapp-chat-widget',
theme = 'dark',
character = 'jesus',
height = '100%',
className = 'w-full h-full'
}: Props) {
useEffect(() => {
const initWidget = () => {
const container = document.getElementById(containerId);
const sdk = (window as any).ELApp;
if (sdk && container && !container.hasAttribute('data-initialized')) {
container.setAttribute('data-initialized', 'true');
sdk.createWidget({
containerId,
theme,
character,
showCharacterSelector: true,
width: '100%',
height: '100%'
});
}
};
if ((window as any).ELApp) {
initWidget();
return;
}
window.addEventListener('ELAppSDKReady', initWidget);
if (!document.getElementById('elapp-sdk-script')) {
const script = document.createElement('script');
script.id = 'elapp-sdk-script';
script.src = 'https://www.elapp.ai/widget-sdk.js';
script.async = true;
document.body.appendChild(script);
}
return () => {
window.removeEventListener('ELAppSDKReady', initWidget);
};
}, [containerId, theme, character]);
return (
<div
id={containerId}
className={className}
style={{ width: '100%', height, overflow: 'hidden' }}
/>
);
}Render Inside Full-Height Page Layout (Bottom-Docked Input)
Use a flexbox wrapper with h-screen h-[100dvh] overflow-hidden and give the widget flex-1 so the chat input docks at the bottom.
import ELAppWidget from '@/components/ELAppWidget';
export default function TheologyPage() {
return (
<main className="flex flex-col h-screen h-[100dvh] w-full overflow-hidden bg-background">
{/* Optional Top Navigation Bar */}
<header className="h-14 border-b border-border px-6 flex items-center justify-between shrink-0 bg-card">
<h1 className="font-bold text-sm tracking-wider uppercase text-foreground">EL App Study Portal</h1>
</header>
{/* Full-Height Chat Container (Input is docked at bottom automatically) */}
<section className="flex-1 w-full h-full relative overflow-hidden">
<ELAppWidget
containerId="elapp-theology-portal"
theme="dark"
character="jesus"
/>
</section>
</main>
);
}🔒 Security Notice: Domain Access Control
By default, the SDK runs in an open permissive mode allowing integration on test sites. To restrict widget embedding exclusively to your authorized production domains, configure allowed domains in your Admin Dashboard.