Puedes usar Inserción de código para agregar HTML y secuencias de comandos que mejoran partes específicas del sitio. Estos pueden incluir servicios de chat en vivo, verificación de dominio para servicios de correo electrónico personalizados o datos analíticos del sitio.
La Inyección de Código no está diseñada para añadir contenido o estilos. Para añadir contenido al sitio, visita Crear una página. Para añadir CSS personalizado para los estilos, utiliza el Editor de CSS personalizado.
La inserción de código es una función Premium disponible en los planes Business y Commerce.
Mira el video
Antes de comenzar
- Si agregas código a la Inserción de Código, podemos pedirte que lo desactives durante la edición del sitio.
- Para agregar JavaScript a un campo de Inyección de Código, rodea el código con las etiquetas <script></script>.
- Te recomendamos agregar CSS al Editor de CSS personalizado en lugar de usar la Inserción de código. Si usarás Inserción de código, rodea al código con las etiquetas<style></style>.
- El área del pie de página está definida según la plantilla y la versión del sitio.
- La carga de Ajax puede evitar que el código CSS agregado a Inserción de código se cargue correctamente. Agrega CSS al editor de CSS.
Agregar código a Inserción de código
Para agregar código personalizado a Inserción de código:
- En el menú de Inicio, haz clic en Configuración, en Avanzada y después en Inserción de código.
- Agrega HTML o scripts válidos en los campos de Inserción de código adecuados para el encabezado, el pie de página, la página de bloqueo o la página de confirmación del pedido.
- Luego de añadir el código, haz clic en Guardar.
Header
El código agregado aquí es inyectado a la etiqueta <Head> en cada página del sitio.
Pie de página
El código agregado aquí se inserta antes de la etiqueta de cierre </body> en cada página del sitio.
Página de bloqueo
La pantalla de bloqueo aparece cuando una página o sitio está oculto detrás de una contraseña de todo el sitio o la página. El código insertado aquí aparece sobre el campo de contraseña de la pantalla de bloqueo.
A pesar de que puedes añadir el código a este campo, te recomendamos que uses el panel de la pantalla de bloqueo para diseñar tu página de bloqueo. De este modo, puedes añadir una imagen de fondo o diapositivas, cambiar los estilos de las fuentes, incluir tu logo y mucho más.
Página de confirmación de la orden
El código agregado aquí se inyecta en la página de confirmación de la orden que aparece después de que un cliente hace un pago. Esto funciona bien para agregar programas de seguimiento de afiliados y de terceros para la tienda.
Hay seis etiquetas que se pueden utilizar para insertar información específica para el cliente:
- {orderId}: el número del pedido confirmado
- {orderSubtotal}: subtotal de un pedido confirmado
- {orderSubtotalCents} - El subtotal de la orden confirmada, en centavos
- {orderGrandTotal}: total de un pedido confirmado
- {orderGrandTotalCents}: el total del pedido confirmado, en centavos
- {customerEmailAddress} — La dirección de correo electrónico del cliente, tal como se ingresó en la sección "Tu correo electrónico" en el área de pago.
Inyección de Código por página
También puedes insertar código en una página específica:
- Posiciona el cursor sobre la página en el panel Páginas.
- Haz clic en el icono
. - Haz clic en Avanzado.
Page Header Code Injection (La inyección de código del encabezado de la página) agrega código a la etiqueta <head> de esa página.
En la Configuración de la Página de blog, la Inserción de código de los elementos de la publicación de blog añade código a cada publicación del blog.
La forma en que aparece la inserción de código depende de la versión del sitio.
Ten en cuenta lo siguiente:
- No recomendamos usar HTML en la inserción de código del encabezado de página. Si lo haces, el código no aparecerá si desactivas la transparencia del encabezado del sitio.
- La inserción de código del elemento Publicación de blog aparece debajo del contenido de la publicación.
Ten en cuenta lo siguiente:
- La inserción de código no aparecerá en las páginas de aterrizaje del índice.
- Dependiendo de tu plantilla, la inserción de código del elemento Publicación de blog aparece en la parte superior o inferior del contenido de la publicación.
- En las plantillas con la Página de blog en cuadrícula o lista, el código se muestra en la página de aterrizaje del blog y no en publicaciones individuales.
Deshabilitar scripts en la vista previa
En ocasiones, el código personalizado puede impedir que edites tu sitio de manera segura. Cuando estamos ayudándote a solucionar los problemas, tal vez te pidamos que deshabilites los scripts en la vista previa. Esto significa que no verás tu código personalizado mientras estés con la sesión activa. De todos modos, esto no afectará cómo se ve tu sitio para quienes lo visitan.
Verás este mensaje en la parte inferior de tu sitio si el código está interfiriendo:
Detectamos un error al cargar la vista previa de tu sitio. Esto usualmente es producto de un código inyectado.
Para editar de manera segura, haz clic en Deshabilitar scripts en vista previa, en la parte inferior de tu sitio. El mensaje cambiará a Se han deshabilitado los scripts en la vista previa de tu sitio. Para ver tu código personalizado, abre una nueva ventana privada o incógnito en tu navegador e ingresa la URL de tu página.
Si el mensaje de scripts deshabilitados no aparece automáticamente:
- Fuerza a que aparezca el mensaje escribiendo /safe al final de tu URL de edición segura y, luego, presiona Enter.
- Si no funciona, revisa las áreas en las que hayas añadido código personalizado para eliminarlo transitoriamente mientras solucionas los problemas.
Después de deshabilitar tu código, tal vez veas un mensaje de ¿Habilitar scripts en la vista previa?. No recomendamos presionarlo porque podría interferir en tu capacidad de hacer una vista previa, editar o ejecutar el sitio cuando has iniciado sesión. No es posible ocultar este mensaje, pero solo lo verás cuando hayas iniciado sesión; no es visible para los que visitan el sitio.
Las modificaciones de código personalizado están fuera del alcance de nuestro soporte. Esto significa que no podemos ayudarte más con la configuración o la resolución de problemas. Además, con una solución basada en un código, no podemos garantizar su funcionamiento o la compatibilidad total con Squarespace. Esto incluye cómo funciona con nuestro diseño adaptable, en especial su aspecto en dispositivos móviles y sus funciones en todas las plantillas. El código personalizado también pueden ocasionar problemas de visualización con actualizaciones futuras de nuestra plataforma. Aunque no podemos ayudarte más, hay muchos recursos que te pueden orientar en la dirección correcta:
- Infórmate sobre las mejores prácticas para agregar código personalizado.
- Lee nuestra guía general sobre las personalizaciones de terceros.
- Visita Squarespace Forum, nuestra comunidad de clientes y desarrolladores.
- Contrata a un Squarespace Expert para ayudar a crear código personalizado para tu sitio.
- Explora nuestros planes premium y para empresas para desarrollar una solución más personalizada para tu negocio.