taufikmuharrom / AI Studio Embed Example ( Vue.js )

<template> <div class="direct-iframe-wrapper"> <div class="direct-iframe-title">Direct Iframe Embed</div> <iframe src="https://ai-studio.bliv.bangunindo.io/chatbot/4eFb0BunqZYEZlg7" class="direct-iframe" allow="microphone" title="Chatbot Direct" /> </div> </template> <style scoped> .direct-iframe-wrapper { width: 100%; height: calc(100vh - 48px); display: flex; flex-direction: column; } .direct-iframe-title { margin-bottom: 16px; font-weight: 600; color: #374151; } .direct-iframe { width: 100%; flex: 1; min-height: 700px; border: none; border-radius: 16px; background: #fff; } </style>

<template> <div class="embed-wrapper"> <div class="card"> <div class="card-header"> <div class="icon-circle">🔐</div> <h1>Chatbot Modal Demo</h1> <p>Authenticated • With History • Iframe Modal</p> </div> <div class="card-body"> <div class="section-title">Configuration</div> <div class="badges"> <span class="badge badge-auth"><span class="badge-dot"></span>Auth Enabled</span> <span class="badge badge-history"><span class="badge-dot"></span>History On</span> <span class="badge badge-mode"><span class="badge-dot"></span>Modal Mode</span> </div> <div class="details"> <div class="detail-row"> <span class="detail-label">Mechanism</span> <span class="detail-value">Iframe in Modal</span> </div> <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">Base URL</span> <span class="detail-value" style="font-size: 0.7rem">ai-studio.bliv.bangunindo.io</span> </div> </div> <button class="btn-primary" @click="isOpen = true"> <svg width="18" height="18" 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> Mulai Percakapan </button> </div> </div> <!-- Modal Implementation --> <div class="modal" :class="{ active: isOpen }" @click.self="isOpen = false"> <div class="modal-content"> <div class="modal-header"> <h3>Bliv AI Chatbot</h3> <button class="close-btn" @click="isOpen = false">&times;</button> </div> <div class="modal-body"> <iframe v-if="isOpen" :src="iframeSrc" allow="microphone" title="Chatbot" /> </div> </div> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; const isOpen = ref(false); const appCode = "4eFb0BunqZYEZlg7"; const baseUrl = "https://ai-studio.bliv.bangunindo.io"; const iframeSrc = `${baseUrl}/chatbot-auth/${appCode}/history`; </script> <style scoped> .embed-wrapper { width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; } .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: 4px; font-weight: 700; } .card-header p { font-size: 0.875rem; color: #64748b; } .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: 20px; flex-wrap: wrap; } .badge { font-size: 0.7rem; padding: 6px 12px; background: #f1f5f9; border-radius: 99px; display: flex; align-items: center; gap: 6px; color: #475569; font-weight: 600; } .badge-dot { width: 6px; height: 6px; background: #64748b; border-radius: 50%; } .badge-auth { background: #e0f2f1; color: #14b8a6; } .badge-auth .badge-dot { background: #14b8a6; } .badge-history { background: #dbeafe; color: #1e40af; } .badge-history .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: 6px 0; border-bottom: 1px solid #f1f5f9; } .detail-row:last-child { border-bottom: none; } .detail-label { color: #64748b; } .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; } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); } /* Modal Styles */ .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>

<template> <div class="direct-script-wrapper"> <div class="direct-script-title">Direct Script Embed</div> <div class="direct-script-card"> <div class="icon-circle">⚡</div> <h1>Widget Aktif</h1> <p> Script chatbot Bliv AI telah dimuat secara langsung pada halaman ini. </p> <small>Periksa sudut kanan bawah layar Anda untuk memulai chat.</small> </div> </div> </template> <script setup lang="ts"> import { onMounted, onUnmounted } from "vue"; const baseUrl = "https://ai-studio.bliv.bangunindo.io"; onMounted(() => { const config = { token: "4eFb0BunqZYEZlg7", baseUrl: baseUrl, isDev: true, login: false, history: false, draggable: true, dragAxis: "both", dynamicScript: true, systemVariables: {}, userVariables: {}, }; (window as any).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); }); onUnmounted(() => { const script = document.getElementById("bliv-embed-script"); if (script) script.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()); }); delete (window as any).blivChatbotConfig; }); </script> <style scoped> .direct-script-wrapper { width: 100%; padding: 24px; } .direct-script-title { margin-bottom: 24px; font-weight: 600; color: #374151; } .direct-script-card { background: white; padding: 48px; border-radius: 24px; text-align: center; max-width: 480px; margin: 60px auto; box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.1); border: 1px solid #f1f5f9; } .icon-circle { width: 64px; height: 64px; background: #e0f2f1; color: #14b8a6; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; margin: 0 auto 24px; } h1 { font-size: 1.5rem; margin-bottom: 12px; color: #0f172a; font-weight: 700; } p { color: #475569; margin-bottom: 24px; line-height: 1.6; } small { color: #94a3b8; font-weight: 500; } </style>