Você pode adicionar código e scripts personalizados ao site usando a área Code Injection (Injeção de Código) em Advanced Settings (Configurações Avançadas).
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 a Injeção de Código, coloque o código entre as tags <style></style>.
Quando usar Injeção de Código
Para aprimorar partes específicas do seu site, adicione HTML e scripts usando Injeção de Código, como serviços de chat ao vivo, validação de domínio para serviços de e-mail personalizado ou métricas de 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.
Passo 1 - Abra a Code Injection (Injeção de Código)
No Home Menu (Menu inicial), clique em Settings (Configurações), clique em Advanced (Avançado) e clique em Code Injection (Injeção de Código).
Passo 2 - Adicione o código HTML
Adicione HTML ou scripts válidos aos respectivos campos de injeção de código do cabeçalho, rodapé, página de bloqueio ou página de confirmação de pedido.
Cabeçalho
O código adicionado aqui é injetado na tag <head> em todas as páginas do site.
Rodapé
O código adicionado aqui é injetado antes da tag</body> em todas as páginas do seu site.
Nota:A área do rodapé é definida pelo seu template.
Página de bloqueio
A tela de bloqueio é exibida quando uma página ou site está oculto atrás de uma senha para todo site ou para a página. O código injetado aqui é exibido 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} – A ID exclusiva 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 geral do pedido confirmado em centavos
- {customerEmailAddress} – O endereço de e-mail do cliente, como foi inserido na seção "Informações de Pagamento"
Passo 3 - Salvar
Depois de ter adicionado seu código, clique em Save (Salvar).
Injeção de Código por página
Também é possível injetar código em uma página específica.
- Passe o cursor sobre a página no painel Páginas.
- Clique no ícone
. - Clique em Avançado.
A Injeção de Código do Cabeçalho da Página adiciona código à tag <head> dessa página. Ela não será exibida nas páginas Índice iniciais.
Nas Configurações da Página de Blog, a Injeção de Código do Item da Publicação do Blog adiciona códigos a todas as publicações do blog.
- Dependendo do template, aparecerá em cima ou embaixo do conteúdo da postagem
- Nos templates com a Página de Blog em grade/empilhada, o código é exibido na página inicial do blog, e não em postagens específicas.
Nota: O carregamento do Ajax pode impedir que o CSS adicionado à Injeção de Código seja carregado corretamente. Alternativamente, adicione o CSS ao Editor de CSS.
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 a 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 da 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.