Incorporar su agente de Napster Spaces a su propio sitio web debería ser sencillo y sin complicaciones.
Esta guía lo acompaña paso a paso con todo lo necesario para que su experiencia incrustada funcione a la perfección (incluido el acceso al micrófono, la configuración de cookies y el seguimiento opcional de correo electrónico), de modo que sus visitantes puedan interactuar de forma natural y sin fricciones.
1. Obtenga el código correcto
Cada sitio web es diferente, por eso Napster Spaces le ofrece dos opciones fáciles de incrustar.
Cuando abra el panel Opciones de inserción dentro del producto, verá lo siguiente:
- Módulo incrustable: la experiencia completa con fondo y tarjetas (si está habilitada), ideal para incluir dentro de una página web como una sección más.
-
Agente: una versión mínima centrada exclusivamente en el agente de video, ideal para esquinas, barras laterales o diseños más compactos.
Una vez que elija el formato adecuado para su sitio, simplemente haga clic en Copiar para obtener su código de iframe personalizado.
Péguelo en el HTML de su sitio, en el lugar donde desea que aparezca la experiencia, y listo.
(No es necesario editar el código manualmente, salvo que nuestro equipo de soporte lo indique.)
Código de muestra:
.
Src=QURLQ0QUID]
style="width: 1280px; position: fixed; bottom: 0; right: 20px; aspect-ratio: 16/9; background: transparent; z-index: 999999;"
frameborder="0"
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"
allowtransparency="true"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
title="Napster Spaces Experience"
"Fragmento"
2. Permita que su agente hable y escuche
Para habilitar las funciones de voz y video, su sitio web debe permitir que el iframe acceda al micrófono y a la cámara del visitante. (La cámara solo se utiliza cuando el seguimiento facial está habilitado, para mejorar la supresión de ruido en entornos ruidosos; el video se procesa de forma local en el dispositivo y no se envía a ningún servidor).
Atributos del iFrame
Asegúrese de que su iframe incluya lo siguiente:
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"Encabezado de política de permisos (Permissions-Policy)
Si su sitio utiliza encabezados de seguridad, confirme que incluyan a Napster Spaces como origen aprobado:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai"),
camera=(self "https://spaces.napster.ai")Si estos permisos no están configurados, los navegadores bloquearán el acceso al micrófono sin mostrar ningún aviso, y sus visitantes no sabrán por qué el agente no se inicia.
3. Cookies y herramientas de consentimiento
Si su sitio web utiliza un complemento de consentimiento o gestión de cookies, es posible que bloquee el contenido de terceros hasta que el usuario otorgue permiso. Esto es fácil de solucionar: simplemente indíquele al complemento que Napster es una fuente confiable.
Ejemplo:
Un cliente que incrustó Spaces en un sitio de WordPress descubrió que su complemento Borlabs Cookie bloqueaba el contenido de terceros de forma predeterminada. Después de agregar Napster.ai como dominio de confianza, el acceso al iframe y al micrófono funcionó sin problemas.
Si no está seguro de cómo autorizar a Napster, su administrador web o la documentación del complemento pueden ayudarlo a localizar los ajustes de “Dominios permitidos” o “Bloqueo de scripts”.
4. Envío del correo electrónico del usuario a Analytics (opcional)
Si el sitio web principal ya conoce el correo electrónico del visitante (por ejemplo, después de un inicio de sesión o una verificación de membresía), puede transmitir esa información a Spaces agregándola como parámetro en la URL del iframe.
Ejemplo:
src="https://spaces.napster.ai/e/{EXPERIENCE_ID}?email={USER_EMAIL}"Cuando el correo electrónico se proporciona de esta manera, se almacena en Spaces Analytics para ayudarlo a medir la interacción e identificar a los usuarios recurrentes.
Este parámetro es completamente opcional, pero puede hacer que sus análisis sean más significativos.
Asegúrese de que la política de privacidad de su organización permita este intercambio de datos antes de habilitarlo.
5. Pruebe antes de publicar
Confirmar que todo funciona correctamente solo toma unos minutos:
- Inserte el código de la interfaz de Napster Spaces.
- Abra su página en Chrome, Edge o Safari.
- Al iniciar la conversación, verifique que aparezca el aviso de permiso del micrófono.
- Revise si aparece algún mensaje de consola como Violación de la política de permisos; esto suele indicar que es necesario ajustar una política de encabezado o de cookies.
- Realice una conversación breve para confirmar que tanto la entrada como la salida de audio funcionan correctamente.
- Si agregó el parámetro email, verifique que los eventos de análisis aparezcan bajo el usuario correcto.
6. Configuración de redes y cortafuegos
Algunos entornos de hospedaje o redes corporativas restringen los puertos necesarios para la voz y el video en tiempo real. Para más información, consulte Requisitos de red para ejecutar Napster Spaces.
7. Cuándo contactar al soporte
Si sigue teniendo problemas (por ejemplo, si el iframe no aparece o el audio no funciona), nuestro equipo de soporte está listo para ayudarlo.
Incluya la siguiente información:
- La URL de la página donde incrustó Spaces
- Detalles del navegador y del sistema operativo
- El código de inserción
- Una captura de pantalla de su consola del navegador (si aparecen errores)
Con esa información, podremos identificar la causa de inmediato.
Reflexión final
Incorporar Napster Spaces debería sentirse sencillo.
Una vez que su iframe esté configurado y los permisos estén habilitados, sus visitantes podrán ver, escuchar y hablar con su agente de IA de forma tan natural como lo harían en cualquier página alojada por Napster, y usted obtendrá los datos que necesita para seguir mejorando su experiencia.