Paste one snippet into your site's HTML and the chatbot widget will appear in the bottom-right corner.
This iframe loads the chatbot widget from this app and overlays it on your site.
<!-- Sapiencia AI Chatbot Widget -->
<!-- Desktop: floating bubble (hidden on mobile) -->
<iframe
id="sapiencia-chat-desktop"
src="https://chat.sapiencia.ai/widget"
style="position:fixed;bottom:0;right:0;width:420px;height:620px;border:none;z-index:9999;background:transparent;"
allow="clipboard-write"
allowtransparency="true"
title="Sapiencia AI Chat"
></iframe>
<!-- Mobile: full-screen inline panel triggered by a button -->
<button
id="sapiencia-chat-btn"
onclick="document.getElementById('sapiencia-chat-mobile').style.display='block';this.style.display='none';"
style="display:none;position:fixed;bottom:24px;right:24px;z-index:9999;width:56px;height:56px;border-radius:50%;background:#7c3aed;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(124,58,237,0.4);"
aria-label="Open chat"
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin:auto;display:block;"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</button>
<div id="sapiencia-chat-mobile" style="display:none;position:fixed;inset:0;z-index:9999;">
<iframe
src="https://chat.sapiencia.ai/widget?mode=inline"
style="width:100%;height:100%;border:none;background:#0f0f14;"
allow="clipboard-write"
title="Sapiencia AI Chat"
></iframe>
<button
onclick="document.getElementById('sapiencia-chat-mobile').style.display='none';document.getElementById('sapiencia-chat-btn').style.display='block';"
style="position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.1);border:none;color:white;width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:18px;line-height:1;"
aria-label="Close chat"
>✕</button>
</div>
<script>
// Show mobile button, hide desktop iframe on small screens
(function() {
function applyMode() {
var isMobile = window.innerWidth < 768;
var desktop = document.getElementById('sapiencia-chat-desktop');
var btn = document.getElementById('sapiencia-chat-btn');
if (desktop) desktop.style.display = isMobile ? 'none' : 'block';
if (btn) btn.style.display = isMobile ? 'block' : 'none';
}
applyMode();
window.addEventListener('resize', applyMode);
})();
</script></body>Open your site's HTML template (or CMS theme editor) and paste the snippet just before the closing </body> tag. It works with any HTML-based site — WordPress, Webflow, Squarespace, custom HTML, etc.
Save and publish your site. A purple chat bubble will appear in the bottom-right corner. Click it to open the assistant.
Notes