Insira HTML ou scripts personalizados nas páginas do seu site.
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 adicionar conteúdo ou estilos. Para adicionar conteúdo ao seu site, acesse 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 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. 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 do Ajax pode impedir que o CSS adicionado à injeção de código seja carregado corretamente. Em vez disso, adicione CSS ao Editor CSS.
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.
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 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 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 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
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 digital 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 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
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:
- 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 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.
- 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 aparece 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.