Informe um HTML ou scripts personalizados nas páginas do seu site.
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.
A injeção de código é um recurso premium disponível nos planos Business, Commerce, Professional e Premium.
Assista ao 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. Ao adicionar a 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.
- O carregamento Ajax pode impedir que o CSS adicionado à injeção de código seja carregado corretamente. Em vez disso, adicione CSS ao Editor CSS.
- As páginas de finalização de compra não suportam códigos.
Adicione um código à injeção de código
Para adicionar um código personalizado à injeção de código:
- Abra o painel "Ferramentas para desenvolvedores".
- Clique em Injeção de código.
- 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.
- Adicionado o código, clique em Salvar.
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.
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.
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:
- Copie o código no campo da página de confirmação do pedido.
- Cole no campo da página de status do pedido.
- Clique em Salvar.
- 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:
- 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.
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:
- 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 recomendações para adicionar um código personalizado.
- Leia nosso guia geral sobre personalizações externas.
- Visite o Squarespace Forum, 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.