Guia de instalação do SDK

Explicamos como posicionar o player de áudio no seu site.

Integração básica

O SDK é distribuído por um servidor dedicado. Em "Configurações do player" do painel de administração, você obtém seu código de integração exclusivo.

Código de integração

<!-- Contêiner do player -->
<div class="pub-voice-player-container"></div>

<!-- Script de carregamento -->
<script
  src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
  data-pub-voice-config='{"playerSelector": ".pub-voice-player-container"}'
></script>

ℹ️

[CONTENT-SOURCE-ID]substitua-o pelo valor real obtido em "Configurações do player" do painel. Após alterar as configurações, a atualização é aplicada automaticamente em cerca de 1 hora.

Posição do player

Posicione o elemento contêiner onde deseja que o player apareça. Se não for especificado, o SDK o insere automaticamente na parte superior do elemento do artigo.

Exemplos de implementação por CMS

WordPress

Edite o arquivo de template do tema (normalmente single.php). Recomenda-se posicionar o player logo abaixo do título do artigo.

<!-- Exemplo em single.php -->
<article>
  <h1><?php the_title(); ?></h1>
  
  <!-- Contêiner do player (logo abaixo do título) -->
  <div class="pub-voice-player-container"></div>
  
  <div class="content">
    <?php the_content(); ?>
  </div>
</article>

<!-- Posicionar perto do rodapé -->
<script
  src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
  data-pub-voice-config='{"playerSelector": ".pub-voice-player-container"}'
></script>

Dependendo do tema, pode ser difícil localizar o ponto de edição do rodapé. Nesse caso, posicione o loader em um local carregado em todas as páginas (ex.: footer.php ou um bloco de HTML personalizado aplicado ao site inteiro).

Next.js (App Router)

No Next.js, recomenda-se usar next/script para carregar o loader apenas uma vez no Root Layout. O SDK lida automaticamente com as transições de página de SPA, portanto não é necessária limpeza manual.

Etapa 1: Carregar o loader em layout.tsx

// src/app/layout.tsx
import Script from "next/script"

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt">
      <body>
        {children}
        <Script
          id="pub-voice-loader"
          src="https://sdk.pub-voice.com/sdk-assets/[CONTENT-SOURCE-ID]/loader.js"
          strategy="afterInteractive"
          data-pub-voice-config={JSON.stringify({
            playerSelector: ".pub-voice-player-container",
          })}
        />
      </body>
    </html>
  )
}

Etapa 2: Criar o componente PubVoicePlayer

// src/components/PubVoicePlayer.tsx
"use client"

export default function PubVoicePlayer() {
  // Basta posicionar o contêiner
  // O SDK gerencia automaticamente a inicialização e destruição do player
  return <div className="pub-voice-player-container" />
}

Pontos importantes

strategy="afterInteractive" carrega o script sem impedir a interatividade da página
O atributo id impede o carregamento duplicado pelo Next.js
O SDK monitora com MutationObserver a adição/remoção do contêiner e gerencia automaticamente seu ciclo de vida
Posicione o componente PubVoicePlayer no template das páginas de artigo

Solução de problemas

O player não aparece

O artigo não foi detectado — verifique se ele aparece na lista de artigos do painel
Verifique se a URL está correta

O áudio não é gerado

O artigo não está cadastrado — verifique se o feed RSS está configurado corretamente
Verifique se o artigo aparece na lista de artigos do painel

O player não funciona corretamente em SPA

O SDK detecta automaticamente com MutationObserver a adição/remoção do contêiner e gerencia seu ciclo de vida
Verifique se o elemento contêiner (.pub-voice-player-container) está corretamente posicionado
Se o contêiner for removido na transição de página, o SDK destrói automaticamente o player

Navegadores suportados

Chrome (versão mais recente)
Firefox (versão mais recente)
Safari (versão mais recente)
Edge (versão mais recente)

Limitações

O corpo do artigo aceita até 10.000 caracteres
Apenas arquivos de áudio em formato MP3 são suportados
É possível converter apenas um artigo em áudio por vez

Que tal experimentar de graça?

O PUBVOICE pode ser utilizado com o plano Free. Adicione um "botão de reprodução" aos seus artigos e comece uma nova relação com seus leitores.

Começar grátis