From 1798c48d3bb9c42172f38177abfc6d011c2744ed Mon Sep 17 00:00:00 2001
From: Oliver <oliver@odoo4projects.com>
Date: Mon, 28 Jul 2025 18:37:49 -0300
Subject: [PATCH] elevenlab

---
 public/widget/custom/brandize.js   | 40 ++++++++++++++++++++++++++++++
 public/widget/custom/brandize.json |  2 +-
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 public/widget/custom/brandize.js

diff --git a/public/widget/custom/brandize.js b/public/widget/custom/brandize.js
new file mode 100644
index 0000000..42926bf
--- /dev/null
+++ b/public/widget/custom/brandize.js
@@ -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);
+  }
+});
+
diff --git a/public/widget/custom/brandize.json b/public/widget/custom/brandize.json
index 164a161..5562d11 100644
--- a/public/widget/custom/brandize.json
+++ b/public/widget/custom/brandize.json
@@ -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>"
 }