taufikmuharrom / AI Studio Embed Example ( React.js )

export default function IframeDirect() { return ( <div style={{ width: '100%', display: 'flex', flexDirection: 'column', height: '100%' }}> <div style={{ background: 'white', borderRadius: '20px 20px 0 0', padding: '24px 32px', border: '1px solid #f1f5f9', borderBottom: 'none', display: 'flex', alignItems: 'center', gap: 20 }}> <div style={{ width: 48, height: 48, background: '#f0fdfa', color: '#14b8a6', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, flexShrink: 0 }}>⚡</div> <div> <h1 style={{ fontSize: '1.25rem', color: '#0f172a', marginBottom: 2, fontWeight: 700 }}>Direct Iframe Embed</h1> <p style={{ fontSize: '0.875rem', color: '#64748b' }}>Chatbot dimuat langsung di dalam halaman tanpa modal.</p> </div> </div> <div style={{ flex: 1, background: 'white', border: '1px solid #f1f5f9', borderRadius: '0 0 20px 20px', overflow: 'hidden', boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.05)' }}> <iframe src="https://ai-studio.bliv.bangunindo.io/chatbot/4eFb0BunqZYEZlg7" style={{ width: '100%', height: '100%', border: 'none', display: 'block' }} allow="microphone" title="Chatbot Direct" /> </div> </div> ) }

import { useState } from 'react'; export default function IframeWithModal() { const [isOpen, setIsOpen] = useState(false); const appCode = "4eFb0BunqZYEZlg7"; const baseUrl = "https://ai-studio.bliv.bangunindo.io"; const iframeSrc = `${baseUrl}/chatbot-auth/${appCode}/history`; const toggleModal = (val: boolean) => { setIsOpen(val); document.body.style.overflow = val ? 'hidden' : ''; }; return ( <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24 }}> <div style={{ background: 'white', borderRadius: 24, boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1)', width: '100%', maxWidth: 480, overflow: 'hidden', border: '1px solid #f1f5f9' }}> <div style={{ padding: 32, textAlign: 'center', borderBottom: '1px solid #f1f5f9' }}> <div style={{ width: 64, height: 64, background: '#e0e7ff', color: '#4f46e5', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, margin: '0 auto 16px' }}>🔐</div> <h1 style={{ fontSize: '1.5rem', color: '#0f172a', marginBottom: 4, fontWeight: 700 }}>Chatbot Modal Demo</h1> <p style={{ fontSize: '0.875rem', color: '#64748b' }}>Authenticated • With History • Iframe Modal</p> </div> <div style={{ padding: '24px 32px 32px' }}> <div style={{ fontSize: '0.7rem', fontWeight: 700, textTransform: 'uppercase', color: '#94a3b8', marginBottom: 12 }}>Configuration</div> <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}> <span style={{ fontSize: '0.7rem', padding: '6px 12px', background: '#e0f2f1', borderRadius: 99, display: 'flex', alignItems: 'center', gap: 6, color: '#14b8a6', fontWeight: 600 }}> <span style={{ width: 6, height: 6, background: '#14b8a6', borderRadius: '50%' }} /> Auth Enabled </span> <span style={{ fontSize: '0.7rem', padding: '6px 12px', background: '#dbeafe', borderRadius: 99, display: 'flex', alignItems: 'center', gap: 6, color: '#1e40af', fontWeight: 600 }}> <span style={{ width: 6, height: 6, background: '#1e40af', borderRadius: '50%' }} /> History On </span> </div> <div style={{ background: '#f8fafc', borderRadius: 16, padding: 16, marginBottom: 24, border: '1px solid #f1f5f9' }}> <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', padding: '6px 0', borderBottom: '1px solid #f1f5f9' }}> <span style={{ color: '#64748b' }}>Authentication</span> <span style={{ fontWeight: 600, color: '#0f172a' }}>Required</span> </div> <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.8rem', padding: '6px 0' }}> <span style={{ color: '#64748b' }}>Mechanism</span> <span style={{ fontWeight: 600, color: '#0f172a' }}>Iframe Modal</span> </div> </div> <button onClick={() => toggleModal(true)} style={{ width: '100%', background: '#4f46e5', color: 'white', border: 'none', padding: '14px 24px', fontSize: '0.95rem', fontWeight: 600, borderRadius: 12, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8 }} > <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> Mulai Percakapan </button> </div> </div> {isOpen && ( <div onClick={() => toggleModal(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0, 0, 0, 0.4)', backdropFilter: 'blur(8px)', zIndex: 1000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }} > <div onClick={(e) => e.stopPropagation()} style={{ background: 'white', borderRadius: 24, width: '100%', maxWidth: 800, height: '80vh', maxHeight: 600, display: 'flex', flexDirection: 'column', overflow: 'hidden', boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)' }} > <div style={{ padding: '16px 24px', background: '#f8fafc', borderBottom: '1px solid #f1f5f9', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <h3 style={{ fontSize: '1rem', color: '#0f172a' }}>Bliv AI Chatbot</h3> <button onClick={() => toggleModal(false)} style={{ background: '#f1f5f9', border: 'none', width: 32, height: 32, borderRadius: 8, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '1.25rem', color: '#64748b' }} > &times; </button> </div> <div style={{ flex: 1, minHeight: 0 }}> <iframe src={iframeSrc} allow="microphone" title="Chatbot" style={{ width: '100%', height: '100%', border: 'none' }} /> </div> </div> </div> )} </div> ); }

import { useEffect } from 'react'; declare global { interface Window { blivChatbotConfig: Record<string, unknown>; } } export default function ScriptDirect() { const baseUrl = "https://ai-studio.bliv.bangunindo.io"; useEffect(() => { const config = { token: "4eFb0BunqZYEZlg7", baseUrl: baseUrl, isDev: true, login: false, history: false, draggable: true, dragAxis: "both", dynamicScript: true, systemVariables: {}, userVariables: {}, }; window.blivChatbotConfig = config; const script = document.createElement("script"); script.id = "bliv-embed-script"; script.src = `${baseUrl}/embed.min.js`; script.async = true; document.body.appendChild(script); return () => { const existingScript = document.getElementById("bliv-embed-script"); if (existingScript) existingScript.remove(); const selectors = [ "#bliv-chatbot-widget", "#bliv-chatbot-bubble", "#bliv-chatbot-container", "#bliv-chatbot-iframe", ".bliv-chatbot-widget", ".bliv-chatbot-bubble", ".bliv-chatbot-container", 'iframe[src*="ai-studio.bliv.bangunindo.io"]', ]; selectors.forEach((sel) => { document.querySelectorAll(sel).forEach((el) => el.remove()); }); // @ts-expect-error: delete not allowed on window properties delete window.blivChatbotConfig; }; }, []); return ( <div style={{ width: '100%', padding: 24 }}> <div style={{ marginBottom: 24, fontWeight: 600, color: '#374151' }}>Direct Script Embed</div> <div style={{ background: 'white', padding: 48, borderRadius: 24, textAlign: 'center', maxWidth: 480, margin: '60px auto', boxShadow: '0 4px 20px -5px rgba(0, 0, 0, 0.1)', border: '1px solid #f1f5f9' }}> <div style={{ width: 64, height: 64, background: '#e0f2f1', color: '#14b8a6', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 28, margin: '0 auto 24px' }}>⚡</div> <h1 style={{ fontSize: '1.5rem', marginBottom: 12, color: '#0f172a', fontWeight: 700 }}>Widget Aktif</h1> <p style={{ color: '#475569', marginBottom: 24, lineHeight: 1.6 }}> Script chatbot Bliv AI telah dimuat secara langsung pada halaman ini. </p> <small style={{ color: '#94a3b8', fontWeight: 500 }}> Periksa sudut kanan bawah layar Anda untuk memulai chat. </small> </div> </div> ); }