Spaces:
Paused
Paused
File size: 5,442 Bytes
c22f1bf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <!DOCTYPE html>
<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>
|