El mes pasado lanzamos un nuevo sitio de Webflow que destaca a las mejores agencias y diseñadores freelance que usan Webflow: Webflow Experts. A diferencia de otros de nuestros micrositios más centrados en el producto, el sitio de Experts es único por cómo fomenta la comunidad y la comunicación, y por el papel fundamental que juega Zapier para impulsar esa comunidad.
En este artículo, veremos cómo hemos integrado Zapier con el sitio de Webflow Experts para crear:
- Un sistema de notificaciones por correo electrónico personalizado que envía a los expertos las nuevas solicitudes de proyectos
- Un sistema de notificaciones en Slack que avisa a toda la red de expertos cuando llega una solicitud general
Un poco de contexto
Antes de entrar en cómo configuramos algunas de las integraciones de Zapier, echemos un vistazo rápido a cómo funciona realmente el sitio de Experts. En concepto, es bastante sencillo.
En la práctica... bueno, ya llegaremos a eso en la siguiente sección.
Por un lado, tenemos a los visitantes del sitio que buscan ayuda con un proyecto (llamémoslos clientes). Y por otro, tenemos a los expertos, cada uno con un perfil que destaca su trabajo y ofrece información adicional sobre los servicios que prestan.
Los clientes pueden enviar un proyecto desde dos lugares del sitio:
- Desde el perfil de un experto en particular, notificando solo a ese experto
- Desde la página de envío general, notificando a toda la red de expertos
Crear este sistema de notificaciones requirió un poco de magia astuta con Webflow y Zapier. Empecemos por la primera situación, donde un cliente envía un proyecto a un experto específico y le enviamos un correo electrónico personalizado con todos los detalles del proyecto.
Cómo crear el sistema de notificaciones por correo en Webflow
Paso 1: Campos de formulario ocultos e incrustaciones dinámicas
Para enviar un correo electrónico personalizado a un experto cuando recibe una nueva solicitud de proyecto en su página de perfil, necesitábamos crear un Zap que enviara esos datos del formulario a una plantilla de correo HTML.
También necesitábamos incluir la dirección de correo electrónico del experto en los datos del formulario, para poder usarla como destinatario del correo que enviaríamos finalmente desde Zapier.
Parece sencillo, ¿verdad? Solo hay que añadir un campo al formulario de su página de perfil y extraer dinámicamente su dirección de correo. Sí, pero también necesitábamos ocultar ese campo al público para que toda la mecánica de comunicación ocurriera "entre bastidores".
¿Nuestra solución? Un poco de código personalizado y algo de magia con las incrustaciones dinámicas de Webflow CMS. Veamos cómo.
Para incluir la dirección de correo electrónico del experto en cada envío de formulario, hicimos lo siguiente:
- Añadí un código personalizado al formulario
- Añadí un campo de formulario y lo configuré como tipo “hidden”
- Luego, rellené dinámicamente el campo de valor con la dirección de correo electrónico.
Aquí tienes el código de inserción dinámica:
<input data-name="expert-email" id="expert-email" maxlength="256" name="expert-email" required="required" type="hidden" value="[DYNAMIC EMBED GOES HERE]">
Y aquí puedes ver cómo queda el código personalizado en el Diseñador, con la inserción dinámica visible:
Con todo esto listo y una plantilla de correo HTML ya creada, teníamos lo necesario para configurar el Zap.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Zap 2: Formularios de Webflow + Gmail
Ahora que nuestro formulario estaba configurado para usar el correo del experto, solo faltaba volcar esos datos en una plantilla HTML y enviársela al experto mediante un Zap.
Para que te hagas una idea, este es el resultado final:
Comparado con el trabajo del campo oculto, esto fue pan comido. El Zap constaba de las siguientes partes:
- Activador: Webflow - Envío del formulario de perfil de experto
- Acción: Gmail - Enviar correo (y rellenar dinámicamente la plantilla HTML con los datos del formulario)
Me saltaré los pasos básicos para configurar el Zap (si quieres saber más, echa un vistazo a nuestros tutoriales en el Centro de ayuda) y pasaré directamente a la plantilla de correo, que es la parte más avanzada.
Una vez que hayas definido el destinatario y el asunto, cambia el tipo de cuerpo a HTML y pega el código de tu plantilla en el campo correspondiente.
Ahora puedes sustituir cualquier parte del correo por un valor dinámico del formulario (funciona casi igual que las inserciones dinámicas en Webflow). Aquí simplemente seleccionamos y reemplazamos los campos de correo en la plantilla con los datos del formulario.
¡Y listo! Haz un par de pruebas y tendrás funcionando tu sistema de notificaciones por correo electrónico personalizado, gracias a la magia del CMS de Webflow, los elementos dinámicos y Zapier.
Cómo crear el sistema de notificaciones en Slack
Zap 2: Formularios de Webflow + Slack
Para fomentar el sentido de comunidad entre los expertos, creamos un canal de Slack. Además de ayudar a todos a comunicarse y compartir ideas, este canal hace que informar sobre los nuevos proyectos enviados a toda la red sea mucho más fácil e inmediato.
¿Cómo? Muy sencillo. Integra ese formulario con Slack para que cada nuevo proyecto enviado se publique directamente en un canal al que todos tengan acceso.
De nuevo, empecemos echando un vistazo al resultado final:
Como este formulario no necesita incluir dinámicamente la dirección de correo electrónico del experto, es mucho más directo. Solo tenemos que tomar los datos del formulario e insertarlos en una plantilla de mensaje personalizada para Slack.
Una vez más, sustituir la plantilla de mensaje de Slack con los datos del formulario funciona igual que los elementos dinámicos en Webflow, así que este Zap es pan comido. Pero, ¿a que es una pasada?
Lo que no he cubierto
Trabajar en este proyecto me ha confirmado el potencial de Webflow al combinarlo con Zapier. Como Zapier cuenta con más de 750 aplicaciones, hay miles de posibilidades que se me escapan. Así que, si aún no lo has hecho, ¡anímate a explorar Zapier y experimenta con integraciones para tu sitio!
¿Qué integraciones útiles has creado para tus sitios con Zapier? ¡Cuéntanoslo en los comentarios!
