@moveo-ai/web-client
Version:
Client side library to load the moveo chat widget and connect it with your agent
70 lines (62 loc) • 4.08 kB
HTML
<html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/><meta name="keywords" content="Moveo.ai, Voice, Audio, Preview"/><meta name="description" content="Test your Audio Integration"/><meta name="twitter:card" content="summary"/><meta property="og:title" content="Moveo.ai Audio Preview"/><meta property="og:type" content="website"/><meta property="og:url" content="https://moveo.ai"/><meta property="og:image" content="https://web-client.moveo.ai/public/og-image.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:description" content="Test your Audio Integration"/><title>Moveo.ai Audio Preview</title><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#preview-content',
corePlugins: { preflight: false },
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
},
colors: {
'moveo-primary': '#1B66D6',
'moveo-secondary': '#EEF2FF',
},
backgroundImage: {
'moveo-radial':
'radial-gradient(circle at top right, rgba(27,102,214,0.18), transparent 55%)',
},
},
},
};</script><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet"/><script defer="defer" src="/audio-client.min.js"></script></head><body><div id="preview-content" class="relative min-h-screen font-sans text-slate-900 antialiased"><main class="relative z-10 flex min-h-screen items-center"><section class="mx-auto flex w-full max-w-6xl flex-col gap-12 px-6 py-16 md:flex-row md:items-center md:px-12 lg:gap-16"><header class="max-w-2xl space-y-6 text-center md:text-left"><h1 class="text-4xl font-semibold leading-tight sm:text-5xl">Preview and test<br class="hidden sm:block"/>your voice integration</h1><p class="text-lg text-slate-600 sm:text-xl">Click the widget button at the bottom right to start a test call and try your AI Agent with voice.</p><div id="status" class="text-sm font-medium"></div></header></section></main></div><script>localStorage.debug = 'moveo:audio:*';
const statusNode = document.getElementById('status');
const toneColor = {
warning: 'text-amber-600',
error: 'text-rose-600',
};
const setStatus = (message, tone = 'error') => {
if (!statusNode) return;
statusNode.className = `text-sm font-medium ${toneColor[tone] ?? toneColor.error}`;
statusNode.textContent = message;
};
window.addEventListener('load', async () => {
const params = new URLSearchParams(window.location.search);
const integrationId =
(params.get('integration_id') ?? params.get('integrationId') ?? '').trim();
if (!integrationId) {
setStatus('Add "?integration_id=YOUR_ID" to the URL to begin.', 'warning');
return;
}
const hostParam = (params.get('host') ?? '').trim();
const host = hostParam ? hostParam.replace(/\/+$/, '') : '';
if (!window.MoveoAudio?.init) {
console.error('MoveoAudio UMD build is not available on window.');
setStatus(
'Unable to load the audio client. Check the bundle output.',
'error'
);
return;
}
try {
const audioController = await window.MoveoAudio.init({
integrationId,
...(host ? { host } : {}),
});
audioController.on?.('error', ({ message }) => {
setStatus(`Call error: ${message || 'unexpected error'}`, 'error');
});
// Widget initialized successfully - no status message needed
console.log('✅ MoveoAudio widget initialized', audioController);
} catch (error) {
console.error('❌ Failed to initialize MoveoAudio widget:', error);
setStatus(`Failed to initialize the audio widget`, 'error');
}
});</script></body></html>