embed-iframe-auth-history.html
· 6.8 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Iframe (Auth + History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white;
border-radius: 24px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 480px;
overflow: hidden;
border: 1px solid #f1f5f9;
}
.card-header {
padding: 32px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.icon-circle {
width: 64px;
height: 64px;
background: #e0e7ff;
color: #4f46e5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
}
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 12px;
}
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge {
font-size: 0.7rem;
font-weight: 600;
padding: 6px 12px;
background: #f1f5f9;
border-radius: 99px;
display: flex;
align-items: center;
gap: 6px;
color: #475569;
}
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.badge-active { background: #e0f2f1; color: #14b8a6; }
.badge-active .badge-dot { background: #14b8a6; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.btn-primary {
width: 100%;
background: #4f46e5;
color: white;
border: none;
padding: 14px 24px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: all 0.2s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.active { display: flex; }
.modal-content {
background: white;
border-radius: 24px;
width: 100%;
max-width: 800px;
height: 80vh;
max-height: 600px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.modal-header {
padding: 16px 24px;
background: #f8fafc;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 { font-size: 1rem; color: #0f172a; }
.close-btn {
background: #f1f5f9;
border: none;
width: 32px;
height: 32px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
color: #64748b;
}
.modal-body { flex: 1; min-height: 0; }
iframe { width: 100%; height: 100%; border: none; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">🔐</div>
<h1>Chatbot Embed Demo</h1>
<p>Authenticated • With History • Iframe</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge badge-active"><span class="badge-dot"></span>Auth On</span>
<span class="badge badge-active"><span class="badge-dot"></span>With History</span>
<span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">Required</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">Enabled</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">.../chatbot-auth/{app_code}/history</span>
</div>
</div>
<button class="btn-primary" onclick="openChatbot()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
Open Chatbot
</button>
</div>
</div>
<div id="chatModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Chatbot — Auth + History</h3>
<button class="close-btn" onclick="closeChatbot()">×</button>
</div>
<div class="modal-body">
<iframe id="chatIframe" src="" allow="microphone"></iframe>
</div>
</div>
</div>
<script>
const APP_CODE = '4eFb0BunqZYEZlg7'
const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
function openChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
iframe.src = `${BASE_URL}/chatbot-auth/${APP_CODE}/history`
modal.classList.add('active')
document.body.style.overflow = 'hidden'
}
function closeChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
modal.classList.remove('active')
setTimeout(() => {
iframe.src = ''
document.body.style.overflow = ''
}, 300)
}
document.getElementById('chatModal').addEventListener('click', (e) => {
if (e.target === document.getElementById('chatModal')) closeChatbot()
})
</script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Iframe (Auth + History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; |
| 22 | border-radius: 24px; |
| 23 | box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| 24 | width: 100%; |
| 25 | max-width: 480px; |
| 26 | overflow: hidden; |
| 27 | border: 1px solid #f1f5f9; |
| 28 | } |
| 29 | |
| 30 | .card-header { |
| 31 | padding: 32px; |
| 32 | text-align: center; |
| 33 | border-bottom: 1px solid #f1f5f9; |
| 34 | } |
| 35 | |
| 36 | .icon-circle { |
| 37 | width: 64px; |
| 38 | height: 64px; |
| 39 | background: #e0e7ff; |
| 40 | color: #4f46e5; |
| 41 | border-radius: 50%; |
| 42 | display: flex; |
| 43 | align-items: center; |
| 44 | justify-content: center; |
| 45 | font-size: 28px; |
| 46 | margin: 0 auto 16px; |
| 47 | } |
| 48 | |
| 49 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 50 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 51 | |
| 52 | .card-body { padding: 24px 32px 32px; } |
| 53 | .section-title { |
| 54 | font-size: 0.7rem; |
| 55 | font-weight: 700; |
| 56 | text-transform: uppercase; |
| 57 | letter-spacing: 0.05em; |
| 58 | color: #94a3b8; |
| 59 | margin-bottom: 12px; |
| 60 | } |
| 61 | |
| 62 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 63 | .badge { |
| 64 | font-size: 0.7rem; |
| 65 | font-weight: 600; |
| 66 | padding: 6px 12px; |
| 67 | background: #f1f5f9; |
| 68 | border-radius: 99px; |
| 69 | display: flex; |
| 70 | align-items: center; |
| 71 | gap: 6px; |
| 72 | color: #475569; |
| 73 | } |
| 74 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 75 | .badge-active { background: #e0f2f1; color: #14b8a6; } |
| 76 | .badge-active .badge-dot { background: #14b8a6; } |
| 77 | |
| 78 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 79 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 80 | .detail-row:last-child { border-bottom: none; } |
| 81 | .detail-label { color: #64748b; font-weight: 500; } |
| 82 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 83 | |
| 84 | .btn-primary { |
| 85 | width: 100%; |
| 86 | background: #4f46e5; |
| 87 | color: white; |
| 88 | border: none; |
| 89 | padding: 14px 24px; |
| 90 | font-size: 0.95rem; |
| 91 | font-weight: 600; |
| 92 | border-radius: 12px; |
| 93 | cursor: pointer; |
| 94 | display: inline-flex; |
| 95 | align-items: center; |
| 96 | justify-content: center; |
| 97 | gap: 8px; |
| 98 | transition: all 0.2s ease; |
| 99 | } |
| 100 | .btn-primary:hover { |
| 101 | transform: translateY(-2px); |
| 102 | filter: brightness(1.1); |
| 103 | } |
| 104 | |
| 105 | .modal { |
| 106 | display: none; |
| 107 | position: fixed; |
| 108 | inset: 0; |
| 109 | background: rgba(0, 0, 0, 0.4); |
| 110 | backdrop-filter: blur(8px); |
| 111 | z-index: 1000; |
| 112 | align-items: center; |
| 113 | justify-content: center; |
| 114 | padding: 20px; |
| 115 | } |
| 116 | .modal.active { display: flex; } |
| 117 | .modal-content { |
| 118 | background: white; |
| 119 | border-radius: 24px; |
| 120 | width: 100%; |
| 121 | max-width: 800px; |
| 122 | height: 80vh; |
| 123 | max-height: 600px; |
| 124 | display: flex; |
| 125 | flex-direction: column; |
| 126 | overflow: hidden; |
| 127 | box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| 128 | } |
| 129 | .modal-header { |
| 130 | padding: 16px 24px; |
| 131 | background: #f8fafc; |
| 132 | border-bottom: 1px solid #f1f5f9; |
| 133 | display: flex; |
| 134 | justify-content: space-between; |
| 135 | align-items: center; |
| 136 | } |
| 137 | .modal-header h3 { font-size: 1rem; color: #0f172a; } |
| 138 | .close-btn { |
| 139 | background: #f1f5f9; |
| 140 | border: none; |
| 141 | width: 32px; |
| 142 | height: 32px; |
| 143 | border-radius: 8px; |
| 144 | cursor: pointer; |
| 145 | display: flex; |
| 146 | align-items: center; |
| 147 | justify-content: center; |
| 148 | font-size: 1.25rem; |
| 149 | color: #64748b; |
| 150 | } |
| 151 | .modal-body { flex: 1; min-height: 0; } |
| 152 | iframe { width: 100%; height: 100%; border: none; } |
| 153 | </style> |
| 154 | </head> |
| 155 | <body> |
| 156 | |
| 157 | <div class="card"> |
| 158 | <div class="card-header"> |
| 159 | <div class="icon-circle">🔐</div> |
| 160 | <h1>Chatbot Embed Demo</h1> |
| 161 | <p>Authenticated • With History • Iframe</p> |
| 162 | </div> |
| 163 | <div class="card-body"> |
| 164 | <div class="section-title">Configuration</div> |
| 165 | <div class="badges"> |
| 166 | <span class="badge badge-active"><span class="badge-dot"></span>Auth On</span> |
| 167 | <span class="badge badge-active"><span class="badge-dot"></span>With History</span> |
| 168 | <span class="badge"><span class="badge-dot"></span>Iframe Mode</span> |
| 169 | </div> |
| 170 | <div class="details"> |
| 171 | <div class="detail-row"> |
| 172 | <span class="detail-label">Authentication</span> |
| 173 | <span class="detail-value">Required</span> |
| 174 | </div> |
| 175 | <div class="detail-row"> |
| 176 | <span class="detail-label">History</span> |
| 177 | <span class="detail-value">Enabled</span> |
| 178 | </div> |
| 179 | <div class="detail-row"> |
| 180 | <span class="detail-label">Base URL</span> |
| 181 | <span class="detail-value">.../chatbot-auth/{app_code}/history</span> |
| 182 | </div> |
| 183 | </div> |
| 184 | <button class="btn-primary" onclick="openChatbot()"> |
| 185 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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> |
| 186 | Open Chatbot |
| 187 | </button> |
| 188 | </div> |
| 189 | </div> |
| 190 | |
| 191 | <div id="chatModal" class="modal"> |
| 192 | <div class="modal-content"> |
| 193 | <div class="modal-header"> |
| 194 | <h3>Chatbot — Auth + History</h3> |
| 195 | <button class="close-btn" onclick="closeChatbot()">×</button> |
| 196 | </div> |
| 197 | <div class="modal-body"> |
| 198 | <iframe id="chatIframe" src="" allow="microphone"></iframe> |
| 199 | </div> |
| 200 | </div> |
| 201 | </div> |
| 202 | |
| 203 | <script> |
| 204 | const APP_CODE = '4eFb0BunqZYEZlg7' |
| 205 | const BASE_URL = 'https://ai-studio.bliv.bangunindo.io' |
| 206 | |
| 207 | function openChatbot() { |
| 208 | const modal = document.getElementById('chatModal') |
| 209 | const iframe = document.getElementById('chatIframe') |
| 210 | iframe.src = `${BASE_URL}/chatbot-auth/${APP_CODE}/history` |
| 211 | modal.classList.add('active') |
| 212 | document.body.style.overflow = 'hidden' |
| 213 | } |
| 214 | |
| 215 | function closeChatbot() { |
| 216 | const modal = document.getElementById('chatModal') |
| 217 | const iframe = document.getElementById('chatIframe') |
| 218 | modal.classList.remove('active') |
| 219 | setTimeout(() => { |
| 220 | iframe.src = '' |
| 221 | document.body.style.overflow = '' |
| 222 | }, 300) |
| 223 | } |
| 224 | |
| 225 | document.getElementById('chatModal').addEventListener('click', (e) => { |
| 226 | if (e.target === document.getElementById('chatModal')) closeChatbot() |
| 227 | }) |
| 228 | </script> |
| 229 | |
| 230 | </body> |
| 231 | </html> |
embed-iframe-auth-no-history.html
· 6.4 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Iframe (Auth • No History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white;
border-radius: 24px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 480px;
overflow: hidden;
border: 1px solid #f1f5f9;
}
.card-header {
padding: 32px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.icon-circle {
width: 64px;
height: 64px;
background: #e0e7ff;
color: #4f46e5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
}
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 12px;
}
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge {
font-size: 0.7rem;
font-weight: 600;
padding: 6px 12px;
background: #f1f5f9;
border-radius: 99px;
display: flex;
align-items: center;
gap: 6px;
color: #475569;
}
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.badge-active { background: #e0f2f1; color: #14b8a6; }
.badge-active .badge-dot { background: #14b8a6; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.btn-primary {
width: 100%;
background: #4f46e5;
color: white;
border: none;
padding: 14px 24px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.active { display: flex; }
.modal-content {
background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px;
display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1rem; color: #0f172a; }
.close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; }
.modal-body { flex: 1; min-height: 0; }
iframe { width: 100%; height: 100%; border: none; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">🔐</div>
<h1>Chatbot Embed Demo</h1>
<p>Authenticated • No History • Iframe</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge badge-active"><span class="badge-dot"></span>Auth Required</span>
<span class="badge"><span class="badge-dot"></span>History Disabled</span>
<span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">True</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">None</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">.../chatbot-auth/{app_code}</span>
</div>
</div>
<button class="btn-primary" onclick="openChatbot()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
Open Chatbot
</button>
</div>
</div>
<div id="chatModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Chatbot — Auth + No History</h3>
<button class="close-btn" onclick="closeChatbot()">×</button>
</div>
<div class="modal-body">
<iframe id="chatIframe" src="" allow="microphone"></iframe>
</div>
</div>
</div>
<script>
const APP_CODE = '4eFb0BunqZYEZlg7'
const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
function openChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
iframe.src = `${BASE_URL}/chatbot-auth/${APP_CODE}`
modal.classList.add('active')
document.body.style.overflow = 'hidden'
}
function closeChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
modal.classList.remove('active')
setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300)
}
</script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Iframe (Auth • No History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; |
| 22 | border-radius: 24px; |
| 23 | box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| 24 | width: 100%; |
| 25 | max-width: 480px; |
| 26 | overflow: hidden; |
| 27 | border: 1px solid #f1f5f9; |
| 28 | } |
| 29 | |
| 30 | .card-header { |
| 31 | padding: 32px; |
| 32 | text-align: center; |
| 33 | border-bottom: 1px solid #f1f5f9; |
| 34 | } |
| 35 | |
| 36 | .icon-circle { |
| 37 | width: 64px; |
| 38 | height: 64px; |
| 39 | background: #e0e7ff; |
| 40 | color: #4f46e5; |
| 41 | border-radius: 50%; |
| 42 | display: flex; |
| 43 | align-items: center; |
| 44 | justify-content: center; |
| 45 | font-size: 28px; |
| 46 | margin: 0 auto 16px; |
| 47 | } |
| 48 | |
| 49 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 50 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 51 | |
| 52 | .card-body { padding: 24px 32px 32px; } |
| 53 | .section-title { |
| 54 | font-size: 0.7rem; |
| 55 | font-weight: 700; |
| 56 | text-transform: uppercase; |
| 57 | letter-spacing: 0.05em; |
| 58 | color: #94a3b8; |
| 59 | margin-bottom: 12px; |
| 60 | } |
| 61 | |
| 62 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 63 | .badge { |
| 64 | font-size: 0.7rem; |
| 65 | font-weight: 600; |
| 66 | padding: 6px 12px; |
| 67 | background: #f1f5f9; |
| 68 | border-radius: 99px; |
| 69 | display: flex; |
| 70 | align-items: center; |
| 71 | gap: 6px; |
| 72 | color: #475569; |
| 73 | } |
| 74 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 75 | .badge-active { background: #e0f2f1; color: #14b8a6; } |
| 76 | .badge-active .badge-dot { background: #14b8a6; } |
| 77 | |
| 78 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 79 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 80 | .detail-row:last-child { border-bottom: none; } |
| 81 | .detail-label { color: #64748b; font-weight: 500; } |
| 82 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 83 | |
| 84 | .btn-primary { |
| 85 | width: 100%; |
| 86 | background: #4f46e5; |
| 87 | color: white; |
| 88 | border: none; |
| 89 | padding: 14px 24px; |
| 90 | font-size: 0.95rem; |
| 91 | font-weight: 600; |
| 92 | border-radius: 12px; |
| 93 | cursor: pointer; |
| 94 | display: inline-flex; |
| 95 | align-items: center; |
| 96 | justify-content: center; |
| 97 | gap: 8px; |
| 98 | } |
| 99 | .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); } |
| 100 | |
| 101 | .modal { |
| 102 | display: none; |
| 103 | position: fixed; |
| 104 | inset: 0; |
| 105 | background: rgba(0, 0, 0, 0.4); |
| 106 | backdrop-filter: blur(8px); |
| 107 | z-index: 1000; |
| 108 | align-items: center; |
| 109 | justify-content: center; |
| 110 | padding: 20px; |
| 111 | } |
| 112 | .modal.active { display: flex; } |
| 113 | .modal-content { |
| 114 | background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; |
| 115 | display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| 116 | } |
| 117 | .modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; } |
| 118 | .modal-header h3 { font-size: 1rem; color: #0f172a; } |
| 119 | .close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; } |
| 120 | .modal-body { flex: 1; min-height: 0; } |
| 121 | iframe { width: 100%; height: 100%; border: none; } |
| 122 | </style> |
| 123 | </head> |
| 124 | <body> |
| 125 | |
| 126 | <div class="card"> |
| 127 | <div class="card-header"> |
| 128 | <div class="icon-circle">🔐</div> |
| 129 | <h1>Chatbot Embed Demo</h1> |
| 130 | <p>Authenticated • No History • Iframe</p> |
| 131 | </div> |
| 132 | <div class="card-body"> |
| 133 | <div class="section-title">Configuration</div> |
| 134 | <div class="badges"> |
| 135 | <span class="badge badge-active"><span class="badge-dot"></span>Auth Required</span> |
| 136 | <span class="badge"><span class="badge-dot"></span>History Disabled</span> |
| 137 | <span class="badge"><span class="badge-dot"></span>Iframe Mode</span> |
| 138 | </div> |
| 139 | <div class="details"> |
| 140 | <div class="detail-row"> |
| 141 | <span class="detail-label">Authentication</span> |
| 142 | <span class="detail-value">True</span> |
| 143 | </div> |
| 144 | <div class="detail-row"> |
| 145 | <span class="detail-label">History</span> |
| 146 | <span class="detail-value">None</span> |
| 147 | </div> |
| 148 | <div class="detail-row"> |
| 149 | <span class="detail-label">Base URL</span> |
| 150 | <span class="detail-value">.../chatbot-auth/{app_code}</span> |
| 151 | </div> |
| 152 | </div> |
| 153 | <button class="btn-primary" onclick="openChatbot()"> |
| 154 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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> |
| 155 | Open Chatbot |
| 156 | </button> |
| 157 | </div> |
| 158 | </div> |
| 159 | |
| 160 | <div id="chatModal" class="modal"> |
| 161 | <div class="modal-content"> |
| 162 | <div class="modal-header"> |
| 163 | <h3>Chatbot — Auth + No History</h3> |
| 164 | <button class="close-btn" onclick="closeChatbot()">×</button> |
| 165 | </div> |
| 166 | <div class="modal-body"> |
| 167 | <iframe id="chatIframe" src="" allow="microphone"></iframe> |
| 168 | </div> |
| 169 | </div> |
| 170 | </div> |
| 171 | |
| 172 | <script> |
| 173 | const APP_CODE = '4eFb0BunqZYEZlg7' |
| 174 | const BASE_URL = 'https://ai-studio.bliv.bangunindo.io' |
| 175 | function openChatbot() { |
| 176 | const modal = document.getElementById('chatModal') |
| 177 | const iframe = document.getElementById('chatIframe') |
| 178 | iframe.src = `${BASE_URL}/chatbot-auth/${APP_CODE}` |
| 179 | modal.classList.add('active') |
| 180 | document.body.style.overflow = 'hidden' |
| 181 | } |
| 182 | function closeChatbot() { |
| 183 | const modal = document.getElementById('chatModal') |
| 184 | const iframe = document.getElementById('chatIframe') |
| 185 | modal.classList.remove('active') |
| 186 | setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300) |
| 187 | } |
| 188 | </script> |
| 189 | |
| 190 | </body> |
| 191 | </html> |
embed-iframe-no-auth-history.html
· 6.0 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Iframe (Public • History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white; border-radius: 24px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 480px; overflow: hidden; border: 1px solid #f1f5f9;
}
.card-header { padding: 32px; text-align: center; border-bottom: 1px solid #f1f5f9; }
.icon-circle { width: 64px; height: 64px; background: #f0fdfa; color: #14b8a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; }
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 12px; }
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge { font-size: 0.7rem; font-weight: 600; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; }
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.badge-active { background: #dbeafe; color: #1e40af; }
.badge-active .badge-dot { background: #1e40af; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.btn-primary {
width: 100%; background: #14b8a6; color: white; border: none; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
.modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal.active { display: flex; }
.modal-content { background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1rem; color: #0f172a; }
.close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; }
.modal-body { flex: 1; min-height: 0; }
iframe { width: 100%; height: 100%; border: none; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">💬</div>
<h1>Chatbot Embed Demo</h1>
<p>Public • With History • Iframe</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge"><span class="badge-dot"></span>No Auth</span>
<span class="badge badge-active"><span class="badge-dot"></span>History Enabled</span>
<span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">False</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">True</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">.../chatbot/{app_code}/history</span>
</div>
</div>
<button class="btn-primary" onclick="openChatbot()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
Open Chatbot
</button>
</div>
</div>
<div id="chatModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Chatbot — Public + History</h3>
<button class="close-btn" onclick="closeChatbot()">×</button>
</div>
<div class="modal-body">
<iframe id="chatIframe" src="" allow="microphone"></iframe>
</div>
</div>
</div>
<script>
const APP_CODE = '4eFb0BunqZYEZlg7'
const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
function openChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
iframe.src = `${BASE_URL}/chatbot/${APP_CODE}/history`
modal.classList.add('active')
document.body.style.overflow = 'hidden'
}
function closeChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
modal.classList.remove('active')
setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300)
}
</script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Iframe (Public • History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; border-radius: 24px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 480px; overflow: hidden; border: 1px solid #f1f5f9; |
| 22 | } |
| 23 | .card-header { padding: 32px; text-align: center; border-bottom: 1px solid #f1f5f9; } |
| 24 | .icon-circle { width: 64px; height: 64px; background: #f0fdfa; color: #14b8a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; } |
| 25 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 26 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 27 | .card-body { padding: 24px 32px 32px; } |
| 28 | .section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 12px; } |
| 29 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 30 | .badge { font-size: 0.7rem; font-weight: 600; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; } |
| 31 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 32 | .badge-active { background: #dbeafe; color: #1e40af; } |
| 33 | .badge-active .badge-dot { background: #1e40af; } |
| 34 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 35 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 36 | .detail-row:last-child { border-bottom: none; } |
| 37 | .detail-label { color: #64748b; font-weight: 500; } |
| 38 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 39 | |
| 40 | .btn-primary { |
| 41 | width: 100%; background: #14b8a6; color: white; border: none; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; |
| 42 | } |
| 43 | .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); } |
| 44 | .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; } |
| 45 | .modal.active { display: flex; } |
| 46 | .modal-content { background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } |
| 47 | .modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; } |
| 48 | .modal-header h3 { font-size: 1rem; color: #0f172a; } |
| 49 | .close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; } |
| 50 | .modal-body { flex: 1; min-height: 0; } |
| 51 | iframe { width: 100%; height: 100%; border: none; } |
| 52 | </style> |
| 53 | </head> |
| 54 | <body> |
| 55 | |
| 56 | <div class="card"> |
| 57 | <div class="card-header"> |
| 58 | <div class="icon-circle">💬</div> |
| 59 | <h1>Chatbot Embed Demo</h1> |
| 60 | <p>Public • With History • Iframe</p> |
| 61 | </div> |
| 62 | <div class="card-body"> |
| 63 | <div class="section-title">Configuration</div> |
| 64 | <div class="badges"> |
| 65 | <span class="badge"><span class="badge-dot"></span>No Auth</span> |
| 66 | <span class="badge badge-active"><span class="badge-dot"></span>History Enabled</span> |
| 67 | <span class="badge"><span class="badge-dot"></span>Iframe Mode</span> |
| 68 | </div> |
| 69 | <div class="details"> |
| 70 | <div class="detail-row"> |
| 71 | <span class="detail-label">Authentication</span> |
| 72 | <span class="detail-value">False</span> |
| 73 | </div> |
| 74 | <div class="detail-row"> |
| 75 | <span class="detail-label">History</span> |
| 76 | <span class="detail-value">True</span> |
| 77 | </div> |
| 78 | <div class="detail-row"> |
| 79 | <span class="detail-label">Base URL</span> |
| 80 | <span class="detail-value">.../chatbot/{app_code}/history</span> |
| 81 | </div> |
| 82 | </div> |
| 83 | <button class="btn-primary" onclick="openChatbot()"> |
| 84 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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> |
| 85 | Open Chatbot |
| 86 | </button> |
| 87 | </div> |
| 88 | </div> |
| 89 | |
| 90 | <div id="chatModal" class="modal"> |
| 91 | <div class="modal-content"> |
| 92 | <div class="modal-header"> |
| 93 | <h3>Chatbot — Public + History</h3> |
| 94 | <button class="close-btn" onclick="closeChatbot()">×</button> |
| 95 | </div> |
| 96 | <div class="modal-body"> |
| 97 | <iframe id="chatIframe" src="" allow="microphone"></iframe> |
| 98 | </div> |
| 99 | </div> |
| 100 | </div> |
| 101 | |
| 102 | <script> |
| 103 | const APP_CODE = '4eFb0BunqZYEZlg7' |
| 104 | const BASE_URL = 'https://ai-studio.bliv.bangunindo.io' |
| 105 | function openChatbot() { |
| 106 | const modal = document.getElementById('chatModal') |
| 107 | const iframe = document.getElementById('chatIframe') |
| 108 | iframe.src = `${BASE_URL}/chatbot/${APP_CODE}/history` |
| 109 | modal.classList.add('active') |
| 110 | document.body.style.overflow = 'hidden' |
| 111 | } |
| 112 | function closeChatbot() { |
| 113 | const modal = document.getElementById('chatModal') |
| 114 | const iframe = document.getElementById('chatIframe') |
| 115 | modal.classList.remove('active') |
| 116 | setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300) |
| 117 | } |
| 118 | </script> |
| 119 | |
| 120 | </body> |
| 121 | </html> |
embed-iframe-no-auth-no-history.html
· 5.9 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Iframe (Public • No History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white; border-radius: 24px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 480px; overflow: hidden; border: 1px solid #f1f5f9;
}
.card-header { padding: 32px; text-align: center; border-bottom: 1px solid #f1f5f9; }
.icon-circle { width: 64px; height: 64px; background: #f0fdfa; color: #14b8a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; }
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 12px; }
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge { font-size: 0.7rem; font-weight: 600; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; }
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.btn-primary {
width: 100%; background: #14b8a6; color: white; border: none; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
.modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; }
.modal.active { display: flex; }
.modal-content { background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { font-size: 1rem; color: #0f172a; }
.close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; }
.modal-body { flex: 1; min-height: 0; }
iframe { width: 100%; height: 100%; border: none; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">💬</div>
<h1>Chatbot Embed Demo</h1>
<p>Public • No History • Iframe</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge"><span class="badge-dot"></span>No Auth</span>
<span class="badge"><span class="badge-dot"></span>History Off</span>
<span class="badge"><span class="badge-dot"></span>Iframe Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">None</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">Disabled</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">.../chatbot/{app_code}</span>
</div>
</div>
<button class="btn-primary" onclick="openChatbot()">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
Open Chatbot
</button>
</div>
</div>
<div id="chatModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h3>Chatbot — Public + No History</h3>
<button class="close-btn" onclick="closeChatbot()">×</button>
</div>
<div class="modal-body">
<iframe id="chatIframe" src="" allow="microphone"></iframe>
</div>
</div>
</div>
<script>
const APP_CODE = '4eFb0BunqZYEZlg7'
const BASE_URL = 'https://ai-studio.bliv.bangunindo.io'
function openChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
iframe.src = `${BASE_URL}/chatbot/${APP_CODE}`
modal.classList.add('active')
document.body.style.overflow = 'hidden'
}
function closeChatbot() {
const modal = document.getElementById('chatModal')
const iframe = document.getElementById('chatIframe')
modal.classList.remove('active')
setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300)
}
</script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Iframe (Public • No History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; border-radius: 24px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); width: 100%; max-width: 480px; overflow: hidden; border: 1px solid #f1f5f9; |
| 22 | } |
| 23 | .card-header { padding: 32px; text-align: center; border-bottom: 1px solid #f1f5f9; } |
| 24 | .icon-circle { width: 64px; height: 64px; background: #f0fdfa; color: #14b8a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 16px; } |
| 25 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 26 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 27 | .card-body { padding: 24px 32px 32px; } |
| 28 | .section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 12px; } |
| 29 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 30 | .badge { font-size: 0.7rem; font-weight: 600; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; } |
| 31 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 32 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 33 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 34 | .detail-row:last-child { border-bottom: none; } |
| 35 | .detail-label { color: #64748b; font-weight: 500; } |
| 36 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 37 | |
| 38 | .btn-primary { |
| 39 | width: 100%; background: #14b8a6; color: white; border: none; padding: 14px 24px; font-size: 0.95rem; font-weight: 600; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; |
| 40 | } |
| 41 | .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); } |
| 42 | .modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center; padding: 20px; } |
| 43 | .modal.active { display: flex; } |
| 44 | .modal-content { background: white; border-radius: 24px; width: 100%; max-width: 800px; height: 80vh; max-height: 600px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } |
| 45 | .modal-header { padding: 16px 24px; background: #f8fafc; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; } |
| 46 | .modal-header h3 { font-size: 1rem; color: #0f172a; } |
| 47 | .close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #64748b; } |
| 48 | .modal-body { flex: 1; min-height: 0; } |
| 49 | iframe { width: 100%; height: 100%; border: none; } |
| 50 | </style> |
| 51 | </head> |
| 52 | <body> |
| 53 | |
| 54 | <div class="card"> |
| 55 | <div class="card-header"> |
| 56 | <div class="icon-circle">💬</div> |
| 57 | <h1>Chatbot Embed Demo</h1> |
| 58 | <p>Public • No History • Iframe</p> |
| 59 | </div> |
| 60 | <div class="card-body"> |
| 61 | <div class="section-title">Configuration</div> |
| 62 | <div class="badges"> |
| 63 | <span class="badge"><span class="badge-dot"></span>No Auth</span> |
| 64 | <span class="badge"><span class="badge-dot"></span>History Off</span> |
| 65 | <span class="badge"><span class="badge-dot"></span>Iframe Mode</span> |
| 66 | </div> |
| 67 | <div class="details"> |
| 68 | <div class="detail-row"> |
| 69 | <span class="detail-label">Authentication</span> |
| 70 | <span class="detail-value">None</span> |
| 71 | </div> |
| 72 | <div class="detail-row"> |
| 73 | <span class="detail-label">History</span> |
| 74 | <span class="detail-value">Disabled</span> |
| 75 | </div> |
| 76 | <div class="detail-row"> |
| 77 | <span class="detail-label">Base URL</span> |
| 78 | <span class="detail-value">.../chatbot/{app_code}</span> |
| 79 | </div> |
| 80 | </div> |
| 81 | <button class="btn-primary" onclick="openChatbot()"> |
| 82 | <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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> |
| 83 | Open Chatbot |
| 84 | </button> |
| 85 | </div> |
| 86 | </div> |
| 87 | |
| 88 | <div id="chatModal" class="modal"> |
| 89 | <div class="modal-content"> |
| 90 | <div class="modal-header"> |
| 91 | <h3>Chatbot — Public + No History</h3> |
| 92 | <button class="close-btn" onclick="closeChatbot()">×</button> |
| 93 | </div> |
| 94 | <div class="modal-body"> |
| 95 | <iframe id="chatIframe" src="" allow="microphone"></iframe> |
| 96 | </div> |
| 97 | </div> |
| 98 | </div> |
| 99 | |
| 100 | <script> |
| 101 | const APP_CODE = '4eFb0BunqZYEZlg7' |
| 102 | const BASE_URL = 'https://ai-studio.bliv.bangunindo.io' |
| 103 | function openChatbot() { |
| 104 | const modal = document.getElementById('chatModal') |
| 105 | const iframe = document.getElementById('chatIframe') |
| 106 | iframe.src = `${BASE_URL}/chatbot/${APP_CODE}` |
| 107 | modal.classList.add('active') |
| 108 | document.body.style.overflow = 'hidden' |
| 109 | } |
| 110 | function closeChatbot() { |
| 111 | const modal = document.getElementById('chatModal') |
| 112 | const iframe = document.getElementById('chatIframe') |
| 113 | modal.classList.remove('active') |
| 114 | setTimeout(() => { iframe.src = ''; document.body.style.overflow = ''; }, 300) |
| 115 | } |
| 116 | </script> |
| 117 | |
| 118 | </body> |
| 119 | </html> |
embed-script-auth-history.html
· 4.7 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Script (Auth + History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white;
border-radius: 24px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 480px;
overflow: hidden;
border: 1px solid #f1f5f9;
}
.card-header {
padding: 32px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.icon-circle {
width: 64px;
height: 64px;
background: #e0e7ff;
color: #4f46e5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
}
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 12px;
}
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge {
font-size: 0.7rem;
font-weight: 600;
padding: 6px 12px;
background: #f1f5f9;
border-radius: 99px;
display: flex;
align-items: center;
gap: 6px;
color: #475569;
}
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.badge-active { background: #e0f2f1; color: #14b8a6; }
.badge-active .badge-dot { background: #14b8a6; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.widget-preview {
text-align: center;
padding: 24px;
background: #fdfdfd;
border: 2px dashed #e2e8f0;
border-radius: 16px;
}
.widget-preview svg { color: #4f46e5; margin-bottom: 12px; opacity: 0.8; }
.widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">🔐</div>
<h1>Chatbot Embed Demo</h1>
<p>Authenticated • With History • Script</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge badge-active"><span class="badge-dot"></span>Auth On</span>
<span class="badge badge-active"><span class="badge-dot"></span>With History</span>
<span class="badge"><span class="badge-dot"></span>Script Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">Required</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">Enabled</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
</div>
</div>
<div class="widget-preview">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
<p>Lihat di pojok <strong>kanan bawah</strong>.</p>
</div>
</div>
</div>
<script>
window.blivChatbotConfig = {
token: '4eFb0BunqZYEZlg7',
baseUrl: 'https://ai-studio.bliv.bangunindo.io',
isDev: true,
login: true,
history: true,
draggable: true,
dragAxis: 'both',
dynamicScript: true,
systemVariables: {},
userVariables: {}
};
</script>
<script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Script (Auth + History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; |
| 22 | border-radius: 24px; |
| 23 | box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| 24 | width: 100%; |
| 25 | max-width: 480px; |
| 26 | overflow: hidden; |
| 27 | border: 1px solid #f1f5f9; |
| 28 | } |
| 29 | |
| 30 | .card-header { |
| 31 | padding: 32px; |
| 32 | text-align: center; |
| 33 | border-bottom: 1px solid #f1f5f9; |
| 34 | } |
| 35 | |
| 36 | .icon-circle { |
| 37 | width: 64px; |
| 38 | height: 64px; |
| 39 | background: #e0e7ff; |
| 40 | color: #4f46e5; |
| 41 | border-radius: 50%; |
| 42 | display: flex; |
| 43 | align-items: center; |
| 44 | justify-content: center; |
| 45 | font-size: 28px; |
| 46 | margin: 0 auto 16px; |
| 47 | } |
| 48 | |
| 49 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 50 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 51 | |
| 52 | .card-body { padding: 24px 32px 32px; } |
| 53 | .section-title { |
| 54 | font-size: 0.7rem; |
| 55 | font-weight: 700; |
| 56 | text-transform: uppercase; |
| 57 | letter-spacing: 0.05em; |
| 58 | color: #94a3b8; |
| 59 | margin-bottom: 12px; |
| 60 | } |
| 61 | |
| 62 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 63 | .badge { |
| 64 | font-size: 0.7rem; |
| 65 | font-weight: 600; |
| 66 | padding: 6px 12px; |
| 67 | background: #f1f5f9; |
| 68 | border-radius: 99px; |
| 69 | display: flex; |
| 70 | align-items: center; |
| 71 | gap: 6px; |
| 72 | color: #475569; |
| 73 | } |
| 74 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 75 | .badge-active { background: #e0f2f1; color: #14b8a6; } |
| 76 | .badge-active .badge-dot { background: #14b8a6; } |
| 77 | |
| 78 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 79 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 80 | .detail-row:last-child { border-bottom: none; } |
| 81 | .detail-label { color: #64748b; font-weight: 500; } |
| 82 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 83 | |
| 84 | .widget-preview { |
| 85 | text-align: center; |
| 86 | padding: 24px; |
| 87 | background: #fdfdfd; |
| 88 | border: 2px dashed #e2e8f0; |
| 89 | border-radius: 16px; |
| 90 | } |
| 91 | .widget-preview svg { color: #4f46e5; margin-bottom: 12px; opacity: 0.8; } |
| 92 | .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; } |
| 93 | </style> |
| 94 | </head> |
| 95 | <body> |
| 96 | |
| 97 | <div class="card"> |
| 98 | <div class="card-header"> |
| 99 | <div class="icon-circle">🔐</div> |
| 100 | <h1>Chatbot Embed Demo</h1> |
| 101 | <p>Authenticated • With History • Script</p> |
| 102 | </div> |
| 103 | <div class="card-body"> |
| 104 | <div class="section-title">Configuration</div> |
| 105 | <div class="badges"> |
| 106 | <span class="badge badge-active"><span class="badge-dot"></span>Auth On</span> |
| 107 | <span class="badge badge-active"><span class="badge-dot"></span>With History</span> |
| 108 | <span class="badge"><span class="badge-dot"></span>Script Mode</span> |
| 109 | </div> |
| 110 | <div class="details"> |
| 111 | <div class="detail-row"> |
| 112 | <span class="detail-label">Authentication</span> |
| 113 | <span class="detail-value">Required</span> |
| 114 | </div> |
| 115 | <div class="detail-row"> |
| 116 | <span class="detail-label">History</span> |
| 117 | <span class="detail-value">Enabled</span> |
| 118 | </div> |
| 119 | <div class="detail-row"> |
| 120 | <span class="detail-label">Base URL</span> |
| 121 | <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span> |
| 122 | </div> |
| 123 | </div> |
| 124 | <div class="widget-preview"> |
| 125 | <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg> |
| 126 | <p>Lihat di pojok <strong>kanan bawah</strong>.</p> |
| 127 | </div> |
| 128 | </div> |
| 129 | </div> |
| 130 | |
| 131 | <script> |
| 132 | window.blivChatbotConfig = { |
| 133 | token: '4eFb0BunqZYEZlg7', |
| 134 | baseUrl: 'https://ai-studio.bliv.bangunindo.io', |
| 135 | isDev: true, |
| 136 | login: true, |
| 137 | history: true, |
| 138 | draggable: true, |
| 139 | dragAxis: 'both', |
| 140 | dynamicScript: true, |
| 141 | systemVariables: {}, |
| 142 | userVariables: {} |
| 143 | }; |
| 144 | </script> |
| 145 | <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script> |
| 146 | |
| 147 | </body> |
| 148 | </html> |
embed-script-auth-no-history.html
· 4.7 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Script (Auth • No History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white;
border-radius: 24px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 480px;
overflow: hidden;
border: 1px solid #f1f5f9;
}
.card-header {
padding: 32px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.icon-circle {
width: 64px;
height: 64px;
background: #e0e7ff;
color: #4f46e5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
}
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 12px;
}
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge {
font-size: 0.7rem;
font-weight: 600;
padding: 6px 12px;
background: #f1f5f9;
border-radius: 99px;
display: flex;
align-items: center;
gap: 6px;
color: #475569;
}
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.badge-active { background: #e0f2f1; color: #14b8a6; }
.badge-active .badge-dot { background: #14b8a6; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.widget-preview {
text-align: center;
padding: 24px;
background: #fdfdfd;
border: 2px dashed #e2e8f0;
border-radius: 16px;
}
.widget-preview svg { color: #4f46e5; margin-bottom: 12px; opacity: 0.8; }
.widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">🔐</div>
<h1>Chatbot Embed Demo</h1>
<p>Authenticated • No History • Script</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge badge-active"><span class="badge-dot"></span>Auth Required</span>
<span class="badge"><span class="badge-dot"></span>History Disabled</span>
<span class="badge"><span class="badge-dot"></span>Script Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">True</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">False</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
</div>
</div>
<div class="widget-preview">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
<p>Lihat di pojok <strong>kanan bawah</strong>.</p>
</div>
</div>
</div>
<script>
window.blivChatbotConfig = {
token: '4eFb0BunqZYEZlg7',
baseUrl: 'https://ai-studio.bliv.bangunindo.io',
isDev: true,
login: true,
history: false,
draggable: true,
dragAxis: 'both',
dynamicScript: true,
systemVariables: {},
userVariables: {}
};
</script>
<script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Script (Auth • No History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; |
| 22 | border-radius: 24px; |
| 23 | box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| 24 | width: 100%; |
| 25 | max-width: 480px; |
| 26 | overflow: hidden; |
| 27 | border: 1px solid #f1f5f9; |
| 28 | } |
| 29 | |
| 30 | .card-header { |
| 31 | padding: 32px; |
| 32 | text-align: center; |
| 33 | border-bottom: 1px solid #f1f5f9; |
| 34 | } |
| 35 | |
| 36 | .icon-circle { |
| 37 | width: 64px; |
| 38 | height: 64px; |
| 39 | background: #e0e7ff; |
| 40 | color: #4f46e5; |
| 41 | border-radius: 50%; |
| 42 | display: flex; |
| 43 | align-items: center; |
| 44 | justify-content: center; |
| 45 | font-size: 28px; |
| 46 | margin: 0 auto 16px; |
| 47 | } |
| 48 | |
| 49 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 50 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 51 | |
| 52 | .card-body { padding: 24px 32px 32px; } |
| 53 | .section-title { |
| 54 | font-size: 0.7rem; |
| 55 | font-weight: 700; |
| 56 | text-transform: uppercase; |
| 57 | letter-spacing: 0.05em; |
| 58 | color: #94a3b8; |
| 59 | margin-bottom: 12px; |
| 60 | } |
| 61 | |
| 62 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 63 | .badge { |
| 64 | font-size: 0.7rem; |
| 65 | font-weight: 600; |
| 66 | padding: 6px 12px; |
| 67 | background: #f1f5f9; |
| 68 | border-radius: 99px; |
| 69 | display: flex; |
| 70 | align-items: center; |
| 71 | gap: 6px; |
| 72 | color: #475569; |
| 73 | } |
| 74 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 75 | .badge-active { background: #e0f2f1; color: #14b8a6; } |
| 76 | .badge-active .badge-dot { background: #14b8a6; } |
| 77 | |
| 78 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 79 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 80 | .detail-row:last-child { border-bottom: none; } |
| 81 | .detail-label { color: #64748b; font-weight: 500; } |
| 82 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 83 | |
| 84 | .widget-preview { |
| 85 | text-align: center; |
| 86 | padding: 24px; |
| 87 | background: #fdfdfd; |
| 88 | border: 2px dashed #e2e8f0; |
| 89 | border-radius: 16px; |
| 90 | } |
| 91 | .widget-preview svg { color: #4f46e5; margin-bottom: 12px; opacity: 0.8; } |
| 92 | .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; } |
| 93 | </style> |
| 94 | </head> |
| 95 | <body> |
| 96 | |
| 97 | <div class="card"> |
| 98 | <div class="card-header"> |
| 99 | <div class="icon-circle">🔐</div> |
| 100 | <h1>Chatbot Embed Demo</h1> |
| 101 | <p>Authenticated • No History • Script</p> |
| 102 | </div> |
| 103 | <div class="card-body"> |
| 104 | <div class="section-title">Configuration</div> |
| 105 | <div class="badges"> |
| 106 | <span class="badge badge-active"><span class="badge-dot"></span>Auth Required</span> |
| 107 | <span class="badge"><span class="badge-dot"></span>History Disabled</span> |
| 108 | <span class="badge"><span class="badge-dot"></span>Script Mode</span> |
| 109 | </div> |
| 110 | <div class="details"> |
| 111 | <div class="detail-row"> |
| 112 | <span class="detail-label">Authentication</span> |
| 113 | <span class="detail-value">True</span> |
| 114 | </div> |
| 115 | <div class="detail-row"> |
| 116 | <span class="detail-label">History</span> |
| 117 | <span class="detail-value">False</span> |
| 118 | </div> |
| 119 | <div class="detail-row"> |
| 120 | <span class="detail-label">Base URL</span> |
| 121 | <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span> |
| 122 | </div> |
| 123 | </div> |
| 124 | <div class="widget-preview"> |
| 125 | <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg> |
| 126 | <p>Lihat di pojok <strong>kanan bawah</strong>.</p> |
| 127 | </div> |
| 128 | </div> |
| 129 | </div> |
| 130 | |
| 131 | <script> |
| 132 | window.blivChatbotConfig = { |
| 133 | token: '4eFb0BunqZYEZlg7', |
| 134 | baseUrl: 'https://ai-studio.bliv.bangunindo.io', |
| 135 | isDev: true, |
| 136 | login: true, |
| 137 | history: false, |
| 138 | draggable: true, |
| 139 | dragAxis: 'both', |
| 140 | dynamicScript: true, |
| 141 | systemVariables: {}, |
| 142 | userVariables: {} |
| 143 | }; |
| 144 | </script> |
| 145 | <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script> |
| 146 | |
| 147 | </body> |
| 148 | </html> |
embed-script-no-auth-history.html
· 4.7 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Script (Public • History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white;
border-radius: 24px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 480px;
overflow: hidden;
border: 1px solid #f1f5f9;
}
.card-header {
padding: 32px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.icon-circle {
width: 64px;
height: 64px;
background: #f0fdfa;
color: #14b8a6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
}
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 12px;
}
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge {
font-size: 0.7rem;
font-weight: 600;
padding: 6px 12px;
background: #f1f5f9;
border-radius: 99px;
display: flex;
align-items: center;
gap: 6px;
color: #475569;
}
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.badge-active { background: #dbeafe; color: #1e40af; }
.badge-active .badge-dot { background: #1e40af; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.widget-preview {
text-align: center;
padding: 24px;
background: #fdfdfd;
border: 2px dashed #e2e8f0;
border-radius: 16px;
}
.widget-preview svg { color: #14b8a6; margin-bottom: 12px; opacity: 0.8; }
.widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">💬</div>
<h1>Chatbot Embed Demo</h1>
<p>Public • With History • Script</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge"><span class="badge-dot"></span>No Auth</span>
<span class="badge badge-active"><span class="badge-dot"></span>History On</span>
<span class="badge"><span class="badge-dot"></span>Script Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">None</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">True</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
</div>
</div>
<div class="widget-preview">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
<p>Lihat di pojok <strong>kanan bawah</strong>.</p>
</div>
</div>
</div>
<script>
window.blivChatbotConfig = {
token: '4eFb0BunqZYEZlg7',
baseUrl: 'https://ai-studio.bliv.bangunindo.io',
isDev: true,
login: false,
history: true,
draggable: true,
dragAxis: 'both',
dynamicScript: true,
systemVariables: {},
userVariables: {}
};
</script>
<script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Script (Public • History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; |
| 22 | border-radius: 24px; |
| 23 | box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| 24 | width: 100%; |
| 25 | max-width: 480px; |
| 26 | overflow: hidden; |
| 27 | border: 1px solid #f1f5f9; |
| 28 | } |
| 29 | |
| 30 | .card-header { |
| 31 | padding: 32px; |
| 32 | text-align: center; |
| 33 | border-bottom: 1px solid #f1f5f9; |
| 34 | } |
| 35 | |
| 36 | .icon-circle { |
| 37 | width: 64px; |
| 38 | height: 64px; |
| 39 | background: #f0fdfa; |
| 40 | color: #14b8a6; |
| 41 | border-radius: 50%; |
| 42 | display: flex; |
| 43 | align-items: center; |
| 44 | justify-content: center; |
| 45 | font-size: 28px; |
| 46 | margin: 0 auto 16px; |
| 47 | } |
| 48 | |
| 49 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 50 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 51 | |
| 52 | .card-body { padding: 24px 32px 32px; } |
| 53 | .section-title { |
| 54 | font-size: 0.7rem; |
| 55 | font-weight: 700; |
| 56 | text-transform: uppercase; |
| 57 | letter-spacing: 0.05em; |
| 58 | color: #94a3b8; |
| 59 | margin-bottom: 12px; |
| 60 | } |
| 61 | |
| 62 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 63 | .badge { |
| 64 | font-size: 0.7rem; |
| 65 | font-weight: 600; |
| 66 | padding: 6px 12px; |
| 67 | background: #f1f5f9; |
| 68 | border-radius: 99px; |
| 69 | display: flex; |
| 70 | align-items: center; |
| 71 | gap: 6px; |
| 72 | color: #475569; |
| 73 | } |
| 74 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 75 | .badge-active { background: #dbeafe; color: #1e40af; } |
| 76 | .badge-active .badge-dot { background: #1e40af; } |
| 77 | |
| 78 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 79 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 80 | .detail-row:last-child { border-bottom: none; } |
| 81 | .detail-label { color: #64748b; font-weight: 500; } |
| 82 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 83 | |
| 84 | .widget-preview { |
| 85 | text-align: center; |
| 86 | padding: 24px; |
| 87 | background: #fdfdfd; |
| 88 | border: 2px dashed #e2e8f0; |
| 89 | border-radius: 16px; |
| 90 | } |
| 91 | .widget-preview svg { color: #14b8a6; margin-bottom: 12px; opacity: 0.8; } |
| 92 | .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; } |
| 93 | </style> |
| 94 | </head> |
| 95 | <body> |
| 96 | |
| 97 | <div class="card"> |
| 98 | <div class="card-header"> |
| 99 | <div class="icon-circle">💬</div> |
| 100 | <h1>Chatbot Embed Demo</h1> |
| 101 | <p>Public • With History • Script</p> |
| 102 | </div> |
| 103 | <div class="card-body"> |
| 104 | <div class="section-title">Configuration</div> |
| 105 | <div class="badges"> |
| 106 | <span class="badge"><span class="badge-dot"></span>No Auth</span> |
| 107 | <span class="badge badge-active"><span class="badge-dot"></span>History On</span> |
| 108 | <span class="badge"><span class="badge-dot"></span>Script Mode</span> |
| 109 | </div> |
| 110 | <div class="details"> |
| 111 | <div class="detail-row"> |
| 112 | <span class="detail-label">Authentication</span> |
| 113 | <span class="detail-value">None</span> |
| 114 | </div> |
| 115 | <div class="detail-row"> |
| 116 | <span class="detail-label">History</span> |
| 117 | <span class="detail-value">True</span> |
| 118 | </div> |
| 119 | <div class="detail-row"> |
| 120 | <span class="detail-label">Base URL</span> |
| 121 | <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span> |
| 122 | </div> |
| 123 | </div> |
| 124 | <div class="widget-preview"> |
| 125 | <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg> |
| 126 | <p>Lihat di pojok <strong>kanan bawah</strong>.</p> |
| 127 | </div> |
| 128 | </div> |
| 129 | </div> |
| 130 | |
| 131 | <script> |
| 132 | window.blivChatbotConfig = { |
| 133 | token: '4eFb0BunqZYEZlg7', |
| 134 | baseUrl: 'https://ai-studio.bliv.bangunindo.io', |
| 135 | isDev: true, |
| 136 | login: false, |
| 137 | history: true, |
| 138 | draggable: true, |
| 139 | dragAxis: 'both', |
| 140 | dynamicScript: true, |
| 141 | systemVariables: {}, |
| 142 | userVariables: {} |
| 143 | }; |
| 144 | </script> |
| 145 | <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script> |
| 146 | |
| 147 | </body> |
| 148 | </html> |
embed-script-no-auth-no-history.html
· 4.6 KiB · HTML
Raw
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bliv AI - Script (Public • No History)</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, system-ui, sans-serif;
background: #f8fafc;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.card {
background: white;
border-radius: 24px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 480px;
overflow: hidden;
border: 1px solid #f1f5f9;
}
.card-header {
padding: 32px;
text-align: center;
border-bottom: 1px solid #f1f5f9;
}
.icon-circle {
width: 64px;
height: 64px;
background: #f0fdfa;
color: #14b8a6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 16px;
}
.card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; }
.card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; }
.card-body { padding: 24px 32px 32px; }
.section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #94a3b8;
margin-bottom: 12px;
}
.badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge {
font-size: 0.7rem;
font-weight: 600;
padding: 6px 12px;
background: #f1f5f9;
border-radius: 99px;
display: flex;
align-items: center;
gap: 6px;
color: #475569;
}
.badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; }
.details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; }
.detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.detail-row:last-child { border-bottom: none; }
.detail-label { color: #64748b; font-weight: 500; }
.detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; }
.widget-preview {
text-align: center;
padding: 24px;
background: #fdfdfd;
border: 2px dashed #e2e8f0;
border-radius: 16px;
}
.widget-preview svg { color: #14b8a6; margin-bottom: 12px; opacity: 0.8; }
.widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; }
</style>
</head>
<body>
<div class="card">
<div class="card-header">
<div class="icon-circle">💬</div>
<h1>Chatbot Embed Demo</h1>
<p>Public • No History • Script</p>
</div>
<div class="card-body">
<div class="section-title">Configuration</div>
<div class="badges">
<span class="badge"><span class="badge-dot"></span>No Auth</span>
<span class="badge"><span class="badge-dot"></span>History Off</span>
<span class="badge"><span class="badge-dot"></span>Script Mode</span>
</div>
<div class="details">
<div class="detail-row">
<span class="detail-label">Authentication</span>
<span class="detail-value">False</span>
</div>
<div class="detail-row">
<span class="detail-label">History</span>
<span class="detail-value">False</span>
</div>
<div class="detail-row">
<span class="detail-label">Base URL</span>
<span class="detail-value">https://ai-studio.bliv.bangunindo.io</span>
</div>
</div>
<div class="widget-preview">
<svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
<p>Lihat di pojok <strong>kanan bawah</strong>.</p>
</div>
</div>
</div>
<script>
window.blivChatbotConfig = {
token: '4eFb0BunqZYEZlg7',
baseUrl: 'https://ai-studio.bliv.bangunindo.io',
isDev: true,
login: false,
history: false,
draggable: true,
dragAxis: 'both',
dynamicScript: true,
systemVariables: {},
userVariables: {}
};
</script>
<script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script>
</body>
</html>
| 1 | <!DOCTYPE html> |
| 2 | <html lang="id"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Bliv AI - Script (Public • No History)</title> |
| 7 | <style> |
| 8 | * { margin: 0; padding: 0; box-sizing: border-box; } |
| 9 | body { |
| 10 | font-family: -apple-system, system-ui, sans-serif; |
| 11 | background: #f8fafc; |
| 12 | color: #1e293b; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | min-height: 100vh; |
| 17 | padding: 20px; |
| 18 | } |
| 19 | |
| 20 | .card { |
| 21 | background: white; |
| 22 | border-radius: 24px; |
| 23 | box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
| 24 | width: 100%; |
| 25 | max-width: 480px; |
| 26 | overflow: hidden; |
| 27 | border: 1px solid #f1f5f9; |
| 28 | } |
| 29 | |
| 30 | .card-header { |
| 31 | padding: 32px; |
| 32 | text-align: center; |
| 33 | border-bottom: 1px solid #f1f5f9; |
| 34 | } |
| 35 | |
| 36 | .icon-circle { |
| 37 | width: 64px; |
| 38 | height: 64px; |
| 39 | background: #f0fdfa; |
| 40 | color: #14b8a6; |
| 41 | border-radius: 50%; |
| 42 | display: flex; |
| 43 | align-items: center; |
| 44 | justify-content: center; |
| 45 | font-size: 28px; |
| 46 | margin: 0 auto 16px; |
| 47 | } |
| 48 | |
| 49 | .card-header h1 { font-size: 1.5rem; color: #0f172a; margin-bottom: 6px; font-weight: 700; } |
| 50 | .card-header p { font-size: 0.875rem; color: #64748b; font-weight: 500; } |
| 51 | |
| 52 | .card-body { padding: 24px 32px 32px; } |
| 53 | .section-title { |
| 54 | font-size: 0.7rem; |
| 55 | font-weight: 700; |
| 56 | text-transform: uppercase; |
| 57 | letter-spacing: 0.05em; |
| 58 | color: #94a3b8; |
| 59 | margin-bottom: 12px; |
| 60 | } |
| 61 | |
| 62 | .badges { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } |
| 63 | .badge { |
| 64 | font-size: 0.7rem; |
| 65 | font-weight: 600; |
| 66 | padding: 6px 12px; |
| 67 | background: #f1f5f9; |
| 68 | border-radius: 99px; |
| 69 | display: flex; |
| 70 | align-items: center; |
| 71 | gap: 6px; |
| 72 | color: #475569; |
| 73 | } |
| 74 | .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } |
| 75 | |
| 76 | .details { background: #f8fafc; border-radius: 16px; padding: 16px; margin-bottom: 24px; border: 1px solid #f1f5f9; } |
| 77 | .detail-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid #f1f5f9; } |
| 78 | .detail-row:last-child { border-bottom: none; } |
| 79 | .detail-label { color: #64748b; font-weight: 500; } |
| 80 | .detail-value { font-weight: 600; font-family: ui-monospace, monospace; color: #0f172a; } |
| 81 | |
| 82 | .widget-preview { |
| 83 | text-align: center; |
| 84 | padding: 24px; |
| 85 | background: #fdfdfd; |
| 86 | border: 2px dashed #e2e8f0; |
| 87 | border-radius: 16px; |
| 88 | } |
| 89 | .widget-preview svg { color: #14b8a6; margin-bottom: 12px; opacity: 0.8; } |
| 90 | .widget-preview p { font-size: 0.875rem; color: #334155; margin-bottom: 4px; } |
| 91 | </style> |
| 92 | </head> |
| 93 | <body> |
| 94 | |
| 95 | <div class="card"> |
| 96 | <div class="card-header"> |
| 97 | <div class="icon-circle">💬</div> |
| 98 | <h1>Chatbot Embed Demo</h1> |
| 99 | <p>Public • No History • Script</p> |
| 100 | </div> |
| 101 | <div class="card-body"> |
| 102 | <div class="section-title">Configuration</div> |
| 103 | <div class="badges"> |
| 104 | <span class="badge"><span class="badge-dot"></span>No Auth</span> |
| 105 | <span class="badge"><span class="badge-dot"></span>History Off</span> |
| 106 | <span class="badge"><span class="badge-dot"></span>Script Mode</span> |
| 107 | </div> |
| 108 | <div class="details"> |
| 109 | <div class="detail-row"> |
| 110 | <span class="detail-label">Authentication</span> |
| 111 | <span class="detail-value">False</span> |
| 112 | </div> |
| 113 | <div class="detail-row"> |
| 114 | <span class="detail-label">History</span> |
| 115 | <span class="detail-value">False</span> |
| 116 | </div> |
| 117 | <div class="detail-row"> |
| 118 | <span class="detail-label">Base URL</span> |
| 119 | <span class="detail-value">https://ai-studio.bliv.bangunindo.io</span> |
| 120 | </div> |
| 121 | </div> |
| 122 | <div class="widget-preview"> |
| 123 | <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg> |
| 124 | <p>Lihat di pojok <strong>kanan bawah</strong>.</p> |
| 125 | </div> |
| 126 | </div> |
| 127 | </div> |
| 128 | |
| 129 | <script> |
| 130 | window.blivChatbotConfig = { |
| 131 | token: '4eFb0BunqZYEZlg7', |
| 132 | baseUrl: 'https://ai-studio.bliv.bangunindo.io', |
| 133 | isDev: true, |
| 134 | login: false, |
| 135 | history: false, |
| 136 | draggable: true, |
| 137 | dragAxis: 'both', |
| 138 | dynamicScript: true, |
| 139 | systemVariables: {}, |
| 140 | userVariables: {} |
| 141 | }; |
| 142 | </script> |
| 143 | <script src="https://ai-studio.bliv.bangunindo.io/embed.min.js"></script> |
| 144 | |
| 145 | </body> |
| 146 | </html> |