Crear llamadas a la acción

Utiliza la herramienta de llamadas a la acción (CTA) para crear botones, banners o ventanas emergentes que luego puedas añadir a tus páginas de HubSpot para atraer a nuevos visitantes. También puedes agregar CTA a páginas externas.

Antes de añadir una CTA a una página externa, debes instalar el código de seguimiento HubSpot, o instalar el plugin HubSpot WordPress en tu sitio WordPress. Una vez que hayas añadido la CTA, puedes controlar el tráfico dirigiendo a los visitantes a páginas específicas, a enlaces de reuniones o a URL externas. 

En los dispositivos móviles, puedes elegir entre activar un diseño responsive u ocultar la CTA en pantallas pequeñas en las opciones de CTA . Después de publicar su CTA, aprenda a crear una prueba A/B para su CTA y analice el rendimiento de su CTA. 

Diseñar una CTA

Usa el editor de CTA para personalizar su diseño y atraer a más visitantes. Al crear un CTA, también puedes utilizar contenido inteligente para mostrar diferentes versiones de tu CTA en función de la categoría del espectador. Más información sobre el uso de contenido inteligente en las CTA. 

1. En tu cuenta de HubSpot, dirígete a Marketing > CTA.
2. En la parte superior derecha, haz clic en Crear.
3. En la parte superior, selecciona la pestaña Ventanas emergentes o la pestaña Integración de contenido y Botones. 
   • Los CTA emergentes incluirán los siguientes tipos: 
     
     • Banner: es un banner que aparece fijo en la parte superior o inferior de la página. El banner permanecerá mientras los visitantes se desplazan por su página. 
     • Cuadro emergente: un cuadro emergente que aparece en un horario establecido. 
     • Deslizante: es un banner que se desliza desde una esquina del sitio web. El banner permanecerá mientras los visitantes se desplazan por su página. 
   • Los CTA insertados y de botón incluirán los siguientes tipos: 
     • Incrustado: es un botón, llamada a la acción o banner que puedes usar en tu sitio web o correo de HubSpot para llevar a los clientes potenciales a páginas específicas.
     • Imagen incrustada: una imagen que puedes utilizar en tus páginas de HubSpot o correo electrónico.
4. Selecciona una plantilla en función del tipo de CTA que deseas crear.
   • Cada plantilla de CTA tendrá módulos personalizables como imágenes y campos de texto.
   • Por ejemplo, puedes seleccionar una plantilla Haz clic para chatear para lanzar un enlace de WhatsApp, una plantilla Ventana emergente de reunión para mostrar una página de reserva de reuniones o una plantilla Evento para que los visitantes se inscriban en tu conferencia o taller,
5. En la pestaña Agregar del panel izquierdo, puedes agregar elementos y editar el diseño de la CTA: 

• • Para agregar más contenido a la CTA, arrastra un módulo nuevo directamente al panel derecho del editor.
    • Solo puedes agregar un módulo de Formulario (nuevo editor) o de Reunión a una CTA. Una misma CTA no puede contener un formulario y un módulo de reuniones. 
    • Algunos módulos solo pueden agregarse una vez, como el temporizador de cuenta atrás o los módulos de video.
    • También puedes agregar videos a tus CTA, aprende más sobre los requisitos a la hora de agregar videos a tus CTA. 
  • Para modificar la CTA, coloca el cursor sobre un módulo y arrástralo a una nueva posición.
  • Para duplicar el módulo, coloca el cursor sobre él y haz clic en el duplicateicono de clonar.
  • Para eliminar el módulo, coloca el cursor sobre él y haz clic en el deleteicono de eliminar. 
     

. 

• • Haz clic en un módulo para editarlo.
    • En el panel izquierdo, puedes editar el contenido y diseño del módulo.
    • Para cerrar una CTA emergente después de que un visitante envíe el formulario, al personalizar tu módulo de formulario, puedes activar el interruptor Cerrar después del envío . 
       

7. En el panel izquierdo, haz clic en la pestaña Contenido para gestionar los módulos. 
   • Para editar un módulo, haz clic en el nombre del módulo. En el panel izquierdo, puedes editar el contenido y diseño del módulo. En los módulos de texto enriquecido , puede utilizar asistentes de IA para crear o refinar su contenido CTA. 
   • Para eliminar un módulo, coloca el cursor sobre él y haz clic en el delete icono de eliminar. 
8. En el panel izquierdo, haz clic en la pestaña Diseño para personalizar y previsualizar la CTA.
   • Para previsualizar la CTA en páginas específicas, en la parte superior derecha, haz clic en Vista previa. A continuación, haz clic en el menú desplegable Previsualizar en una página específica y selecciona la página de HubSpot en la que quieras previsualizar la CTA. 

• • Para personalizar la apariencia de tu CTA, selecciona una de las siguientes opciones. A continuación, configure sus cambios en el panel izquierdo. 
    • Posición: si la llamada a la acción es un banner fijo, puedes seleccionar una posición superior o inferior. Para las CTA deslizantes, puedes colocar la CTA en la parte superior izquierda, inferior izquierda, superior derecha o inferior derecha de la página. 
    • Tamaño: para configurar la altura de tu CTA, puedes activar la opción para establecer la altura de forma automática en función del contenido de tu CTA.
    • Diseño: configura el diseño de tu CTA. Puedes agregar relleno al contenido de tu CTA. También puedes activar la opción de diseño adaptable. Con un diseño adaptable, las columnas de tu CTA se apilarán verticalmente en pantallas pequeñas.
    • Estilos: establece los estilos de tu CTA, como la fuente principal, el borde y la sombra de la CTA. Puedes usar fuentes personalizadas con tu CTA, aprende más sobre cómo usar fuentes personalizadas con tu contenido de HubSpot. 
    • Fondo: para establecer un fondo para la CTA, puedes optar por establecer un color de fondo o subir una imagen de fondo.
    • Opción Cerrar: para las CTA de cuadro emergente, puedes activar la opción que permite a los visitantes cerrar la CTA cuando hacen clic en cualquier lugar fuera del cuadro emergente. Cuando esta opción está desactivada, los visitantes solo pueden cerrar la CTA utilizando el icono de cierre. 

Diseñar un CTA con HTML

Para crear un CTA con HTML incrustado personalizado y aplicar tus temas o CSS personalizados:

1. En tu cuenta de HubSpot, dirígete a Marketing > CTA.
2. En la parte superior derecha, haz clic en Crear.
3. En la parte superior, haz clic en la pestaña Insertar y botones .
4. En el menú de la barra lateral izquierda, vaya a Avanzado. A continuación, seleccione Insertar HTML.
5. En el panel izquierdo, haga clic en el menú desplegable Enlace a y seleccione una opción para que su CTA redireccione a:
   • Dirección de correo electrónico: crea un enlace de mailto Para abrir este enlace en una nueva página, selecciona la casilla de verificación Abrir enlace en una pestaña nueva. 
   • Descarga de archivos: enlaza tu CTA a un archivo en tu administrador de archivos. Selecciona un archivo existente o carga uno nuevo y luego selecciona la casilla de verificación Abrir enlace en una pestaña nueva si quieres que los visitantes hagan clic en el botón CTA para ver la imagen en una nueva ventana del navegador. 
   • Enlace de reunión: vincula tu CTA a un enlace de reunión de HubSpot. Haz clic en el menú desplegable Elegir enlace de reunión y luego selecciona un enlace de reunión. Para abrir este enlace en una nueva página, selecciona la casilla de verificación Abrir enlace en una pestaña nueva. 
   • Una de tus páginas: enlaza tu CTA a una de tus páginas o publicaciones de blog de HubSpot. Haz clic en el menú desplegable Página y luego selecciona una página o publicación. El enlace del botón CTA estará vinculado al ID de la página y cualquier cambio en la URL de la página actualizará automáticamente el enlace del botón CTA. Para abrir este enlace en una nueva página, selecciona la casilla de verificación Abrir enlace en una pestaña nueva. 
   • URL: enlaza tu CTA a una página externa fuera de HubSpot. En el campo URL del enlace, introduce la URL del sitio web a la que quieres dirigir a los visitantes. Para abrir este enlace en una nueva página, selecciona la casilla de verificación Abrir enlace en una pestaña nueva. 
   • CTA: utiliza la CTA personalizada para activar un banner fijo, un cuadro emergente o una CTA deslizante.
6. Introducir el texto de la CTA en el campo Contenido del botón .
   

7. Para personalizar aún más el diseño de su CTA, haga clic en Avanzado
8. En la página Avanzado, puedes agregar clases o reglas de CSS personalizadas:
   • Clases de CSS personalizadas: introduce una clase personalizada a tu CTA. Utiliza clases personalizadas para aplicar estilos de diseño, como familias de fuentes, a varias CTA de tu sitio web. Cualquier clase de CSS personalizada debe incluirse en la hoja de estilos de CSS utilizada en tus páginas de HubSpot.
   • Reglas de CSS personalizadas: agrega reglas personalizadas para aplicar estilos en línea específicos a tu CTA.
     • Para agregar una nueva regla de CSS, haz clic en Agregar una o + Agregar y configura tu selector y estilo. 
       • Selector: Introduce un selector de CSS. Este valor es opcional y se combinará con el selector de la CTA. Por ejemplo, si el selector introducido es :hover, el selector combinado pasa a ser ${ctaSelector}:hover
       • Estilo: introduce una regla de estilo de CSS personalizada para aplicarla al selector configurado. Puedes introducir un estilo sin introducir un selector. Por ejemplo, color: yellow;.
         
         

9. Para editar una regla de CSS existente, coloca el cursor sobre la regla y haz clic en el edit icono de edición. 
10. Para clonar una regla de CSS, coloca el cursor sobre ella y haz clic en el duplicate icono de clonación. 
11. Para gestionar la prioridad de tus reglas de CSS, haz clic y arrastra cada regla para ordenarlas por prioridad.
12. Para eliminar una regla de CSS, coloca el cursor sobre ella y haz clic en el delete icono de eliminación. 
13. Para aplicar a la CTA el mismo HTML y las mismas clases que a las CTA preexistentes, selecciona la casilla de verificación Usar marcado preexistente. Si tienes hojas de estilo de CSS en las páginas que estilizan las CTA preexistentes, seleccionar esta casilla permitirá que la CTA con HTML adopte los mismos estilos. 
14. Para terminar de configurar el diseño de tu CTA, haz clic en Guardar y aplicar.
     

Especificar dónde y cuándo se mostrará el banner fijo, el cuadro emergente o la CTA deslizante

1. Para mostrar la CTA cuando un visitante está en una URL de sitio web específica, en la sección URL del sitio web :
   • Haz clic en el primer menú desplegable y selecciona URL del sitio web.
   • Haga clic en el segundo menú desplegable y seleccione una regla de selección.
   • Introduce los criterios de la regla en el campo de texto.
2. Para que la CTA se muestre cuando un visitante esté en la página de un sitio web cuya URL incluya parámetros de consulta específicos:
   • Haz clic en el primer menú desplegable y selecciona Parámetro de consulta.
   • En el primer campo, escribe el nombre del parámetro.
   • Haz clic en el segundo menú desplegable y selecciona una regla de segmentación.
   • En el segundo campo de texto, escribe el valor del parámetro de consulta.
3. Para agregar otra regla, haz clic en Agregar regla.
4. Para excluir la llamada a la acción de determinadas páginas, haz clic en Agregar regla de exclusión. Por ejemplo, puede que quieras agregar una exclusión para una página de política de privacidad.

1. En la sección A quién se mostrará , ajuste la audiencia para su CTA. Puede elegir entre las siguientes opciones:
   • Todos los visitantes: el CTA aparecerá para todos los visitantes.
   • Visitantes filtrados: la CTA sólo aparecerá para los visitantes especificados
2. En la sección Con qué frecuencia se mostrará , ajuste la frecuencia de su CTA. Haga clic en el menú desplegable Mostrar de nuevo y seleccione una de las siguientes opciones:
   • Tras un periodo de tiempo establecido: la CTA volverá a aparecer tras la cantidad de tiempo especificada. 
   • Repetición: la CTA aparecerá cada vez que el visitante navegue por las páginas web seleccionadas y realice la acción desencadenante, incluso si ya ha interactuado anteriormente con ella.
   • No volver a mostrar: no volver a mostrar la CTA al mismo visitante.
     
     

Personaliza las opciones de la CTA

En las pestañas Opciones, puedes definir las diferentes opciones de la CTA. Por ejemplo, puedes elegir mostrarla en tamaños pequeños, definir qué campañas se asociarán con ellas y programar su aparición. 

1. En la parte superior, haz clic en la pestaña Opciones.
2. En el caso de banners fijos, cuadros emergentes o CTA deslizantes, puedes ocultar la CTA en pantallas pequeñas. En la sección Tamaños de pantalla pequeños, selecciona la casilla de verificación Desactivar en tamaños de pantalla pequeños.
3. Si tienes una suscripción a Marketing Hub Pro o Enterprise, puedes asociar la CTA a una campaña:
   • Para asociar tu llamada a la acción a una campaña existente, haz clic en el menú desplegable Campaña y selecciona una campaña.
   • Para asociar tu CTA a una nueva campaña, haz clic en el menú desplegable Campaña y haz clic en Crear campaña. Luego, continúa configurando la campaña. 
   • Si nunca has creado una campaña, haz clic en Crear una campaña. Luego, continúa configurando la campaña. 
4. Configura cómo quieres hacer seguimiento de clics con tu CTA. Selecciona una de las siguientes opciones: 
   • Hacer seguimiento de clics mediante redireccionamiento: haz seguimiento de clics a tu CTA dirigiendo a los visitantes a una URL inicial, que asocia el clic con la CTA, antes de redirigirlos a la página final. Esta opción está seleccionada de manera predeterminada.
   • Seguimiento de clics a través del navegador: haz seguimiento de los clics de forma asíncrona a través del navegador del visitante. Esta opción te permite utilizar etiquetas de anclaje ya que no hay redirecciones. La CTA dirigirá a los visitantes a la URL establecida. 
5. En el caso de banners fijos, cuadros emergentes o CTA deslizantes, puedes programar cuándo aparecerá una CTA:
   
   • Para definir cuándo empezará a mostrarse la CTA, activa el interruptor Programar para más tarde. Luego, selecciona una Fecha de inicio y una Hora. 
   • Para definir cuándo dejará de mostrarse la CTA, activa el interruptor Definir la fecha y la hora en que se dejará de publicar. A continuación, seleccione una fecha y hora de finalización .
     
     

Publicar la llamada a la acción 

Una vez que hayas terminado de configurar la CTA, publícala en tus páginas. 

1. En la parte superior derecha, haz clic en Revisar y publicar.
2. En el panel derecho, revisa la CTA y haz clic en Publicar ahora. La CTA se publicará automáticamente en las páginas objetivo.