feat: código del widget web copiable desde la tab Canales

El widget web no aparecía en ningún lado como "canal" (esa tab solo
mostraba Telegram/WhatsApp), así que no había forma de encontrar el
<script> a pegar en el sitio sin que se lo pidieran a soporte. Se agrega
una card fija "Web (widget)" arriba de la lista de canales, con el snippet
ya armado con el site_key real del tenant y un botón de copiar.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-08-12 19:42:19 -05:00
co-authored by Claude Sonnet 5
parent 5ba41786d6
commit c2e9d2c5a2
6 changed files with 67 additions and 29 deletions
+38
View File
@@ -159,6 +159,22 @@ async function eliminarTool(t) {
const canales = ref([])
const showCanalForm = ref(false)
const canalForm = ref(canalVacio())
const widgetCopiado = ref(false)
const widgetSnippet = computed(() => {
const siteKey = tenant.value?.site_key || 'TU_SITE_KEY'
return `<script src="${window.location.origin}/widget/umind.js" data-site="${siteKey}" defer><\/script>`
})
async function copiarWidget() {
try {
await navigator.clipboard.writeText(widgetSnippet.value)
widgetCopiado.value = true
setTimeout(() => (widgetCopiado.value = false), 2000)
} catch {
error.value = 'No se pudo copiar automáticamente — seleccioná el texto y copialo a mano.'
}
}
function canalVacio() {
return {
@@ -410,6 +426,28 @@ onMounted(async () => {
<!-- Canales -->
<div v-else-if="tab === 'canales'">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 mb-4">
<div class="flex items-center justify-between mb-2">
<div>
<span class="font-medium text-gray-800 dark:text-gray-200">Web (widget)</span>
<span class="ml-2 px-1.5 py-0.5 rounded text-xs bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-400">
siempre activo
</span>
</div>
<button
class="text-sm font-medium px-3 py-1.5 rounded-lg transition-colors"
:class="widgetCopiado ? 'bg-green-600 text-white' : 'bg-brand hover:bg-brand-dark text-white'"
@click="copiarWidget"
>
{{ widgetCopiado ? '✓ Copiado' : 'Copiar código' }}
</button>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
Pegá esto antes de <code class="bg-gray-100 dark:bg-gray-800 px-1 rounded">&lt;/body&gt;</code> en las páginas de tu sitio.
</p>
<pre class="bg-gray-50 dark:bg-gray-950 border border-gray-200 dark:border-gray-800 rounded-lg p-2.5 text-xs text-gray-700 dark:text-gray-300 overflow-x-auto"><code>{{ widgetSnippet }}</code></pre>
</div>
<div class="flex justify-end mb-4">
<button class="bg-brand hover:bg-brand-dark text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors" @click="nuevoCanal">
+ Nuevo canal
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -4,8 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>uMind — Orquestador</title>
<script type="module" crossorigin src="/orchestrator/assets/index-D6shNZ1Q.js"></script>
<link rel="stylesheet" crossorigin href="/orchestrator/assets/index-N2c9c8FD.css">
<script type="module" crossorigin src="/orchestrator/assets/index-DWdBSm9H.js"></script>
<link rel="stylesheet" crossorigin href="/orchestrator/assets/index-DJU1V6ZX.css">
</head>
<body class="bg-gray-50">
<div id="app"></div>