Inserta HTML o scripts personalizados en las páginas de tu sitio.
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 inserción de código no está diseñada para agregar contenido o estilos. Para agregar contenido a tu sitio, consulta Conceptos básicos de páginas y contenido. Para agregar CSS personalizado para estilos, usa el Editor de CSS personalizado.
La inserción de código es una función premium disponible en los planes Business, Commerce, Profesional y Premium.
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 inserció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 el 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.
- Las páginas de área de pago no admiten código.
Agregar código a la inserción de código
Para agregar código personalizado a la inserción de código:
- Abre el Panel de inserción de código.
- Agrega HTML o scripts válidos a los campos de inserción de código apropiados para el encabezado, pie de página, página de bloqueo, página de confirmación de pedido o página de estado del pedido.
- Luego de añadir el código, haz clic en Guardar.
Encabezado
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.
Aunque 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 del pedido
El código agregado aquí se inserta en la página de confirmación del pedido que aparece después de que un cliente finaliza la compra de tarjetas regalo, membresías y suscripciones.
Hay seis etiquetas que puedes usar para insertar información específica para el cliente. Si una compra se divide porque contiene varios perfiles de logística, se mostrarán los detalles de cada pedido de la compra.
- {orderId}: el número del pedido confirmado
- {orderSubtotal}: subtotal de un pedido confirmado
- {orderSubtotalCents}: el subtotal del pedido confirmado, 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
Página de estado de los pedidos
El código que agregues aquí se inserta en la página de estado del pedido, que es la página de confirmación que aparece después de que un cliente utilice el área de pago con productos físicos, de descarga o de servicio. Los clientes también pueden volver a esta página después para verificar el estado de su pedido.
Hay seis etiquetas que puedes usar para insertar información específica para el cliente. Si una compra se divide porque contiene varios perfiles de logística, se mostrarán los detalles de cada pedido de la compra.
- {orderId}: el número del pedido confirmado
- {orderSubtotal}: subtotal de un pedido confirmado
- {orderSubtotalCents}: el subtotal del pedido confirmado, 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
Los clientes pueden visitar la página de estado del pedido de forma reiterada, lo que podría activar scripts de seguimiento varias veces. Para evitar contar al mismo cliente dos veces con scripts de seguimiento, coloca los scripts que solo quieras ejecutar en la primera visita a la página de estado del pedido después de pagar entre las etiquetas {.if firstPageView}y {.end}. Por ejemplo:
{.if firstPageView}
Agrega los scripts de seguimiento que quieres ejecutar solo después de finalizar la compra aquí.
{.end}
Agrega los scripts que quieres ejecutar en cada visita aquí.
Migrando el código personalizado de tu página de confirmación de pedidos
Actualizamos la página de confirmación de pedidos para productos físicos, digitales y de servicio. Los clientes que compran estos tipos de productos llegan a una página que muestra el estado del pedido, sus detalles y la opción de crear una cuenta de cliente.
Si este banner se muestra en el panel de inserción de código, significa que agregaste inserción de código a la página de confirmación del pedido original y esta actualización no se ha aplicado a tu sitio.
Para aplicar esta actualización a tu sitio y enviar a los compradores a la nueva página de confirmación de pedidos después de pagar productos digitales, físicos y de servicio:
- Copia el código en el campo de la página de confirmación del pedido.
- Pégalo en el campo de la página de estado del pedido.
- Haz clic en Guardar.
- Haz clic en Migré mi código personalizado.
Hasta que sigas estos pasos, todos los compradores llegarán a la página de confirmación del pedido original después de finalizar el pago de todas las compras.
Inserció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.
Inserción de código del encabezado de página agrega código a la etiqueta <head> de esa página.
En la configuración de la página de blog, Inserción de código en una publicación del 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.
- Inserción de código en una publicación del 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, Inserción de código en una publicación del 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 la 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 Entrar.
- 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.