Trazer seu agente do Napster Agent 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 Agents 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; display-capture; picture-in-picture"
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; display-capture; picture-in-picture"Cabeçalho da Política de Permissões
Se o seu site usa cabeçalhos de segurança, confirme que eles incluem o Napster Agents como uma origem aprovada:
Permissions-Policy:
microphone=(self "https://spaces.napster.ai" "https://spaces-embed.napster.ai"),
camera=(self "https://spaces.napster.ai" "https://spaces-embed.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 Napster Agents 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. Plugins de lazy loading e de otimização (WordPress)
Muitos sites WordPress usam plugins de desempenho que aplicam “lazy loading” (carregamento adiado) a imagens e conteúdo incorporado, retendo o conteúdo até que o visitante role a página até perto dele. Isso ajuda no caso de imagens, mas pode quebrar o iframe do Napster Agent. O plugin troca o endereço real do iframe por um marcador minúsculo e carrega o endereço da Napster com um script depois que a página termina de carregar. Quando isso acontece, o navegador pode não conceder acesso ao microfone, e o agente aparece, mas nunca inicia uma conversa.
Exemplo:
Em um site WordPress, o agente aparecia, mas ficava em “Taking longer…” e a sessão nunca iniciava. O console do navegador mostrava uma mensagem “Permissions policy violation” (violação da política de permissões) para o microfone. Um recurso de lazy-load do plugin de otimização do site estava reescrevendo o iframe.
Como verificar
- Clique com o botão direito no agente em sua página e escolha Inspecionar (Inspect).
- Encontre o <iframe> do Napster Agent e veja o atributo src dele.
- Ele deve começar com o endereço do Napster Agent presente no seu código de incorporação (um endereço web que contém napster.ai). Se, em vez disso, começar com data:image e o seu endereço real estiver em um atributo data-src, um plugin está reescrevendo a sua incorporação.
Como corrigir: exclua o iframe da Napster do lazy loading. A configuração varia conforme o plugin, então procure opções de lazy-load que mencionem iframes, conteúdo incorporado ou conteúdo de terceiros. Por exemplo, no Smush:
- Acesse Smush → Lazy Load.
- Desative o tipo de mídia iframe ou localize Exclude content from Lazy Load e adicione uma palavra-chave do código do seu iframe da Napster (por exemplo, napster.ai), uma entrada por linha.
- Salve e, em seguida, limpe todos os caches (veja a seção 5).
Dica: se você não sabe qual plugin é o responsável, desative os plugins temporariamente para isolá-lo, de preferência em uma cópia de teste (staging) do seu site. Desative todos e teste. Se o agente funcionar, reative-os um de cada vez até que ele pare de funcionar. Depois, use a configuração de exclusão desse plugin ou atualize-o, em vez de deixá-lo desativado.
5. Cache: limpe todas as camadas após uma alteração
Se você alterar a sua incorporação ou uma configuração de plugin e nada melhorar, uma cópia antiga da página pode ainda estar sendo exibida a partir do cache. Hosts de WordPress gerenciado costumam executar vários caches ao mesmo tempo, e limpar apenas um pode não ser suficiente. Verifique cada camada:
- Cache do construtor de páginas: no Beaver Builder, acesse Settings → Beaver Builder → Tools → Clear Cache.
- Cache de hospedagem: no GoDaddy Managed WordPress, abra GoDaddy Quick Links → Flush Cache na barra de administração. Como alternativa, na sua conta GoDaddy, acesse Settings → Tools → Flush Now do site.
- Cache de objetos e outros plugins de cache: verifique as configurações do plugin da sua hospedagem (no GoDaddy, o plugin GD cORe) e de qualquer plugin de cache que você tenha adicionado.
- Firewall de segurança ou CDN: no Sucuri, use a guia Firewall do plugin ou o painel do Sucuri (Performance → Clear Cache). Se o plugin não estiver conectado a uma conta Sucuri, pode não haver nada para limpar aqui.
- Seu navegador: teste em uma janela privada.
A ordem pode importar. Comece pelos caches dos plugins do seu site, depois pelo cache da hospedagem, depois por qualquer cache de CDN ou firewall, e finalize com um teste em janela privada.
6. 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 Napster Agents 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 Napster Agent 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.
7. Teste antes de publicar
Leva apenas alguns minutos para confirmar que tudo está funcionando corretamente:
- Incorpore o código de interface do Napster Agents.
- 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.
8. 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 Agents
9. 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 Napster Agents
- 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 Agents 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.