Trazer seu agente do Napster Spaces para o seu próprio site deve ser simples e sem complicações.
Este guia mostra tudo o que você precisa para fazer sua experiência incorporada funcionar perfeitamente — incluindo acesso ao microfone, configurações de cookies e rastreamento opcional de e-mail — para que seus visitantes possam interagir naturalmente, sem atritos.
1. Obtendo o código de incorporação certo
Cada configuração de site é diferente, e é por isso que o Napster Spaces oferece duas opções fáceis de incorporação.
Ao abrir o painel Opções de incorporação no produto, você verá:
- Módulo Incorporável – a experiência completa, com plano de fundo e cartões (se habilitado), ideal para inserir dentro de uma página da web como uma seção.
-
Apenas Agente – uma versão mínima focada somente no agente de vídeo, perfeita para cantos, barras laterais ou layouts menores.
Depois de escolher o formato que melhor se encaixa no seu site, basta clicar em Copiar para obter seu código <iframe> personalizado.
Cole-o no HTML do seu site, no local onde você deseja que a experiência apareça — e pronto.
(Não é necessário editar o código manualmente, a menos que nossa equipe de suporte oriente você a fazer isso.)
Exemplo de código:
<iframe
src="https://spaces.napster.ai/view/[experienceID]"
style="width: 1280px; position: fixed; bottom: 0; right: 20px; aspect-ratio: 16/9; background: transparent; z-index: 9999999;"
frameborder="0"
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"
allowtransparency="true"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
title="Napster Spaces Experience"
></iframe>
2. Permitindo que seu agente fale e escute
Para habilitar os recursos de voz e vídeo, seu site precisa permitir que o iframe acesse o microfone e a câmera do visitante. (A câmera só é usada quando o rastreamento facial está habilitado, para melhorar a supressão de ruído em ambientes com muito som; o vídeo é processado localmente no dispositivo e nunca é enviado a lugar algum).
Atributos do iFrame
Verifique se o seu iframe inclui:
allow="microphone; camera; autoplay; clipboard-write; encrypted-media"Cabeçalho da Política de Permissões
Se o seu site usa cabeçalhos de segurança, confirme que eles incluem o Napster Spaces como uma origem aprovada:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai"),
camera=(self "https://spaces.napster.ai")Se essas permissões estiverem faltando, os navegadores vão bloquear o acesso ao microfone silenciosamente — e seus visitantes não vão entender por que o agente não inicia.
3. Ferramentas de cookies e consentimento
Se o seu site usa um plugin de gerenciamento de cookies ou consentimento, ele pode bloquear conteúdo de terceiros até que o usuário conceda permissão. Isso é fácil de resolver — basta informar ao plugin que o Napster é uma fonte confiável.
Exemplo:
Um cliente que incorporou o Spaces em um site WordPress descobriu que o plugin Cookie Borlabs estava bloqueando conteúdo de terceiros por padrão. Depois de adicionar Napster.ai como domínio confiável, o acesso ao iframe e ao microfone passou a funcionar perfeitamente.
Se você não tiver certeza de como adicionar o Napster à lista, o administrador do seu site ou a documentação do plugin pode ajudar você a localizar as configurações de "domínios confiáveis" ou "bloqueio de terceiros".
4. Enviando o e-mail do usuário para o Analytics (opcional)
Se o site principal (pai) já conhece o e-mail do visitante — por exemplo, após uma verificação de login ou associação — você pode enviar essa informação para o Spaces adicionando-a como parâmetro na URL do iframe.
Exemplo:
src="https://spaces.napster.ai/e/{EXPERIENCE_ID}?email={USER_EMAIL}"Quando o e-mail é informado dessa forma, ele fica armazenado em Spaces Analytics, ajudando você a medir o engajamento e identificar usuários recorrentes.
Esse parâmetro é totalmente opcional, mas pode tornar sua análise mais significativa.
Antes de habilitá-lo, certifique-se de que a política de privacidade da sua organização permite esse compartilhamento de dados.
5. Teste antes de publicar
Leva apenas alguns minutos para confirmar que tudo está funcionando corretamente:
- Incorpore o código de interface do Napster Spaces.
- Abra sua página no Chrome, Edge ou Safari.
- Ao iniciar a conversa, verifique se a solicitação de permissão do microfone aparece.
- Observe se aparece alguma mensagem no console, como Violação da política de permissões — isso geralmente significa que uma política de cabeçalho ou de cookies precisa ser ajustada.
- Faça um teste rápido de conversa para confirmar que a entrada e a saída de áudio estão funcionando.
- Se você adicionou o parâmetro email, verifique se os eventos analíticos aparecem associados ao usuário correto.
6. Configurações de rede e firewall
Alguns ambientes de hospedagem ou redes corporativas restringem as portas necessárias para voz e vídeo em tempo real. Para mais informações, consulte Requisitos de rede para executar o Napster Spaces
7. Quando entrar em contato
Se você ainda tiver problemas — por exemplo, o iframe não aparece ou o áudio não está funcionando — nossa equipe de suporte está pronta para ajudar.
Inclua:
- A URL da página onde você incorporou o Spaces
- Detalhes do navegador e do sistema operacional
- O código incorporado
- Uma captura de tela do console do navegador (se houver erros)
Com essas informações, conseguimos identificar a causa rapidamente.
Considerações finais
Usar o Napster Spaces deve ser uma experiência sem esforço.
Assim que o seu iframe estiver configurado e as permissões estiverem em vigor, seus visitantes poderão ver, ouvir e conversar com o seu agente de IA de forma tão natural quanto em qualquer página hospedada pelo Napster — e você terá os dados necessários para continuar aprimorando sua experiência.