Conversão de texto em fala do Squarespace — voz de IA via injeção de código
Criadores, treinadores e proprietários de portfólios podem Adicione voz de IA ao Squarespace com as GSpeech. Apresente narração natural em blogs, páginas de cursos e estudos de caso, enquanto o áudio é gerado automaticamente. GSpeech Cloud Console - Nenhuma chave de API necessáriaE não há carregamento de TTS na hospedagem do Squarespace.
Este guia mostra Injeção de código TTS do SquarespaceCole o código incorporado na Injeção de Código do Rodapé antes de , coloque jogadores de página inteira / botão / círculo com um Bloco de código, então mapeie Seletor de conteúdo e Elemento de renderização para que o jogador leia o blog ou o texto do portfólio correto.
Injeção de código + Bloco de código — Incorporação do rodapé em todo o site, além de montagens HTML personalizadas por página.
Geração de áudio em nuvem — sintetize uma vez, armazene em cache e reproduza em visitas subsequentes.
Nenhuma chave de API necessária — vozes e jogadores de um único console.
Widgets prontos para o criador — blogs, cursos e estudos de caso de portfólio com designs distintos.
Ideal para: Blogs, páginas de cursos e treinamentos do Squarespace, e estudos de caso de portfólio onde os visitantes devem ler textos longos sem sair da página.
Copie o código de conexão. - abrir Integrações → Squarespace / Site HTML e copie o código de conexão.
Cole antes — insira o código via Configurações → Avançado → Injeção de código (Rodapé) antes do fechamento Marque com a tag, salve e publique.
O código de conexão é carregado. GSpeech Em todas as páginas em que estiver presente. Os jogadores aparecem apenas onde você coloca montarias com um Bloco de Código / Incorporação / HTML Personalizado e somente quando o widget correspondente estiver publicado e configurado.
Modelo de mapeamento
Injeção de código, blocos de código e mapeamento de conteúdo.
No Squarespace, a Injeção de Código no Rodapé carrega o mecanismo apenas uma vez. Cada widget então mapeia blocos de blog, seções de cursos ou textos de portfólio para um bloco de código — sem precisar incorporar o áudio em todos os layouts de página:
1Código de conexão
Carrega o motor a partir da Injeção de Código do Rodapé. Sem isso, os espaços de montagem do Bloco de Código permanecem vazios.
2Widget personalizado
Configuração do painel de controle: voz, idioma, design, configurações de conteúdo, regras de URL para blogs e portfólios.
3Bloco de montagem/código
Um marcador na página (por exemplo) .gsp_full_player) onde a interface do jogador aparece.
4Mapeamento de conteúdo
Seletor de conteúdo = qual texto do Squarespace ler. Elemento de renderização = onde o jogador aparece. Excluir / Título / URLs refinam a correspondência.
Widgets ilimitados — Widgets separados de página inteira, botão ou círculo para blogs, cursos e layouts de portfólio.
Jogadores ilimitados por widget — um widget publicado pode alimentar qualquer montagem de Bloco de Código correspondente permitida pelas regras de Renderização de Elemento + URL.
Bloco de código / HTML personalizado — no Squarespace, o suporte aparece assim <div class="gsp_full_player"></div>No WordPress, a mesma ideia utiliza códigos curtos como: [gspeech].
Padrões versus avançado — As montagens padrão funcionam rapidamente. Seções personalizadas precisam de valores precisos para o Seletor de Conteúdo/Elemento de Renderização.
Jogadores
Adicione jogadores com bloco de código/HTML personalizado
Coloque qualquer uma dessas montarias onde o jogador deve aparecer na página (Bloco de Código / Incorporar / HTML Personalizado). Clique em um cartão para copiar. Em seguida, configure o widget. Elemento de renderização para a mesma turma.
Mapear blocos do Squarespace e texto do blog para o jogador
No widget Conteúdo Selecione a guia, aponte os seletores para os itens do blog do Squarespace, o conteúdo do bloco e as seções do portfólio que os visitantes devem ouvir — e então coloque o player com um suporte de Bloco de Código.
id → # / classe → . — copie da ferramenta Inspecionar; escreva-os com um símbolo de cerquilha (#) ou um ponto (.) no console.
Reúna as peças — O Seletor de Conteúdo aceita vários destinos, separados por vírgulas.
Aparar peças — A lista de exclusão usa os mesmos prefixos + vírgulas.
artigo,seção,#my_id,.my_class — múltiplos alvos em um campo.
classe_pai — ler o elemento pai que envolve a montagem (útil para um bloco de código inserido dentro de uma seção de texto).
self_class — leia a mesma embalagem em que o suporte está inserido.
Deixe em branco se você usar Conteúdo do Texto em vez disso (texto fixo, não conteúdo DOM).
RE
Elemento de renderização
Define onde a interface do jogador é injetadaDeve corresponder a um elemento real na página.
Para montagens HTML personalizadas, defina-a com a classe de montagem: .gsp_full_player, .gsp_button_player, ou .gsp_circle_player.
Você também pode direcionar contêineres de layout, como corpo, #página, ou .blog-item-content quando você não estiver usando um suporte dedicado.
Se o Seletor de Conteúdo estiver correto, mas nada aparecer, geralmente o Elemento de Renderização está incorreto ou ausente nessa página.
RP
Posição de renderização
Posiciona o jogador Antes or Depois de o conteúdo do elemento de renderização. Para uma div de montagem dedicada, After/Before geralmente ainda funciona em relação a esse nó — mantenha a montagem vazia e deixe o widget preenchê-la.
EX
Excluir lista
Seletores que devem não podem ser falados, mesmo que estejam dentro do Seletor de Conteúdo. O mesmo. # / . regras, separadas por vírgulas. Exemplo: #comments,.sidebar,.ads,.no-speech.
TT
Seletor de título / Texto do título
Seletor de títulos — título dinâmico da página (exemplo: h1).
Texto do título — Título fixo exibido no reprodutor. Deixe o Seletor de Título vazio ao usar o Texto do Título.
CT
Conteúdo do Texto
Texto de narração fixo opcional. Quando usado, o Seletor de Conteúdo pode permanecer vazio. Útil para introduções curtas de cursos ou resumos de portfólio quando o conteúdo do DOM não deve controlar o áudio.
Regra geral para o Squarespace: O Seletor de Conteúdo tem como alvos os objetos. .blog-item-content or .sqs-block-contentO parâmetro "Render Element" tem como alvo o bloco de código montado, e o parâmetro "Exclude List" ignora comentários e áreas de compartilhamento.
Exemplos
Exemplos práticos de mapeamento para blogs e portfólios do Squarespace
Exemplo A
Estudo de caso de portfólio com reprodutor de página inteira
Uma página de estudo de caso com conteúdo principal e um bloco de código posicionado abaixo do elemento principal:
Seletor de conteúdo - .blog-item-content (ou o texto que envolve seu estudo de caso)
Elemento de renderização - .gsp_full_player
Excluir lista - .share-buttons,.related-posts (Opcional)
Seletor de títulos - h1 (Opcional)
Exemplo B
Página do curso — Bloco de código dentro do conteúdo (classe_pai)
Se o bloco de código estiver dentro de uma seção de lição do curso, o Seletor de Conteúdo pode ser relativo:
Seletor de conteúdo - parent_class (lê o pai da montagem)
Elemento de renderização - .gsp_full_player
Uso self_class quando o próprio contêiner de montagem contém o texto que deve ser narrado.
Exemplo C
Crie posts de blog com um widget de botão.
Lugar .gsp_button_player Em várias postagens de blog. Widget de reprodutor de um botão com elemento de renderização. .gsp_button_player Pode alimentar todos eles. Adicione mais widgets somente quando as regras de voz, design ou URL precisarem ser diferentes para cursos e páginas de portfólio.
Selecione o site — Abra o site Squarespace que você conectou.
Adicionar novo widget — Widgets → Adicionar novo widget → escolha o tipo (Reprodutor completo, Botão, Círculo, …) → Criar.
Configurar conteúdo — Defina o Seletor de Conteúdo, o Elemento de Renderização, a Lista de Exclusão e os títulos para blogs ou portfólios.
Configurar reprodutor/design — voz, painéis, tema, largura, margens.
Publique e ouça — Defina o Status como Publicado, atualize a página do Squarespace e teste a reprodução.
Quando o texto do blog ou do portfólio é alterado, o Smart Audio Sync pode regenerar a narração em segundo plano. Os campos de mapeamento ainda são decisivos. qual texto e onde O jogador está vivo.
Perguntas frequentes
Perguntas frequentes: Conversão de texto em fala e injeção de código no Squarespace
O Squarespace oferece suporte à conversão de texto em fala e vozes de IA com o GSpeech?
Sim. Travas deslizantes portáteis GSpeech acrescenta Conversão de texto em fala do Squarespace Com vozes naturais de IA para blogs, páginas de cursos e portfólios. Você se conecta com a Injeção de Código, posiciona os jogadores com um Bloco de Código e gerencia tudo no Console da Nuvem — sem necessidade de chaves de API.
Como adiciono o jogador usando Injeção de Código e um Bloco de Código?
Copie o código de conexão de Integrações → Squarespace / Site HTML. Cole-o em Configurações → Avançado → Injeção de código (Rodapé) antes Em cada página que precisar de áudio, adicione um Bloco de código com um suporte como <div class="gsp_full_player"></div> e defina o elemento de renderização para essa classe.
Qual a diferença entre um seletor de conteúdo e um elemento de renderização no Squarespace?
Seletor de conteúdo escolhe qual HTML do Squarespace narrar — por exemplo .blog-item-content or .sqs-block-content. Elemento de renderização Define onde o player aparece — geralmente a classe de montagem do seu bloco de código. Texto incorreto significa corrigir o seletor de conteúdo; player ausente significa corrigir o elemento de renderização.
O áudio do GSpeech vai deixar meu site Squarespace mais lento?
Não. O áudio é gerado e armazenado em cache no GSpeech Na nuvem, não no Squarespace. O script de Injeção de Código no Rodapé é leve e os players carregam apenas onde você adiciona Blocos de Código. Blogs e páginas de portfólio mantêm o desempenho normal enquanto os visitantes ouvem sob demanda.
Preciso de chaves de API para adicionar voz por IA ao Squarespace?
Não. GSpeech is Nenhuma chave de API necessária Para Squarespace. Faça login no Console do Cloud, adicione a Injeção de Código, configure os widgets e publique. Vozes e players permanecem em uma única conta, sem a necessidade de chaves TTS de terceiros no seu site.
Suporte
Precisa de ajuda para encontrar seletores para um layout do Squarespace ou para um elemento incorporado com injeção de código?
Entre em contato com o suporte do GSpeech.Envie a URL da página e nós ajudaremos a mapear o Seletor de Conteúdo/Elemento de Renderização.
