Uso da injeção de código

Informe um HTML ou scripts personalizados nas páginas do seu site.

Ultima atualização 3 de Fevereiro de 2025

Adicione HTML e scripts com uma injeção de código para aprimorar partes específicas do seu site, como serviços de chat ao vivo, validação de domínio para serviços de e-mail personalizado ou a análise de dados do site.

A injeção de código não se destina a adicionar conteúdo ou estilos. Para adicionar conteúdo ao seu site, confira Noções básicas das páginas e conteúdo. Para adicionar CSS personalizado para estilos, use o editor de CSS personalizado.

Acessando o recurso

A injeção de código está disponível nos planos Essencial, Plus, Avançado, Business, Commerce Básico e Commerce Avançado. Saiba mais em "Escolhendo o plano certo no Squarespace".

Assista ao vídeo

Antes de começar

Adicione um código à injeção de código

Para adicionar um código personalizado à injeção de código:

  1. Abra o painel "Injeção de código".
  2. Adicione HTML ou scripts válidos nos campos de injeção de código apropriados no cabeçalho, rodapé, página de bloqueio, página de confirmação do pedido ou página de status do pedido.
  3. Adicionado o código, clique em Salvar.

Cabeçalho

O código adicionado aqui é injetado na tag em todas as páginas do site.

Rodapé

O código adicionado aqui é injetado antes da tag em todas as páginas do seu site.

Integre o código injetado com o banner de cookies

Ao adicionar uma integração externa ao seu site com a injeção de código (Google Ads etc.), esse código poderá deixar cookies no browser dos visitantes. Ao ativar o banner de cookies no seu site, você pode usar a injeção de código para alterar o comportamento dessas integrações externas — só depende de se o visitante consentir ou não com os cookies.

Para que seus visitantes tenham opções de consentimento, você deve fazer o seguinte:

  1. Ative o banner de cookies no painel Cookies e dados dos visitantes e ative a opção Banner de cookies.
  2. Selecione o tipo de banner de cookies Aceitar e rejeitar, que mostra dois botões personalizáveis para que os clientes aceitem ou recusem os cookies do seu site..
  3. Clique em Salvar.
  4. Adicione o código necessário. O exemplo abaixo mostra os detalhes.

Usando o Google Ads como exemplo, se você adicionou o Google Ads ao seu site com a injeção de código, consulte esta publicação no fórum, que traz um exemplo de código que pode ser adicionado para integrar o código do Google Ads ao banner de cookies.

Ao você usa o Google Analytics via nossa integração oficial, não é necessário adicionar código nesse campo. Após salvar seu ID de medição, ative o banner de cookies.

Anotação

o modo consentimento é um recurso fornecido pelo Google. Saiba mais na documentação do Google. Além disso, nosso suporte não cobre modificações no código personalizado. Procure o Google Ads se precisar de assistência na configuração ou na solução de problemas.

Página de bloqueio

O bloqueio de tela aparece quando uma página ou site fica oculto em todo o site ou com a senha da página. O código injetado aqui aparece acima do campo de senha da tela de bloqueio.

Mesmo sendo possível adicionar um código a este campo, recomendamos usar o painel "Bloqueio de tela" para criar um bloqueio na página. Assim, você pode adicionar uma imagem de fundo ou um slideshow, ajustar estilos da fonte, incorporar um logotipo e muito mais.

Página de confirmação do pedido

O código adicionado aqui é injetado na página de confirmação do pedido, que aparece após o cliente finalizar a compra de uma vale-presente ou assinatura.

Você pode usar seis tags para incluir informações específicas ao cliente. Se a compra for dividida porque contém vários perfis de processamento, Cada pedido mostrará os detalhes.

  • {orderId} - o número do pedido confirmado
  • {orderSubtotal} - o subtotal do pedido confirmado
  • {orderSubtotalCents} - o subtotal do pedido confirmado (em centavos)
  • {orderGrandTotal} - o total geral do pedido confirmado
  • {orderGrandTotalCents} - o total do pedido confirmado (em centavos)
  • {customerEmailAddress} - o endereço de e-mail do cliente, à medida que é digitado na seção “Seu e-mail” na finalização de compra

Página de status do pedido

O código adicionado aqui é injetado na página de status do pedido (a página de confirmação que aparece após o cliente finalizar a compra de um produto físico, um produto para download ou um serviço). O cliente também pode retornar a essa página depois para conferir o status do pedido. 

Você pode usar seis tags para incluir informações específicas ao cliente. Se a compra for dividida porque contém vários perfis de processamento, Cada pedido mostrará os detalhes.

  • {orderId} - o número do pedido confirmado
  • {orderSubtotal} - o subtotal do pedido confirmado
  • {orderSubtotalCents} - o subtotal do pedido confirmado (em centavos)
  • {orderGrandTotal} - o total geral do pedido confirmado
  • {orderGrandTotalCents} - o total do pedido confirmado (em centavos)
  • {customerEmailAddress} - o endereço de e-mail do cliente, à medida que é digitado na seção “Seu e-mail” na finalização de compra

Como os clientes podem visitar a página de status do pedido quanto quiserem, os scripts de monitoramento também poder ser acionados várias vezes. Para evitar que o mesmo cliente seja contado duas vezes nos scripts de monitoramento, os scripts que devem ser executados apenas na primeira visita à página de status do pedido após a finalização de compra devem aparecer entre as tags {.if firstPageView} e {.end}. Por exemplo:

{.if firstPageView}

Adicione aqui os scripts de monitoramento a serem executados somente após a finalização da compra

{.end}

Adicione aqui os scripts a serem executados em todas as visitas

Migração do código personalizado da página de confirmação do pedido

Atualizamos a página de confirmação do pedido para incluir produtos físicos, digitais e de serviço. Os clientes que compram esses tipos de produto acessam uma página que mostra o status e os detalhes do pedido, além a opção de criar uma conta de cliente.

Se o seguinte banner aparecer no painel de injeção de código, é porque você adicionou a injeção de código à página original de confirmação do pedido, e a atualização não foi aplicada ao seu site. 

MigrateOrderConfirmationCode.png

Para aplicar a atualização ao site e direcionar os clientes para a nova página de confirmação do pedido após a finalização da compra de produtos digitais, físicos e de serviço: 

  1. Copie o código no campo da página de confirmação do pedido. 
  2. Cole no campo da página de status do pedido. 
  3. Clique em Salvar
  4. Clique em Migrei meu código personalizado.

Se você não concluir esse processo, os compradores serão levados para a página original de confirmação do pedido após a finalização da compra.

Injeção de código por página

Também é possível injetar código em uma página específica:

  1. Passe o cursor sobre a página no painel Páginas.
  2. Clique no ícone .
  3. Clique em Avançado.

A injeção de código do cabeçalho da página) adiciona código à tag dessa página.

Nas configurações da página do blog, a Injeção de código do item da publicação do blog adiciona código a todas as publicações do blog.

A aparência da injeção de código depende da versão do site.

Lembre-se:

  • Não recomendamos usar HTML na Injeção de código de cabeçalho da página. Se você fizer isso, o código não aparecerá se você desativar a transparência do cabeçalho do site.
  • A Injeção de código de item de publicação do blog aparece abaixo do conteúdo da publicação.

Lembre-se:

  • A injeção de código não aparece nas páginas de destino do Índice.
  • Dependendo do template, a Injeção de código de item de publicação do blog aparece acima ou abaixo do conteúdo da publicação.
  • Nos templates com a página do blog em grade ou empilhada, o código aparece na página de destino do blog e não em publicações específicas.

Desative scripts na prévia

O código personalizado às vezes impede você de editar o site com segurança. No processo de solução do problema, podemos pedir para que você desative os scripts na prévia. Ou seja, você não verá o código personalizado enquanto estiver logado, mas isso não afetará como o site aparece aos visitantes.

Você verá a seguinte mensagem na parte inferior do seu site se o seu código estiver interferindo:

Detectamos um erro ao carregar a prévia do site. Isso geralmente é causado pelo código injetado.

Para editar com segurança, clique em Desativar scripts na prévia, na parte inferior do seu site. A mensagem mudará para Scripts foram desativados na prévia do seu site. Para ver o seu código personalizado, abra uma nova janela privada ou anônima no seu browser e digite o URL da sua página.

Se a mensagem para desativar os scripts não aparecer automaticamente:

  1. Para fazer a mensagem aparecer, digite /safe logo após /config no fim de URL de edição segura e pressione Enter.
  2. Se isso não funcionar, veja todas as áreas em que você adicionou um código personalizado e exclua-o temporariamente durante a solução de problemas.

Após desativar o código, talvez apareça a mensagem Ativar scripts na prévia? Não recomendamos clicar nela, pois isso pode interferir na sua capacidade de ver a prévia, editar ou executar o seu site quando você estiver logado. Não é possível ocultar essa mensagem, mas você só a verá quando estiver logado — ela não é visível aos visitantes.

Anotação

Nosso suporte não cobre modificações no código personalizado; ou seja, não ajudamos na configuração nem na solução de problemas. Além disso, não garantimos a funcionalidade ou compatibilidade integral de nenhuma solução em código com o Squarespace. Isso inclui o funcionamento dele com nosso design responsivo, principalmente a aparência na versão móvel, e se ele funciona em todos os templates. O código personalizado também pode causar problemas de exibição nas futuras versões da nossa plataforma. Ainda assim, há muitos recursos que podem auxiliar:

Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.