HEY

Participate in the next Webflow Challenge!

Embed Webflow : 10 Embeds essential for Webflow to improve user experience

Apart from the benefits of Webflow embedding. Above all, they help to make a website even more professional.

Updated on

19/12/2020

Embed Webflow : 10 Embeds for Webflow
Embed Webflow : 10 Embeds for Webflow

Embed Webflow: Now you want to see bigger. Being content with a basic website created on Webflow is no longer for you. It's true that it's already beautiful and efficient... but you know you can do even better. You can still make it "more professional" than it already looks.

However, there are different kinds of webflow embedding: forms, social networks, media, notices, ads, etc. How is it different from the elements created manually on the site? Indeed, you can create a form manually via the Webflow interface. You can add media, or direct users to external links for ads or polls...

#embed #embedwebflow #code #webflow

🌈 Survey

If I ask you to choose between using a URL or embed code, which one do you prefer?
URL, easy to use!
Code embed, more advantageous in my opinion.
it depends on the context
Don't hesitate to give your opinion as a comment. 🌈❤️

If you still don't know the difference between a webflow embed code and a URL, pay attention to the following:

Summary

Embed code vs. URLs

When to use embed code

The 10 Webflow Embedded

  1. Forms
  2. Audio
  3. Instagram
  4. Testimonials
  5. Facebook
  6. Video
  7. Poll
  8. Ads & Affiliate Links
  9. Comment
  10. Airtable

Conclusion

Anything missing?

Embed Webflow vs URL

The main difference is the location of the data and how it is subsequently updated.

For the URL, the file is linked to the source file (data stored in the source file, and therefore, updated in the source file itself) while for the embed, the file is embedded in the source file (data stored in the file, and therefore, no link to the source file).

I admit it's a bit complicated, but as you read through it, you'll see that it will become clearer.

When to use an embed code?

These are generally the complex files that are integrated on a site or blog: social networks, forms, polls, etc.. (we'll come back to this a little later).

It's a way for you or your clients to improve their image, to show their professionalism. Instead of directing visitors, customers and prospects to an external link, the file or social network is immediately accessible on your site.

Let's take the case of social networks in particular. By integrating them on your site, you have more chances to gain more visitors and then followers. You then enlarge your community, a good way to promote your activity more.

As for the embed webflow code that is used to collect information from Internet users, they are very practical. Imagine that you are asked to fill out a form or participate in a survey, but the file to be filled out is external to the site. It will take you longer, so you don't feel comfortable participating in the end. However, if the file is on the site, easy to access and functional, you won't have any trouble. 🤓

Also see the embed code as an opportunity to connect with users. It's not the same thing with URLs.

Now that you can measure the impact of the embed codes, you just need to know what are the different embed codes that match with a webflow website, and then how to integrate them. 👇

Embed Webflow

The 10 Webflow Embedded

1. Embed webflow: Forms

The integration of forms on a webflow site plays an important role in inbound marketing. If the site owner has previously managed to gather several regular visitors, the forms (newsletter registration, ebook download, etc.) will do the rest.

Only, they are not simple forms. They have to be linked to a mailing list, thanks to services like Mailchimp, and by the embed code. In general, these forms are customizable, so that they match the design of the whole site (unlike links).

Can Mailchimp be integrated on a Webflow site? Indeed, thanks to Mailchimp HTML Embed.

Mailchimp HTML embed

Mailchimp is linked to a mailing list (regrouping the email addresses you managed to get via the form), as I explained earlier. Hence the possibility to send content to all those who subscribed to it.

But if you want your emails to really convert your prospects into customers, you don't have to send just any email. For one thing, you have to be consistent in your mailings. Secondly, I advise you to create original content, which is not necessarily visible on your site. At times, it would be even better to accompany them with ebooks, to invite followers to a webinar, to organize a promotion...

Here is an example of a website made on Webflow, and which integrate a subscription form for its slack channel, but also a subscription form for their newsletter, on their website: BYLU (Boss Your Life Up).

- Send an ebook

Receiving an ebook as a gift always makes people happy! That's why you should send some, maybe in your welcome or introduction mail? But what should it contain? As long as you show that you're an expert in your field, it can do it (a guide, among other things).

- Organize a Webinar

Some people prefer to stay in their comfort zone, but this is not necessarily the case for everyone. There are those who find pleasure in participating because it is an opportunity to be part of an audience that shares something in common, something that is close to their hearts. Others see webinars as a way of seeing who's behind the brand (yes, seeing each other in real time is always better). This inspires confidence, which plays an even more important role in their conversion process.

- Promote

People have subscribed to your newsletter, don't you think that you should also reward them with a discount or promotion code for their next purchase? They're not the only ones who win, so don't worry. You too will have gained loyal customers. If they get a promotion, they'll have one more reason to come back to your site to make a purchase or use a service.

2. Embed Webflow Audio

It is not only forms that can be integrated on a website. Multimedia content also has its place, audio files among others. Are there still those who are interested in audio content? Of course there are! They allow a deeper connection with Internet users.

Back to BYLU (Boss Your Life Up), the site also includes audio content. It then uses an integrated player . And since it is "integrated" and not linked by a URL, Internet users will be able to go to the original podcast platform. There is even a good chance that they will follow you on the platform.

There's also DreamLife Beats, another site designed on Webflow that features audio excerpts from his work at the top of his website.

3. Embed code: Instagram

Let's take the example of DreamLife Beats. Apart from the audio excerpts integrated on his Webflow website, he also exposes his instagram posts (images and videos). It's hard for potential clients to miss his skills; not only does he put a video presentation on it, but his other posts show how talented he is as a music producer.

Here, DreamLife Beats used the Elfsight widget for instagram integration.

Let's say a user who also uses instagram goes to your site, and finds your account on his way. If he likes what you do, he won't hesitate for a second to follow you on Instagram. And one more prospect!

4. Embed Webflow:Testimonials on a Webflow site

On most professional websites, you will find testimonials from their customers. Do you know why? Well, it's not just a formality. If they have been set up, it's for a specific reason: to increase their notoriety . Just seeing that your clients trust you and admire your work gives your other potential clients reasons to work with you. Once a project is completed, they will be encouraged to do what others do, which is to give their opinion on your site.

There are different ways of inserting testimonials on a site, but the best is obviously the embed code. The reviews you receive on Yelp will then appear on your site. I also recommend the Elfsight widget. The principle remains the same: copy a code and then paste it on the part of your site where you want the testimonials to be displayed.

5. Embed Webflow: Facebook & Twitter

Also thanks to Elfsight , you can integrate your social media posts on your site, in a strategic location. Visitors to your site will see them as an invitation to be part of your network. If you want to optimize their presence as much as possible, I advise you to publish only high-performance content.

6. Embed Webflow: Embedded Video Content

This feature is very interesting for those who are active on YouTube or Vimeo. The goal is of course to get as many views as possible. By inserting your videos on your site, it will allow visitors to discover you on your channel, and why not, to subscribe to it.

I know some sites that stuff their site with videos thanks to the embed code. Uploading videos directly to a site is a very bad idea, because it makes the server heavier. It creates an impact on the speed of loading the site and its SEO.

Now we just have to see how to integrate a video on a Webflow website.

It's very simple: Webflow has a built-in YouTube video function that you simply drag and drop onto the screen; then you just have to insert the link of the video in the dedicated area.

7. Embed Webflow: Integrated Survey

In order to improve the experience of Internet users on a site, it is preferable to carry out analyses continuously. Surveys are such an effective and yet simple way to implement on a webflow site.

Surveys help you get valuable information. Visitors to your site can answer them directly. It also comes naturally to them. Again, they don't need to be redirected to an external site.

For your part, you won't be led to see the survey results as numbers. You'll see them mostly as people who have visited your site, and who have taken the time to complete your survey. Your decisions will be more relevant to your target audience.

When you create a poll, I remind you not to take too long. Otherwise, people won't want to answer it... So make sure you only ask the important questions . Also try to simplify the answers to save time for your target, and thus, encourage them to take the time to answer (multiple choice questions would be welcome for example).

Let's get into the most important part: how to integrate a survey on a webflow site?

  • My favourite (which you can see on this article as well) is Typeform.
  • SurveyMonkey offers questionnaires that can be easily integrated into a Webflow site.
  • There's also Wufoo. In addition to surveys, it also offers the integration of forms.

All three of them can be customized.

8. Embed Webflow: Ads and affiliate links

Always with the aim of animating your site, the setting up of ads is a very good idea. You can do it in 2 different ways:

  • Using Google AdSense
  • Using Carbon

Amazon affiliate links are also very popular. A nice way to make ends meet. But if you have a lot of followers, you will earn a lot more!

9. Embed Webflow: Commentary "Disks"

Allowing people to comment on some of your content is giving them the opportunity to share their opinions. You can say that you communicate (you and your site visitors). But managing comments is not necessarily easy... Disqus has therefore been set up to make it easier. And above all, it suits Webflow.

As soon as a comment is written on the site, you will immediately receive an email notification. You can then approve or refuse this comment (indeed, there is some spam that you must absolutely refuse!). Moreover, Disqus has a spam filtering feature. For those who know Wordpress, the principle is the same as for Akismet.

As we always focus on webdesign, in webflow, I want to specify that the appearance of the comments is customizable with Disqus. What more could you ask for?

10. Embed Webflow: "Airtable"

Last but not least, Airtable! The good thing about it is that the data you receive via your site will not be stored on the site's server. This only makes it heavier, and then slows down the speed of the site.

Integrating Airtable into your site then allows the site to store the data at Airtable itself. At the same time, you will have access to many more project managementfeatures.

Conclusion

The principle of embed codes remains the same for all these types of embed :

  1. copy a given code from the source tool or software.
  2. go to the Webflow site and stick it in a specific place.
  3. To do this, you have to use the "embed" feature (just drag it to the part where it will be placed).

Anyway, it's easy. A few seconds and two clicks, that's all you need. However, as I mentioned for each embed, the advantages are multiple! If it's only the fact of having the server of your site freed up.

It's true I listed you 10 different embedders:

  1. Forms
  2. Audio
  3. Instagram
  4. Testimonials
  5. Facebook & Twitter
  6. Videos
  7. Poll
  8. Ads & Affiliate Links
  9. Comments
  10. Airtable

However, you don't have to install them all on your site. Maybe you don't have a Twitter account yet or maybe it's just not important enough for your business. You are more focused on building a community, and therefore you need the feedback embeds?

It all depends then on your project and your objectives.

Comment

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training