elevenlab
This commit is contained in:
40
public/widget/custom/brandize.js
Normal file
40
public/widget/custom/brandize.js
Normal file
@@ -0,0 +1,40 @@
|
||||
const callBtn = document.getElementById('callBtn');
|
||||
let conversation = null;
|
||||
|
||||
callBtn.addEventListener('click', async () => {
|
||||
console.log('Requesting microphone access...');
|
||||
|
||||
try {
|
||||
await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
} catch (error) {
|
||||
console.log('Microphone access denied.');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Connecting to agent...');
|
||||
|
||||
try {
|
||||
const { Conversation } = window.ElevenLabs;
|
||||
|
||||
conversation = await Conversation.startSession({
|
||||
agentId: 'agent_01jx2xm2w4exwvjhbq52js687f',
|
||||
connectionType: 'websocket', // or "webrtc"
|
||||
onConnect: () => {
|
||||
console.log('✅ Connected to AI Agent!');
|
||||
},
|
||||
onDisconnect: () => {
|
||||
console.log('🔌 Disconnected.');
|
||||
},
|
||||
onError: (err) => {
|
||||
console.log(`❌ Error: ${err.message || err}`);
|
||||
},
|
||||
onMessage: (msg) => {
|
||||
console.log('Agent:', msg);
|
||||
},
|
||||
});
|
||||
} catch (err) {
|
||||
console.log('Failed to start session.');
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"api": "https://brandize.n8n.odoo4projects.com/webhook/81742473-b50b-4845-a5f9-916d9fe60876/chat",
|
||||
"preamble": "Welcome to Brandize",
|
||||
"widgetHTML": "<button id='cw-chatToggle' aria-label='Toggle chat widget' type='button'>\n <img height='50px' src='widget/custom/brandize.svg' alt='Logo'></button>\n<div id='cw-chatWidget' style='display: none;' role='region' aria-live='polite' aria-label='Chat widget'>\n <div class='logo-container'><img src='widget/custom/brandize.svg' alt='Logo' /></div>\n <div class='header'>Support</div>\n <div id='cw-status' style='transition: all 0.3s ease; overflow: hidden;'></div>\n <div id='cw-chatMessages' style='max-height: 200px; overflow-y: auto; padding: 10px;'></div>\n <form id='cw-chatForm' autocomplete='off'>\n <input type='text' id='cw-chatInput' placeholder='Type your message...' required autocomplete='off' />\n <button type='submit'>Send</button>\n </form>\n</div>"
|
||||
"widgetHTML": "<button id='cw-chatToggle' aria-label='Toggle chat widget' type='button'>\n <img height='50px' src='widget/custom/brandize.svg' alt='Logo'></button>\n<div id='cw-chatWidget' style='display: none;' role='region' aria-live='polite' aria-label='Chat widget'>\n <div class='logo-container'><img src='widget/custom/brandize.svg' alt='Logo' /><button id='callBtn'>📞</button></div>\n <div class='header'>Support</div>\n <div id='cw-status' style='transition: all 0.3s ease; overflow: hidden;'></div>\n <div id='cw-chatMessages' style='max-height: 200px; overflow-y: auto; padding: 10px;'></div>\n <form id='cw-chatForm' autocomplete='off'>\n <input type='text' id='cw-chatInput' placeholder='Type your message...' required autocomplete='off' />\n <button type='submit'>Send</button>\n </form>\n</div><script type='module'>\nimport { Conversation } from 'https://cdn.skypack.dev/@elevenlabs/client';\n window.ElevenLabs = { Conversation };\n</script><script type='module' src='widget/custom/brandize.js'></script>"
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user