Usar a Injeção de Código

Você pode usar a Injeção de Código para adicionar HTML e scripts que melhoram partes específicas do seu site. Esses podem incluir serviços de chat ao vivo, verificação de domínio para serviços de e-mail personalizados ou análise do site.

A Injeção de Código não se destina a inserção de conteúdo ou estilos. Para adicionar conteúdo ao site, visite Construir uma página. Para adicionar CSS personalizado para estilos, use o Editor de CSS Personalizado.

A Injeção de Código é um recurso Premium, disponível nos planos Business e Commerce.

Assistir a um vídeo

Antes de começar

Se você adicionar um código à injeção de código, pode ser necessário desativá-lo durante a edição do seu site.
Para adicionar JavaScript a um campo de Injeção de Código, coloque o código entre as tags <script></script>.
Recomendamos adicionar CSS ao Editor de CSS Personalizado em vez da Injeção de Código. Se você estiver adicionando à Injeção de Código, coloque o código entre as tags <style></style>.
A área do rodapé é definida pelo template e pela versão do site.
Ocarregamento do Ajax pode impedir que o CSS adicionado à Injeção de código seja carregado corretamente. Em vez disso, adicione CSS ao editor CSS em.

Adicionar código à injeção de código

Para adicionar código personalizado à Injeção de Código:

No Menu Inicial, clique em Configurações, depois em Avançado e finalmente em Injeção de código.
Adicione HTML ou scripts válidos aos respectivos campos Injeção de código do cabeçalho, rodapé, página de bloqueio ou página de confirmação de pedido.
Depois de ter adicionado seu código, clique em Salvar.

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

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

Página de bloqueio

O bloqueio de tela aparece quando uma página ou site está oculto em todo o site ou atrás senha da página. O código injetado aqui exibe 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 de 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 depois que um cliente faz o pagamento. Isso funciona bem para adicionar programas de rastreamento de terceiros e de afiliados à sua loja.

Há seis tags que você pode usar para inserir informações específicas para o cliente:

{orderId}— O número de pedido do pedido confirmado
{orderSubtotal} — o subtotal do pedido confirmado
{orderSubtotalCents} – Subtotal do pedido confirmado, em centavos de dólares
{orderGrandTotal} — o total geral do pedido confirmado
{orderGrandTotalCents} — O total da ordem confirmada, em centavos
{customerEmailAddress} – O endereço de e-mail do cliente, à medida que é inserido na seção “Seu e-mail” na finalização de compra

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

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

Mova o cursor sobre a página no painel Páginas.
Clique no ícone .
Clique em Avançado.

Page Header Code Injection (Injeção de Código do Cabeçalho da Página) adiciona código à tag <head> 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 seu site.

Versão 7.1
Versão 7.0

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.
Injeção de Código de Item de Blog de Publicação aparece abaixo do conteúdo da publicação.

Lembre-se:

A Injeção de Código não aparecerá nas páginas de destino do Índice.
Dependendo do seu template, a Injeção de Código de Item de Blog de Publicação 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 seu 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é-visualização 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:

Faça a mensagem aparecer: para isso, digite /safe no fim do URL de edição segura e pressione Enter.
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.

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:

Conheça as práticas recomendadas para adicionar um código personalizado.

Leia nosso guia geral sobre personalizações de terceiros.

Visite o Fórum do Squarespace, nossa comunidade para clientes e desenvolvedores.

Contrate um Squarespace Expert para criar um código personalizado para o seu site.

Conheça nossos planos premium e empresarial para desenvolver uma solução mais personalizada para sua empresa.