6 Rookie Mistakes To Avoid When Using Webflow Custom Code

Envision this; You've just spent weeks, maybe even months, designing your dream website on Webflow.

You've poured over every detail, from the pixel-perfect layout to the smooth animations. Your website looks fantastic, but you decide to kick things up a notch.

You think, "I’ll just add some custom code to make my site even more interactive and unique.

You write custom code for a cool new feature you found online. You hit publish and eagerly check your site.

But wait, what's this?

Instead of that slick new element, you're greeted by a jumbled mess of overlapping text and images. Or even worse, a feature that was working perfectly is now completely unresponsive.

If this scenario feels all too familiar, you're not alone. While Webflow's custom code capabilities can supercharge your site's functionality, they can also be a double-edged sword.

As a seasoned Webflow agency, we've catered to a diverse range of customer needs. Over time, we've encountered a set of recurring challenges.

Drawing from our vast experience, we've curated this guide to spotlight 6 typical missteps even the best Webflow users sometimes make when incorporating custom code.

Our aim? To let you learn from our experiences.

But first, let’s understand,

What is Webflow Custom Code and Why use it?

Webflow Custom Code allows you to add your own

• HTML,
• CSS, and
• JavaScript

Directly into your Webflow project. Think of it as a magic wand that lets you go beyond Webflow's built-in features, giving you the freedom to implement unique functionalities and design elements.

Whether adding a specific animation, integrating third-party APIs, or enhancing user interaction, custom code gives you the power to make it happen.

Now, you might wonder, "Why should I bother with custom code when Webflow is all about deploying awesome websites without code?"!

While Webflow's built-in features are robust and work alongside the idea of no code, they do have their limits.

Here are some reasons why you might want to utilize custom code:

• Unique Features: Stand out from the crowd by adding functionalities like Animation or a custom slider that aren't available through Webflow's default options
• Custom Interactions: Maybe you want to engage your users in a specific way that Webflow’s pre-made interactions don't cover. Custom code has your back.
• Performance/SEO Optimization: Webflow custom code allows you to make under-the-hood tweaks for better site performance, improving SEO rankings and user experience.
• Third-Party Integrations: Whether it's a specialized tracking script, an external widget,or sending form data to CRMs like Hubspot. Webflow custom code provides a pathway for seamless third-party integrations.
• Complete Control: When you use custom code, you gain complete control over your website's behavior, look, and feel, which can be empowering for those who know how to wield it.

What can go wrong while deploying Webflow Custom Code? 🆘

A lot of things can go wrong while deploying Webflow custom code, hence, here are 6 of the most common ones we can help you mitigate.

1. Managing Both Production and Development Versions of Your Code

It's essential to maintain separate versions of your code for development and production.

Mixing them up or accidentally publishing the development version can lead to:

• Inconsistencies
• Bugs
• Sub-optimal user experience

An EPYC tip: To avoid such confusions make sure you use Github/Gitlab.

Hosting and deploying code from here instead of Webflow will ensure that you always revert back without the need of publishing the website.

2. The blind spot of Webflow’s Code Editor

The Webflow code editor doesn’t facilitate:

• In-built error checker
• Testing the code.

This means if you have syntax or functional errors in your code, they won't be flagged immediately, but only once you publish the website.

The downside?

These errors only rear their heads when visitors land on your site.

It’s a bit like stepping out with mismatched shoes and only realizing it when someone points it out!

3. The Preview Challenge

One of Webflow’s strengths – its visual designer, becomes a bit of a hiccup when using custom code.

You can't preview the effect of your code directly within the designer. Instead, you need to take the extra step of publishing your site to see the code in action.

This can slow down your development process and may even result in unintentional errors being made public.

4. Code Placement Matters

Placing your custom code in the wrong section can break your website's functionality or appearance.

Whether it's the header, footer, or within an HTML embed element, ensuring the correct placement is crucial. Think of it as fitting puzzle pieces - one wrong piece can ruin the whole picture.

An EPYC tip: If you are trying to add scripts for Analytics or Chatbots, keep in mind that it should be added in the right place in <head> or <body> depending on the tool and guidelines.

5. The Risks of Exposed API Keys

Many Webflow developers enrich their sites by fetching data from third-party platforms.

However, there's a catch: Webflow's Custom Code section is client-side.

This means API keys, which are meant to be confidential, can get exposed to the public.

It not only risks your data's security but can also lead to unwanted costs if someone misuses the keys.

An EPYC tip: If you want to mitigate this risk, make sure you deploy a custom backend server or mask your API keys.

For external API’s use tools like Wized, which will enhance the security of your API integrations, and facilitate a seamless sensitive data handling.

5. Class naming anomalies

Webflow developers often use capital letters and spaces in their class names.

However, Webflow automatically changes uppercase letters to lowercase and replaces spaces with hyphens (-) when it publishes the website.

So, for example 'Hero Section' or 'Team Card', on the live website, becomes 'hero-section' or 'team-card.'

For example, let's say we have a box with the class name 'Blue Box,' and we want to write custom CSS to make its background color blue.

A novice developer might write the code like this:

 <style> 

.Blue Box {    
	background-color: blue;
  }
    
<style> 

‍

However, this won't work for two reasons:

• In CSS, spaces in class names indicate that you want to select a child element.
• Webflow converts class names, so the actual published class name will be 'blue-box,' not 'Blue Box' as used in Webflow.

The correct way to write this code would be:

 <style> 

.blue-box {    
	background-color: blue;
  }
    
<style> 

‍

Final Word

It's evident that experience is a treasury of wisdom. As experts in the Webflow domain, we've faced our fair share of challenges and triumphs.

By sharing these insights, we hope to mitigate the risks you might encounter while deploying Webflow custom code.

Remember, every coding challenge presents an opportunity for growth. By rigorous learning and practise, you can navigate these challenges more effectively, ensuring that your projects not only meet but exceed expectations.

Now, ready to elevate your Webflow projects? Dive into our extensive resources or get in touch with our experts today for personalized guidance

Let's build better, together!