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).
Este é um recurso Premium disponível no atual plano Business do Site e superior:
- Disponível em: Todos os planos Commerce e Business
- Disponível em: plano Personal antigo (no momento indisponível para novas assinaturas)
- Não disponível em : plano Personal atual
- Período de Teste: Disponível durante o período de teste.
Para saber mais, visite Recursos Premium.
Assistir a um vídeo
Antes de começar
- Se você adicionar código à Injeção de Código, pode ser necessário desativá-lo durante a edição de seu site. Para saber mais, visite Desativar scripts na visualização.
- 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.
- Abra a página enquanto estiver no painel de Pages (Páginas).
- Passe o mouse sobre a área de conteúdo.
- Clique em Settings (Configurações).
- Na janela Page Settingd (Configurações da página), clique em Advanced (Avançado) no canto direito superior.
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 Post Blog Item Code Injection (Injeção de Código do Item da Postagem do Blog) adiciona códigos a todas as postagens de 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.
Nota:Adicionar ou modificar código no site é uma modificação avançada. Recomendamos que você tenha conhecimento de codificação para usar a Injeção de Código. Embora não possamos oferecer mais ajuda neste tópico, há muitos recursos disponíveis que pode apontá-lo na direção certa:
- Visite o Squarespace Answers,nosso fórum para o cliente e o desenvolvedor.
- Acesse nossos recursos recomendados para aprender a usar código..
- Consulte um Squarespace Expert.