Tutorial

Cómo integrar Arengu en el flujo de la web

Hay diferentes herramientas #Nocode que te permitirán añadir fácilmente formularios inteligentes a tu página web, nuestra favorita es Arengu. Gracias a su lógica, podrás crear formularios sin una sola línea de código. En este post, aprende a integrar Arengu con Webflow.

Alex Vaughtton

Fundador

@

Hackers de Nocodios

Arengu es una de las herramientas nocodas más interesantes para construir formas inteligentes. Gracias a su lógica puede hacer flujos completos de una forma simple, todo sin una sola línea de código. Veremos en esta simple entrada cómo podemos integrar Arengu con una de las herramientas nocodas más utilizadas para crear páginas web - Webflow. Exploraremos las dos formas que hay de insertar un formulario web de Arengu:

  1. A través de un código HTML que insertaremos en la página o
  2. A través de un elemento modal que impresionará a nuestra red, dándonos una experiencia más pulida.

Antes de empezar, será necesario cumplir los siguientes requisitos:

  • Tiene una cuenta en Arengu.
  • Tener una cuenta de Webflow.
  • Contratar (al menos) un plan de sitio.

Creando la forma en Arengu

El primer paso es crear una forma dentro de Arengu. Puedes usar una de las plantillas preconfiguradas que tienen, que cubren la mayoría de los casos de uso que necesitarás. Una vez creado y publicado el formulario, podrás acceder a la pestaña "Compartir"*,* en la que veremos las diferentes opciones que Arengu genera por defecto para que podamos compartirlo. En concreto, hay tres opciones que nos interesan:

  • URL
  • Incrustación de HTML
  • Modal

Opción 1: Insertar el formulario Arengu a través de una URL

La opción más fácil para integrar un formulario Arengu es crear un botón dentro de tu página y decirle que te lleve a la URL del formulario Arengu. Esta URL es única para cada formulario, y la encontrarás en la última sección dentro de la pestaña"Compartir". Se recomienda configurar el botón para que se abra en una nueva pestaña, sin sacar al usuario de su sitio web.

Opción 2: Insertar el formulario Arengu a través de un HTML Embed

La segunda forma es quizás una solución más elegante para incorporar la forma en la web. Esto es agregando una pequeña pieza de código personalizado dentro de Weblow, lo cual es posible gracias al elemento de incrustación HTML.

Podremos personalizar tanto el tamaño del formulario -dándole las propiedades correspondientes al elemento en Webflow- como el aspecto visual gracias al configurador visual Arengu- o si se quiere personalizar aún más, modificando el CSS.

Para incorporarlo debes:

  • Añadeun elemento HTML Embed a tu página Webflow. Se recomienda que le asigne una clase identificadora, como el formulario Arengu.
  • Navegueen la pestaña de "Compartir" de Arengu, hasta la opción de Incrustación en línea. Copie el código que aparece aquí:

  • Pega el código en el elemento HTML Embed dentro de Webflow, y haz clic en Guardar y Cerr ar para guardar el elemento.
  • Para ver que funciona correctamente, debes publicar el sitio Webflow y verlo en su versión pública - el diseñador no previsualiza el código.

Una vez insertado se actualizará automáticamente con los cambios que hagas dentro de Arengu incluyendo los flujos que le asignes o los cambios estéticos que realices.

Opción 3: Agregar un formulario Arengu con un Pop-Up Modal

Esta opción permite que el formulario se superponga a la página, dejándole una experiencia mucho más integrada y funcional - sin demasiada complejidad adicional: Integrar el código que permite esta funcionalidad en la web y tener un botón que dispara el formulario.

Para añadir el código personalizado a la página, tendrás que hacer clic en la rueda de ajustes de página, que encontrarás en la sección "Páginas" (o haciendo clic en la letra P), que te indicará que puedes editar los ajustes de la página.

Navegue a la sección de Código Personalizado, y, una vez en ella, vaya a la casilla que especifica: Etiqueta interior.

Ahí debes pegar las dos siguientes líneas de código:

https://sdk.arengu.com/forms.js">

https://sdk.arengu.com/modal.js">

Haz clic en "Guardar" y estarás correctamente configurado.

Una vez que este código esté en tu página, puedes crear un botón con el estilo que quieras para darle homogeneidad con el estilo de tu página. Tendremos que asignarle un atributo para que la página entienda que debe mostrar el modal.

Para ello, con el botón seleccionado, navegue hasta la pestaña "Configuración del elemento" (o pulse la tecla D) y encuentre la sección "Atributos personalizados".

Allí debe crear un nuevo atributo, haciendo clic en el símbolo + con las siguientes características:

  • Nombre: data-arengu-modal-form-id
  • Value: {YOURFORMID}

Puedes obtener la identificación del formulario a partir de lo que hemos hecho en el primer paso, justo después de la URL de Arengu.

Publica la página y en la versión en vivo de la misma, comprueba que el botón funciona correctamente y que el formulario se muestra.

Estas son las 3 opciones que tiene para integrar las formas de Arengu con Webflow, como hemos visto son todas bastante sencillas de implementar dentro de un proyecto, y le permiten flexibilidad para elegir las que mejor se adapten al caso de uso correspondiente.

¡Gracias!

¿Como este artículo? Corre la voz.

Código bajo y sin código en acción

Suscríbete a nuestro boletín de noticias

Únete a nuestro boletín de noticias y recibe recursos, contenido curado e inspiración para el diseño directamente en tu bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
Algo salió mal al enviar el formulario. Por favor, inténtelo de nuevo.

Lo último de nuestro Blog

Tienes preguntas, tenemos respuestas

FAQ

¿Quiénes somos?
¿Cuánto tiempo lleva construir mi producto digital o MVP?
¿Puedo trabajar con Minimum.run de forma continua una vez que mi MVP o producto esté lanzado?
¿Con qué tecnologías e integraciones trabaja Minimum.run?
¿Cuál es el proceso de trabajo con Minimum.run?
¿Cuáles son las entregas típicas?
¿Seré capaz de gestionar mi producto personalizado una vez que esté lanzado?
Suscríbase a