/ How to

How to Add and Insert Custom Code Snippets in WebFlow Site Builder

WebFlow is a powerful no-code website builder that makes it easy to create professional, custom websites without needing to know how to code. However, there may be times when you want to add some custom code to your WebFlow site to add additional functionality or customization. Here’s a guide on how to add custom code snippets in WebFlow.

When to Use Custom Code in WebFlow

Here are some common reasons you may want to use custom code in WebFlow:

  • Add custom interactions or animations
  • Integrate third-party services like analytics, chat widgets, etc.
  • Enhance SEO by adding metadata or schema markup
  • Improve site performance
  • Customize styling beyond what WebFlow allows out-of-the-box

Custom code allows you to tap into the full power and flexibility of HTML, CSS, and JavaScript when the visual editor isn’t enough.

What You Can and Can’t Do

WebFlow allows adding custom HTML, CSS, and JavaScript code to your sites. However, there are some limitations:

  • You can’t use <html>, <head>, or <body> tags in custom code
  • Custom code is limited to 10,000 characters per snippet
  • WebFlow doesn’t guarantee full compatibility with all custom code

So while custom code is very powerful, you need to test it thoroughly and have a backup plan in case issues emerge down the line after WebFlow upgrades.

Where to Add Custom Code

There are a few places in WebFlow where you can add custom code:

1. Site Settings

In Site Settings > Custom Code, you can add code that will be applied site-wide. For example, adding Google Analytics tracking code here will enable tracking on all pages.

2. Page Settings

Similarly, in Page Settings > Custom Code, you can add code that will be applied only to that specific page.

3. HTML Embed

The HTML Embed element allows you to embed custom code anywhere on a specific page. You can find this element in the Add panel.

4. Rich Text Editor

If you are using WebFlow CMS, you can also embed custom code inside Rich Text fields, for example to embed a tweet into a blog post.

Best Practices

When working with custom code in WebFlow, follow these best practices:

  • Test thoroughly – Test on multiple devices and browsers to catch any issues.
  • Validate code – Use online tools to validate code and catch errors.
  • Minify code – Minify code to stay within the 10k character limit.
  • Comment code – Add comments explaining what the code does.
  • Backup often – Take WebFlow backups in case issues emerge later.
  • Ask for help – Use WebFlow community forums if you get stuck.

Adding a Custom Scrollbar Styling

Here is an example of using custom code to style the scrollbar in WebFlow.

Step 1) Copy this CSS:

/* Firefox */ 
* {
  scrollbar-width: thin;
  scrollbar-color: #888 #F1F1F1;
}

/* Chrome + Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: #F1F1F1; 
}

*::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 20px;
  border: 3px solid #F1F1F;
}

Step 2) In Site Settings > Custom Code, paste this into the Header Code section

Step 3) Click “Save Changes” and the custom scrollbar styling will be applied site-wide.

This is a simple example, but the same principle applies for adding any custom CSS, JavaScript, metadata, etc. to your WebFlow site through custom code snippets.

Inserting Prism.js for Syntax Highlighting

If you have code snippets in your WebFlow CMS blog posts, you can add syntax highlighting using Prism.js.

Step 1) Add this code to Site Settings > Footer Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-javascript.min.js"></script>

This loads the Prism library and CSS/JavaScript language support.

Step 2) In your blog post rich text, select a code snippet and choose the “{ }” code block option from the formatting menu.

Step 3) Add the language like this:

```css 
/* CSS code snippet */
p {
  color: blue; 
}
```

The syntax highlighting will automatically be applied once the page is published!

Common Questions

Can I add custom code to WebFlow free plan?

No, the free WebFlow plan does not support adding custom code. You’ll need to upgrade to a paid plan.

What’s the character limit for custom code?

10,000 characters per snippet. For longer code, minify it or host it elsewhere and link to it.

Where should I add JavaScript vs CSS custom code?

Best practice is to add CSS in <head> and JavaScript before </body>.

How do I test custom JavaScript code?

Use console.log() statements and check browser dev tools console to debug.

Conclusion

Adding custom code snippets allows you to push WebFlow’s capabilities even further and build truly unique, custom sites. Focus on best practices like thorough validation and testing, commenting code, minifying long code, and taking frequent backups. Feel free to leverage WebFlow’s active community forums if you ever get stuck!

Related Posts