Puedes agregar código personalizado y secuencias de comandos al sitio desde el área de Inyección de Código en Advanced Settings (Ajustes avanzados).
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 Inyecció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 usar CSS al Editor de CSS Personalizado en lugar de usar la Inyección de Código. Si usarás la Inyección de Código, rodea al código con las etiquetas <style></style>.
Cuándo utilizar la Inyección de Código
Usa Inserción de código para agregar HTML y scripts que destaquen partes específicas de tu sitio. Esto puede incluir servicios de chat en vivo, verificación del dominio para los servicios personalizados de correo electrónico o análisis 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.
Paso 1 - Abre la Inyección de Código
En el Home Menu (Menú principal), haz clic en Settings (Configuración), haz clic en Advanced (Avanzada) y después en Code Injection (Inyección de Código).
Paso 2 - Añade el código HTML
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.
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í es inyectado antes de la etiqueta </body> de cierre en cada página del sitio.
Nota: El área del footer (pie de página) se define por la plantilla.
Página de bloqueo
La pantalla de bloqueo aparece cuando una página o un sitio se oculta detrás de unacontraseña global del sitio o de una contraseña de la página. El código ingresado aquí se muestra encima del campo de la 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 pantalla 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 ID único de la orden confirmada
- {orderSubtotal} - El subtotal de la orden confirmada
- {orderSubtotalCents} - El subtotal de la orden confirmada, en centavos
- {orderGrandTotal} - El total de la orden confirmada
- {orderGrandTotalCents} - El total de la orden confirmada en centavos
- {customerEmailAddress} - La dirección de correo electrónico del cliente, como se ha especificado en la sección "Billing Info" (Información de facturación)
Paso 3 - Guarda
Luego de añadir el codigo, haz clic en Guardar.
Inyección de Código por página
También puedes inyectar código en una página específica:
- Posiciona el cursor sobre la página en el panel de Páginas.
- Haz clic en el icono
. - Haz clic en Avanzado.
La Inyección de Código del Encabezado de Página agrega código a la etiqueta <head> de esa página. No se mostrará en el Índice ni en las páginas de inicio.
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 un código a cada publicación del blog.
- Según tu plantilla, aparecerá por encima o por debajo del contenido de la publicación.
- En las plantillas con la Página de Blog tipo cuadrícula/apilada, el código se muestra en la página de aterrizaje del blog y no en las publicaciones individuales.
Nota: La carga de Ajax podría evitar que se cargue correctamente el CSS agregado a la Inyección de Código. En lugar de eso, agrega CSS al Editor CSS.
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 esto 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, podrías ver 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 el Foro de Squarespace, 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.