Recursos

Principales categorías de Embeds para Webflow: qué son y dónde encontrarlos

Las ventajas que ofrecen los Embed (código embebido) de Webflow son sobre todo, que ayudan a que un sitio web sea aún más profesional y completo con la ayuda de servicios externos de terceros.

4/7/2021

Tienes un sitio web hermoso y funcional pero quieres o necesitas incorporar ciertas funcionalidades que por defecto Webflow no incluye y quieres ir un paso más lejos.

Sin embargo, existen diferentes tipos de Embeds para Webflow: formularios, redes sociales, medios, avisos, anuncios, etc...

¿En qué se diferencian de los elementos creados manualmente en el sitio web? De hecho, puedes crear un formulario manualmente a través de la interfaz de Webflow y puedes agregar medios o dirigir a los usuarios a enlaces externos para anuncios o encuestas pero estos Embeds permiten hacerlo de manera más efectiva y recargar tu web.

Webflow es un ecosistema abierto que permite ampliar y/o complementar sus características.

EMBED WEBFLOW VS URL

La principal diferencia es dónde están los datos y cómo se actualizan posteriormente.
En el caso de la URL, el archivo está vinculado al archivo origen (datos almacenados en el archivo de origen y, por lo tanto, actualizados en el propio archivo de origen) mientras que para el Embed, el archivo se integra en el archivo de origen (datos almacenados en el archivo, y por lo tanto, ningún vínculo con el archivo fuente).
Es decir que con un elemento Embed la gestión y procesamiento de la información se hace fuera de Webflow y tu web.

Más información sobre los Embeds: university.webflow.com/lesson/custom-code-embed


¿CUÁNDO USAR UN CÓDIGO EMBED?

Generalmente son los archivos más complejos los que se integran en un sitio web o un blog: redes sociales, formularios, encuestas, etc...
Es una forma para que tu o tus clientes mejoren su imagen y para mostrar tu profesionalismo. En lugar de dirigir a los visitantes, clientes y otros a un enlace externo, el archivo o la red social es inmediatamente accesible en tu sitio.
Tomemos el caso de las redes sociales en particular. Al integrarlos en tu sitio, tienes más posibilidades de ganar más visitantes y por lo tanto seguidores. Expandes por lo tanto tu comunidad, una buena manera de promover aún más tu actividad.
En cuanto a los Embeds que permite integrar Webflow para recopilar información de los usuarios, son muy prácticos. Imagina que se te pide que completes un formulario o que participes en una encuesta, pero además, el archivo a completar en cuestión es externo al sitio. Entonces te llevará más tiempo, como usuario, de modo que al final seas demasiado perezoso para participar. Por otro lado, si el archivo está en el sitio, es de fácil acceso y es funcional, será mucho más fluido y accesible.
Tienes que ver los Embeds como una oportunidad para conectarse con tus usuarios. No ocurre lo mismo con las URL externas.
Ahora que puedes medir el impacto de los Embeds, todo lo que tienes que hacer es saber cuáles son los distintos tipos existentes y también cómo integrarlos.


LOS 10 EMBEDS PRINCIPALES PARA WEBFLOW (Enlaces al final)

1. Formularios

La integración de formularios en un sitio Webflow juega un papel importante en el inbound marketing. Si el propietario del sitio ha logrado reunir a varios visitantes habituales, los formularios (suscripción al boletín, descarga de libros electrónicos, etc.) harán el resto del trabajo.
Solo que estos no son formularios simples. Deben estar vinculados a una lista de correo o base de datos, a través de servicios como Mailchimp y el código Embed correspondiente. En general, estos formularios son personalizables, de modo que coincidan con el diseño de todo el sitio (a diferencia de los enlaces).
Entonces, ¿se puede integrar Mailchimp en un sitio de flujo web? De hecho, gracias a Mailchimp HTML Embed.
Mailchimp está vinculado a una lista de correo (agrupando las direcciones de correo electrónico que has logrado obtener a través del formulario) como te expliqué anteriormente. De ahí la posibilidad de enviar contenido a todos aquellos que se hayan suscrito a él.
Pero si deseas que tus correos electrónicos conviertan a tus acciones en clientes, no tienes que enviar cualquier correo electrónico. Tienes que ser constante al enviar y te aconsejo que crees contenido original, que no tiene que ser necesariamente visible en su sitio. En ocasiones, sería incluso mejor acompañarlos con ebooks, invitar a seguidores a un webinar, organizar una promoción ...


2. Insertar audio de flujo web

No son solo los formularios los que se pueden integrar en un sitio web. El contenido multimedia también tiene su lugar, como los archivos de audio entre otros. ¿Todavía hay quienes están interesados ​​en el contenido de audio? Claro! Permiten una conexión más profunda con los usuarios como por ejemplo con el uso de un podcast o clips de audio.


3. Instagram

También puedes exhibir tus publicaciones de Instagram. Puedes aprovechar así las posibilidades de imagen, video y audio para exponer tus aptitudes o mensajes.
Digamos que un usuario que también usa Instagram va a su sitio y encuentra tu cuenta en el camino. Si le gusta lo que haces, no dudará en seguirte en Instagram.


4. Testimonios en un sitio de Webflow

En la mayoría de los sitios web profesionales, encontrarás testimonios de sus clientes. ¿Sabes por qué? Bueno, no es solo una formalidad. Si se incluyeron es por un motivo concreto: reforzar tu notoriedad. El solo hecho de ver que tus clientes confían en ti y admiran tu trabajo les da a sus otros clientes potenciales una razón para trabajar contigo. Una vez finalizado un proyecto, se les animará a hacer como los demás, es decir, a dar su opinión en tu sitio.
Hay diferentes formas de incrustar testimonios en un sitio, pero, por supuesto, la mejor es la integración a través de un Embed. Las reseñas que recibas en Yelp aparecerán en tu sitio por ejemplo.


5. Insertar Facebook y Twitter

Puedes integrar tus publicaciones en redes sociales en tu sitio, en un lugar estratégico. Los visitantes de tu sitio lo verán como una invitación a formar parte de su red. Si deseas optimizar tu presencia lo mejor posible, te aconsejo que publiques solo contenido de alto interés y rendimiento.


6. Video integrado

Esta función es ideal para aquellos que están activos en YouTube o Vimeo. El objetivo es, por supuesto, obtener el mayor número de visitas. Al insertar tus videos en tu sitio de esta manera, permitirás que los visitantes lo descubran en tu canal y, por qué no, suscribirse a él.
Conozco sitios que llenan sus webs con videos con el código de inserción. Subir videos directamente a un sitio es una muy mala idea, ya que pesa sobre el servidor. Esto crea un impacto en la velocidad de carga del sitio y su SEO.
Añadir un video en un sitio de Webflow es simple, tiene un módulo de video de YouTube incorporado que simplemente debes de arrastrar a tu página y solo tienes que definir el enlace del video en los ajustes.


7. Encuesta integrada

Para mejorar la experiencia de los usuarios de Internet en un sitio, es mejor realizar un análisis de forma continua. Las encuestas son efectivas y fáciles de implementar en Webflow.
De hecho, las encuestas te ayudan a obtener información valiosa. Los visitantes de tu sitio pueden responder directamente. También les resulta natural. Nuevamente, no es necesario redirigirlos a un sitio externo.
Por tu parte, no se te llevará a ver los resultados de la encuesta como números. Los verás sobretodo como una persona que visitó tu sitio y que se tomó la molestia de responder tu encuesta. Tus decisiones se adaptarán más a tu objetivo.
Cuando creas una encuesta, te recuerdo que no tome demasiado tiempo. De lo contrario, la gente no querrá responderlas ... Así que asegúrate de hacer solo las preguntas importantes. También trata de simplificar las respuestas para ahorrar su tiempo objetivo y, por lo tanto, anímalos a tomarse el tiempo para responderlas (las preguntas de opción múltiple serían bienvenidas, por ejemplo).

¿Cómo integrar una encuesta en Webflow?
• Mi favorito es Typeform.
• SurveyMonkey es también otra opción.
• Wufoo, además de las encuestas, también ofrece integración de formularios.

Todos se pueden personalizar.


8. Anuncios y enlaces de afiliados

Siempre con el objetivo de darle vida a tu sitio, configurar anuncios es una muy buena idea. Puedes obviamente usar Google AdSense y los enlaces de afiliados de Amazon también son populares. Por supuesto cuantos más seguidores tengas más rentable será.


9. Comentar con Disqus

Permitir que las personas comenten sobre algunos de tus contenidos les da la oportunidad de compartir su opinión y establecer una comunicación entre tus usuarios y tu. Sin embargo, la gestión de comentarios no es necesariamente fácil. Por lo tanto, Disqus se ha configurado para hacerlo más fácil y hacerlo en tu lugar. Y sobre todo, es especialmente adecuado para Webflow.
Tan pronto como se escriba un comentario en el sitio, recibirás inmediatamente una notificación por correo electrónico. A continuación, puedes aprobar o rechazar este comentario. De hecho Disqus tiene además una función de filtrado de spam y la apariencia de los comentarios se puede personalizar con Disqus.


10. Airtable

Por último, pero no menos importante, ¡Airtable! la solución NoCode para bases de datos visual, configurable y conectable a nivel de usuario. Lo bueno de esto es que los datos que recibes a través de tu web no se almacenarán en el servidor del sitio. Esto solo lo hace más pesado y luego ralentiza la velocidad del sitio.
La integración de Airtable en tu web permite que se almacenen los datos en Airtable. Al mismo tiempo, tendrás acceso a muchas más funciones de gestión de proyectos.

CONCLUSIÓN

El principio de los códigos Embeds sigue siendo el mismo para todos estos tipos de inserción:
• Sigue las instrucciones proporcionadas por la herramienta o el software fuente.
• Copia el código generado.
• Ve a tu sitio de Webflow para pegarlo en el lugar deseado.
• Usar el módulo Embed.
• Publicar y listo!

ENLACES

Mailchimp: https://mailchimp.com/es/
Mailchimp (Webflow): https://university.webflow.com/integrations?search=mailchimp

Podcast (Webflow): https://university.webflow.com/integrations?search=podcast
Audio clip (Webflow): https://university.webflow.com/integrations?search=audio

Instagram (Elfsight): https://elfsight.com/instagram-feed-instashow/
Instagram (Webflow): https://university.webflow.com/integrations?search=instagram

Testimonios (Elfsight): https://elfsight.com/testimonials-slider-widget/

Facebook (Elfsight): https://elfsight.com/facebook-feed-widget/
Facebook (Webflow): https://university.webflow.com/integrations?search=facebook

Twitter (Elfsight): https://elfsight.com/twitter-feed-widget/
Twitter (Webflow): https://university.webflow.com/integrations?search=twitter

Youtube (Elfsight): https://elfsight.com/youtube-channel-plugin-yottie/
Vimeo (Elfsight): https://elfsight.com/vimeo-video-gallery-widget/

Typeform: https://www.typeform.com
Typeform (Webflow): https://university.webflow.com/integrations?search=typeform
Survey Monkey: https://www.surveymonkey.com
Survey Monkey (Webflow): https://university.webflow.com/integrations?search=Survey%20Monkey
Wufoo: https://www.wufoo.com
Wufoo (Webflow): https://university.webflow.com/integrations?search=Wufoo

Google AdSense: https://www.google.es/adsense/start/
Afiliación Amazon: https://afiliados.amazon.es

Comentarios (Disqus): https://disqus.com
Comentarios (Webflow): https://university.webflow.com/integrations?search=disqus

Airtable: https://airtable.com
Airtable (Webflow): https://university.webflow.com/integrations?search=airtable


PRECIOS: los precios suelen variar en función del plan elegido y las distintas opciones, aunque la mayoría tienen planes gratuitos con limitaciones para ir probando el servicio.

En resumen, es fácil. Unos segundos y unos pocos clics, eso es todo lo que necesita. ¿Sin embargo los beneficios son múltiples! Sobretodo que tu sitio web se libera de la gestión del Embed al ser externo.
No es necesario que los instales todos en su sitio. Todo depende de tu proyecto y tus objetivos.


Estos complementos son los principales y más usados aunque no los únicos.

MÁS COMPLEMENTOS PARA WEBFLOW: university.webflow.com/integrations

CONSEJO: Aprovecha los planes gratuitos para hacer pruebas antes de lanzarte a desarrollar del todo el Embed elegido.

Imagen
Recursos

Herramientas para prototipado, el paso previo al diseño en Webflow

Siempre añado en todos los post que el primer paso para ganar tiempo y lograr el objetivo deseado es ante todo realizar una maqueta, un prototipo de diseño del proyecto que posteriormente llevaremos a Webflow

Leer...
Imagen
Recursos

Ampliar las capacidades de Webflow a través de recursos de terceros

De acuerdo que Webflow es una herramienta muy completa y versátil pero en ocasiones no llegá todo lo lejos que nos gustaría y ahí es donde entran estos recursos de pequeñas startups especializadas.

Leer...
Imagen
Recursos

Extensiones de utilidad para añadir a Chrome y complementar Webflow

Te indicamos una pequeña selección de extensiones que os pueden ser de utilidad tanto a nivel general de diseño como para complementar a Webflow específicamente.

Leer...