Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>Policy-Agent Chatbot – Single-File Demo</title> | |
| <meta name="description" content="Drop-in demo page embedding the Policy-Agent chatbot widget." /> | |
| <style> | |
| :root{ | |
| --brand:#031B4E; | |
| --accent:#0061EB; | |
| --muted:#E5E8ED; | |
| --ink:#0b1426; | |
| --bg:#f7f9fc; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{height:100%} | |
| body{ | |
| margin:0; | |
| font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; | |
| color:var(--ink); | |
| background:var(--bg); | |
| } | |
| header{ | |
| background:linear-gradient(135deg,var(--brand),#0b3a9d 65%); | |
| color:#fff; | |
| padding:28px 20px; | |
| } | |
| header .wrap{max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:16px} | |
| .logo{ | |
| width:40px;height:40px;border-radius:10px;background:#fff;display:grid;place-items:center; | |
| color:var(--brand);font-weight:700 | |
| } | |
| h1{margin:0;font-size:1.5rem} | |
| main{max-width:1000px;margin:30px auto;padding:0 20px} | |
| .card{ | |
| background:#fff;border:1px solid var(--muted);border-radius:14px; | |
| box-shadow:0 6px 16px rgba(3,27,78,.06);overflow:hidden | |
| } | |
| .card .hero{ | |
| padding:24px 24px 8px 24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center | |
| } | |
| .hero h2{flex:1 1 320px;margin:0;font-size:1.35rem} | |
| .pill{ | |
| display:inline-flex;align-items:center;gap:8px; | |
| background:var(--muted);color:#334; | |
| padding:8px 12px;border-radius:999px;font-size:.9rem | |
| } | |
| .body{padding:12px 24px 24px 24px;color:#425466} | |
| .cta{ | |
| display:flex;gap:12px;flex-wrap:wrap;margin-top:12px | |
| } | |
| .btn{ | |
| appearance:none;border:0;cursor:pointer; | |
| background:var(--accent);color:#fff;padding:12px 16px;border-radius:10px; | |
| font-weight:600;box-shadow:0 4px 12px rgba(0,97,235,.25);transition:transform .06s ease | |
| } | |
| .btn:active{transform:translateY(1px)} | |
| .btn.secondary{ | |
| background:#fff;color:#0b3a9d;border:1px solid var(--muted);box-shadow:none | |
| } | |
| footer{color:#6b7280;text-align:center;font-size:.85rem;margin:28px 0} | |
| code{background:#f2f4f8;padding:2px 6px;border-radius:6px} | |
| .support{margin-top:8px;font-size:.9rem;color:#667} | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="wrap"> | |
| <div class="logo">PA</div> | |
| <h1>Policy-Agent Chatbot – Embedded Widget</h1> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="card"> | |
| <div class="hero"> | |
| <h2>Turn-key conversational policy analysis, embedded on a single page.</h2> | |
| <span class="pill">Agent: <strong>policy-agent</strong></span> | |
| <span class="pill">Mode: Widget</span> | |
| </div> | |
| <div class="body"> | |
| <p> | |
| This page demonstrates how to embed your DigitalOcean-hosted agent. The floating chat | |
| launcher will appear once the widget script loads. Everything—HTML, CSS, and JS—is in this file. | |
| </p> | |
| <div class="cta"> | |
| <button id="openChat" class="btn">Open Chatbot</button> | |
| <button id="closeChat" class="btn secondary">Close Chatbot</button> | |
| </div> | |
| <p class="support"> | |
| If you don’t see the launcher, check your network/CSP and that the | |
| <code>data-agent-id</code> is correct. | |
| </p> | |
| </div> | |
| </section> | |
| <footer> | |
| © <span id="y"></span> Policy-Agent Demo. All rights reserved. | |
| </footer> | |
| </main> | |
| <!-- Your chatbot widget: embed once, near the end of <body> --> | |
| <script async | |
| src="https://q77iuwf7ncfemoonbzon2iyd.agents.do-ai.run/static/chatbot/widget.js" | |
| data-agent-id="fcad9141-8590-11f0-b074-4e013e2ddde4" | |
| data-chatbot-id="oTQKgtWMkQLbLVw7CIHkbxw25Pu9jekn" | |
| data-name="policy-agent Chatbot" | |
| data-primary-color="#031B4E" | |
| data-secondary-color="#E5E8ED" | |
| data-button-background-color="#0061EB" | |
| data-starting-message="Hello! I am your policy analysis bot made to help you comb through the policies." | |
| data-logo="/static/chatbot/icons/default-agent.svg"> | |
| </script> | |
| <!-- Small helper script: tries to open/close the widget if a public API is exposed --> | |
| <script> | |
| // Footer year | |
| document.getElementById('y').textContent = new Date().getFullYear(); | |
| // Some widgets expose a global with open()/close(). We try politely; if not, we no-op. | |
| function getWidget(){ | |
| // Common patterns; adjust to your vendor if they document an API. | |
| return window.PolicyAgentWidget || window.ChatbotWidget || window.AgentWidget || null; | |
| } | |
| document.getElementById('openChat').addEventListener('click', () => { | |
| const w = getWidget(); | |
| if (w && typeof w.open === 'function') { w.open(); } | |
| // If no API, the user can click the floating launcher; this is just progressive enhancement. | |
| }); | |
| document.getElementById('closeChat').addEventListener('click', () => { | |
| const w = getWidget(); | |
| if (w && typeof w.close === 'function') { w.close(); } | |
| }); | |
| // Basic CSP hint (optional): log if the script fails to load | |
| window.addEventListener('error', (e) => { | |
| if (e.target && e.target.tagName === 'SCRIPT' && | |
| String(e.target.src).includes('/static/chatbot/widget.js')) { | |
| console.warn('Chatbot widget failed to load. Check CSP and network allowlists.'); | |
| } | |
| }, true); | |
| </script> | |
| </body> | |
| </html> | |