White Label n8n: Custom Branding Guide
Ever wondered how to make n8n feel like it’s all yours? Well, you’re in the right place. White labelling n8n isn’t just about slapping your logo on it; it’s about making the entire user interface scream your brand’s identity. And guess what? It’s easier than you might think. In this guide, we’ll walk you through the process of customizing n8n to match your brand, step by step. So, buckle up, because we’re about to transform n8n into something that’s uniquely you.
What Does White Labelling n8n Mean?
White labelling n8n means customizing the frontend styling and assets to match your brand identity. It’s like giving n8n a makeover, but instead of a new haircut, you’re giving it your logo, your colors, and your vibe. The process involves changing two packages in n8n’s source code: n8n’s design system with CSS styles and Vue.js components, and n8n’s frontend build. Trust me, it’s a game-changer for your brand’s visibility and user experience.
Getting Started: What You Need
Before you dive into the customization pool, make sure you’ve got the right gear. You need the following installed on your development machine: Node.js and npm. And don’t skimp on the versions—minimum version Node 18.17.0. Got that? Good. Now, let’s get to work.
Cloning and Setting Up Your Repository
First things first, you’ve got to create a fork of and clone your new repository. It’s like making a copy of n8n that you can play with without messing up the original. Once you’ve got your clone, it’s time to install all dependencies, build, and start n8n. And remember, whenever you make changes, you need to rebuild and restart n8n. It’s a bit like baking a cake—you can’t just add more flour after you’ve put it in the oven.
Customizing Theme Colors
Now, let’s talk colors. To customize theme colors, open _tokens.scss and start with: –color-primary variables as HSL colors. It’s like choosing the perfect paint for your walls, but instead of a paintbrush, you’re using code. Want your brand’s colors to pop? This is where you make it happen.
Changing Logo Assets
Next up, logos. To change the editor’s logo assets, look into and replace: favicon-16×16.png, favicon-32×32.png, favicon.ico, n8n-logo.svg, n8n-logo-collapsed.svg, n8n-logo-expanded.svg. It’s like swapping out the old family portrait for a new one that better reflects who you are now. Make sure every logo screams your brand’s name.
Localizing Text and Changing Window Titles
Now, let’s dive into the words. To change all text occurrences like n8n or n8n.io to your brand identity, you can customize n8n’s English internationalization file: en.json. It’s like translating a book into your own language, but instead of words, you’re translating your brand’s ethos. And don’t forget to change n8n’s window title to your brand name by editing the following: index.html and titleChange.ts. It’s the cherry on top of your white labelling sundae.
Wrapping It Up
So, there you have it. White labelling n8n isn’t just about customization; it’s about transformation. It’s about taking a powerful tool and making it an extension of your brand. And now that you know how to do it, what are you waiting for? Get out there and make n8n yours. And hey, if you need more help along the way, check out our other resources. We’ve got your back.
