Adicione um widget personalizado

Elemento de renderização vs. Seletor de conteúdo

• Elemento de renderização = local. Exemplos de montagens: .gsp_full_player, .gsp_button_player, .gsp_circle_player — ou um nó de layout como #footer-listen.
• Seletor de conteúdo = o que ler. Um ou vários alvos, separados por vírgula — por exemplo #main or #intro,.product-description,#specs.
• classe_pai — ler o elemento pai da montagem (útil quando a montagem está dentro do bloco de conteúdo).
• self_class — leia a mesma embalagem em que o suporte está inserido.
• Excluir lista — também separado por vírgulas; ignore a navegação, anúncios e comentários dentro do conteúdo selecionado (ex: #comments,.ads,.share-buttons).

Regra prática: O seletor de conteúdo aponta para o texto que você controla; o elemento de renderização aponta para o espaço vazio (ou contêiner) onde o reprodutor deve aparecer.

Como escrever id, classe e vírgulas

Você não precisa ter um conhecimento profundo de HTML — lembre-se de dois prefixos e, em seguida, monte ou remova as vírgulas para separar os elementos:

• id → # - id="footer-listen" → #footer-listen.
• classe → . - class="gsp_button_player" → .gsp_button_player.
• Somente etiqueta - article, section, h1 (sem prefixo).
• Reúna as peças — O Seletor de Conteúdo pode listar vários contêineres: #intro,.body,#cta-note.
• Aparar peças — A lista de exclusão usa o mesmo # / . + vírgulas. Veja Lista de Exclusão e Sem Fala e o guia de chamadas HTML Valores HTML seção.
• Encontrá-los — Clique com o botão direito do mouse no bloco na página ativa → Inspecionar → copiar id / class no console com o prefixo correto.

Voz, idioma e a maioria dos players do Chrome ainda seguem o site. Configurações quando o campo do widget diz Usar global — O posicionamento não força uma voz personalizada. Veja Configurações globais versus configurações personalizadas.

Como inserir um widget personalizado

1. Certifique-se de que o código de conexão do site (ou a integração com o WordPress/CMS) esteja ativo.
2. Adicione uma montaria vazia onde o jogador deve aparecer — por exemplo <div class="gsp_button_player"></div> No rodapé ou na barra lateral, HTML personalizado.
3. No Console da Nuvem, abra (ou crie) o widget correspondente (Full / Button / Circle) e Publicar .
4. Conjunto Elemento de renderização para a classe de montagem (por exemplo, .gsp_button_player).
5. Conjunto Seletor de conteúdo para a embalagem do artigo/produto (ou várias partes separadas por vírgulas, por exemplo) #intro,.entry-content). Manter parent_class quando o suporte estiver dentro desse conteúdo. Lembre-se: id → #, class → ..
6. Opcional: Excluir lista (separados por vírgulas, iguais) # / . regras) e URLs permitidas/bloqueadas para que o player apareça apenas onde você deseja.
7. Salve, atualize a página ao vivo e confirme se o player aparece no local personalizado enquanto lê o conteúdo correto.

Layouts comuns

• Botão de escuta na barra lateral — Elemento de renderização .gsp_button_player na barra lateral; Seletor de conteúdo article or .entry-content.
• Faixa de rodapé — montar no modelo de rodapé; o Seletor de Conteúdo ainda tem como alvo o artigo principal, portanto, o rodapé não é exibido.
• Construtor HTML personalizado — mesmas montagens em blocos de código personalizado/HTML do Wix/Shopify/Squarespace; mapeia classes exatamente como no Guia HTML.