Agrega código personalizado a una página, a un bloque de una página o a todas las páginas de tu sitio web para insertar widgets y contenido de otras apps, cargar fuentes, agregar analítica o cambiar el aspecto de tus páginas.
Kajabi permite insertar código dentro de la app, para que puedas conectar una página con una aplicación externa, como un calendario o una herramienta de comentarios. Este artículo cubre Kajabi Pages, las páginas de Checkout y Upsell, los scripts de todo el sitio y las páginas creadas con la plantilla heredada Premier.
Advertencia: Ten cuidado al agregar código personalizado a tu sitio. Si estás agregando código de un tercero, asegúrate de confiar en él. Su código personalizado podría causar problemas en tu sitio, y cualquier código personalizado puede exponer tu sitio a vulnerabilidades y malware. Analiza el código que planeas usar con una herramienta como VirusTotal o Snyk, y sigue estas buenas prácticas para el código personalizado.
Agregar código personalizado a una sola página
Agregar código en Settings de la página
Desde el Dashboard, abre la pestaña Website.
Ubica la Website Page o Landing Page que quieres editar.
Haz clic en el Title de la página para abrir el editor.
En el editor de páginas, haz clic en la pestaña Settings.
Haz clic en la sección Custom Code.
Agrega tu Custom CSS o Custom JavaScript en el panel.
Haz clic en Save.
Nota: No incluyas las etiquetas <style> o <script> en las secciones de Custom CSS o Custom JavaScript dentro de Settings de la página.
Agregar código en un bloque Custom Code
Agregar código personalizado en un bloque es útil para insertar contenido en tu página, como un widget de reserva de calendario.
Desde el Dashboard, abre la pestaña Website.
Ubica la Website Page o Landing Page que quieres editar y haz clic en su Page Title.
En el editor de páginas, abre una section.
Haz clic en Add block.
Haz clic en Custom Code.
Agrega tu CSS o JavaScript personalizado en el campo Code.
Configura las opciones de Background, Layout, Animations y Time reveal del bloque según sea necesario.
Haz clic en Save.
Nota: En un bloque Custom Code, usa las etiquetas <style> (para CSS) y <script> (para JavaScript) para que tu código funcione.
Agregar código a una página de Checkout
Desde el Dashboard, haz clic en la pestaña Sales y luego en Pricing.
Haz clic en el Offer Title de la Offer cuya página de Checkout quieres editar.
Haz clic en Edit checkout en la parte superior de la página.
Haz clic en la pestaña Settings.
Haz clic en la sección Custom Code.
Agrega tu Custom CSS o Custom JavaScript en el panel.
Haz clic en Save.
Agregar código a una página de Upsell
Desde el Dashboard, haz clic en la pestaña Sales y luego en Pricing.
Haz clic en la pestaña Upsells.
Haz clic en el Upsell que quieres editar.
Haz clic en Customize.
Haz clic en la pestaña Settings.
Haz clic en la sección Custom Code.
Agrega tu Custom CSS o Custom JavaScript en el panel.
Haz clic en Save.
Agregar código personalizado a todas las páginas
El código personalizado en todas las páginas es útil para agregar un aviso de cookies, fuentes personalizadas, analítica y más.
Desde el Dashboard, abre Settings.
En Site settings, haz clic en Site details.
En Page scripts, ingresa tu código personalizado en el campo Header Page Scripts.
Haz clic en Save.
Nota: El código en Header Page Scripts se incluye en la etiqueta <head> de todas las páginas, excepto las páginas de checkout de ofertas y las páginas de upsell. Para hacer seguimiento de las páginas de checkout, consulta Agregar código de seguimiento JavaScript a las páginas de Checkout.
Agregar código personalizado a una página creada con Premier
Las páginas creadas con la plantilla heredada Premier tienen su propio bloque Custom Code, para que puedas insertar código sin acceder al Code Editor. Úsalo para agregar un programador de citas o un video, cambiar el aspecto de una sección o agregar espacio en blanco a tu diseño.
Nota: Esta sección cubre la plantilla heredada Premier. Si usas Kajabi Pages, sigue los pasos de las secciones anteriores.
Agregar un bloque Custom Code en Premier
Desde el Dashboard, abre la pestaña Website.
Ubica la Website Page o Landing Page que quieres editar.
Haz clic en el Title de la página para abrir el editor, o crea una nueva página con Premier.
Haz clic en Customize para abrir el editor de páginas.
Haz clic en + Add Section en la barra lateral.
Selecciona la sección Custom Content.
Haz clic en Add. Kajabi agrega la sección Custom Content al final de la página.
En la sección Custom Content, desplázate hasta el final del editor y haz clic en Add Content.
Selecciona Custom Code.
Pega tu código en el campo Code.
Haz clic en Save.
Configurar la apariencia del bloque Custom Code en Premier
Alignment: Ubica el bloque dentro de su sección Custom Content: Left, Centered o Right
Container width: Elige qué tan ancho es el bloque
Place this block on its own row: Activa esta opción para separar el bloque de los demás bloques de la sección Custom Content