📱 Live Demo
✅ Bypass Mode Active: This demo uses bypassName=true to skip the registration modal.
Test Responsive Sizes:
🔧 Integration Guide
Basic Iframe Embed:
<iframe
src="https://widget.tommytalk.ai/widget.html?assistantId=YOUR_ASSISTANT_ID&assistantName=Your+Assistant&theme=light"
width="100%"
height="700"
frameborder="0"
allow="microphone; camera">
</iframe>
With Bypass Parameters:
<iframe
src="https://widget.tommytalk.ai/widget.html?assistantId=YOUR_ASSISTANT_ID&assistantName=Your+Assistant&theme=light&bypassName=true&bypassEmail=true"
width="100%"
height="700"
frameborder="0"
allow="microphone; camera">
</iframe>
Available Parameters:
assistantId - Required. Your assistant's unique IDassistantName - Display name for the assistanttheme - light | dark | autobypassName - true to skip name entrybypassEmail - true to skip email entryuserName - Pre-fill user's nameuserEmail - Pre-fill user's emailvoiceInput - true to enable voice inputshowMinimizeButton - true | falseshowCloseButton - true | false
💡 Pro Tip: Use bypassName=true for instant access without registration. Perfect for demos, kiosks, or anonymous support.
Responsive Container:
<style>
.chat-widget-container {
width: 100%;
max-width: 500px;
height: 700px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 40px rgba(0,0,0,0.16);
}
.chat-widget-iframe {
width: 100%;
height: 100%;
border: none;
}
/* Mobile responsive */
@media (max-width: 768px) {
.chat-widget-container {
height: 100vh;
max-width: 100%;
border-radius: 0;
}
}
</style>
<div class="chat-widget-container">
<iframe
class="chat-widget-iframe"
src="https://widget.tommytalk.ai/widget.html?..."
allow="microphone; camera">
</iframe>
</div>
⚠️ Important: Always include allow="microphone; camera" if you plan to use voice features.
Full-Page Integration:
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.fullpage-widget {
width: 100vw;
height: 100vh;
border: none;
}
</style>
<iframe
class="fullpage-widget"
src="https://widget.tommytalk.ai/widget.html?..."
allow="microphone; camera">
</iframe>
JavaScript Control (Optional):
<script>
// Listen for widget ready event
window.addEventListener('message', function(event) {
if (event.data.type === 'widget:ready') {
console.log('Widget is ready!');
}
});
// Dynamic iframe creation
function createWidget(assistantId, containerId) {
const container = document.getElementById(containerId);
const iframe = document.createElement('iframe');
iframe.src = `https://widget.tommytalk.ai/widget.html?assistantId=${assistantId}&theme=light&bypassName=true`;
iframe.width = '100%';
iframe.height = '700';
iframe.frameBorder = '0';
iframe.allow = 'microphone; camera';
container.appendChild(iframe);
}
</script>