Customizing the look of GoHighLevel is key if you want it to match your brand and styling.
The downside is that GoHighLevel doesn’t offer you the greatest customization options. However, a seamless look is achievable by switching up the dashboard and adding custom CSS.
Key Takeaways:
- Customize dashboards to display the required data in the preferred layout
- Change fonts, colors, and other elements of GoHighLevel using custom CSS
- Use a Chrome extension to create custom CSS easily
What Are the Advantages of Customizing GoHighLevel?
Each of your clients is unique, has their preferences, and wants to see the information most relevant to them.
While the standard layout of GoHighLevel works for some, it won’t suit everyone, so having the ability to customize it allows you to tailor the platform to each client. In doing this, you are providing them more value and a much better experience.
Furthermore, if you sell GoHighLevel as SaaS, you don’t want to provide the same cookie-cutter layout as everyone else. Customization gives you the opportunity to put your stamp on the platform and make it your own product.
Moreover, anyone who has used GoHighLevel before can spot the platform a mile away since it looks distinctive. Therefore, if you don’t customize it before selling it as SaaS, the telltale signs that it is actually GoHighLevel will be as clear as day.
What Dashboard Customization Options Are Available?
First, let’s look at the dashboard styling options, as this is the easiest thing to customize.
The great thing about this is that you can pick which datasets to show in relation to what your clients are doing.
For example, if you have a client that takes and manages a lot of appointments, then showing booking statuses will be the most important thing. In contrast, someone who sells a lot of digital products will want to see their sales and pipeline data.
Widgets
Each section on the dashboard is called a “widget” and will display a certain type of data. You can modify the data displayed, remove them, or add new ones to show precisely the data you—or your clients—need.
You will find widgets in each of these categories:
- Contacts: Widgets include contact activity, tags, type, and name
- Appointments: Booking counts for confirmed, canceled, no-show, and over a specific date range
- Opportunities: Opened, won, lost, abandoned opportunities, and more
- Calls: Incoming and outgoing calls, call duration, and first-time callers
- Conversations: Read and unread messages and conversations, and more
- General: The GoHighLevel dashboard comes preloaded with these datasets
You can move widgets around the dashboard in whatever order makes sense for you and change how the data is displayed. We’ll take more on that later, though.
External Objects
This is a cool feature. To level up the dashboard, you can embed external objects such as websites, Google Docs, YouTube videos, social media post feeds, slideshows, and anything else you can think of.
For example, I uploaded the SupplyGem URL, and it displayed it in a little window. It even allowed me to fully use the website inside GoHighLevel!
This opens up lots of customization possibilities. You can add all your training material here, useful resources your clients might need, and even sales pages for any other services you offer.
How I Styled My GoHighLevel Dashboard (Step By Step)
You’ll be pleased to hear that styling your GoHighLevel dashboard is not laborious. It’s easy to use and is actually quite a fun thing to do.
Step 1: To get started, I headed to the sub-account of the dashboard I wanted to customize and clicked the little pencil icon in the top-right corner. This opened up the customization screen where I could make my changes.
Step 2: I found that the easiest—and fastest—way to change up the look of the GoHighLevel dashboard was to move the sections around into my preferred order.
To do this, I hovered my mouse at the top of each widget and then clicked to drag and drop each section in the desired spot.
Step 3: If there was a widget I didn’t want displayed, I got rid of it by clicking the three dots in the top-right corner and hitting “delete.”
Step 4: My next job was to pick which extra widgets I wanted on my dashboard. I have lots of pipeline data, so this was my priority. After clicking on the “Add widget” button in the top-right, I started selecting my widgets.
The widget menu that opens shows you the different categories of widgets and how many each category contains. To see the available widgets, click on each category to open the list.
Step 5: Once I’d chosen my widgets, I simply clicked on them, and the system automatically added them to my dashboard.
However, that’s not all there is to it. Clicking on each widget opens up a further customization menu.
I could change how the data was displayed by choosing my preferred chart type.
I could also overwrite the widget’s name and choose the data metric and group.
It’s even possible to set conditions for the data, which is handy if you want to get specific about what the dashboard displays.
Clicking on “Advanced settings” brings up further options such as changing the order of the data, how many fields you want displayed, and a few other things.
All these customization options vary slightly depending on which widget you have selected. I recommend playing around with the options to see what they do.
I chose to keep things simple and didn’t alter any of the widget’s settings except for the chart type.
Step 6: Next, I wanted to add a couple of external objects. To do this, I clicked on the “Add widget” button, selected “Objects,” and then clicked the “Embed” option.
Here, you are essentially creating a new widget to use.
Step 7: Now, there are a couple of important options here. Under “Type,” you can select to add a URL or IFRAME embed code.
Enter a URL if you want to add a website or web page. However, for embedding stuff like videos and slideshows, you will need to grab the IFRAME embed code from whatever you’re trying to add.
For example, I found the embed code for a YouTube video I wanted to add by clicking the “Share” button underneath the video and selecting “Embed.”
Doing that revealed the embed code, so I copied it and added it into GoHighLevel.
Once I hit “Save,” the video appeared on my dashboard, and I could play it as and when I wanted.
Step 8: Once I was happy with my new layout, I clicked “Save changes” so I wouldn’t lose all my hard work!
While customizing, I found a couple of things really cool.
The widgets are all different sizes, so fitting them nicely on the page was challenging until I worked out that you can change their size!
Grab the bottom right corner of each widget and drag to adjust its size. This has its limitations, though, as they each have their own minimum size.
Another thing I found is that you can create more than one dashboard for the same sub-account.
Click the blue icon next to where it says “Dashboard,” and click to create a new one. Users can switch between dashboards as needed. This is a fab way to organize things neatly if there’s a requirement to display many different data sets.
Finally, if you click the three dots found next to the edit icon, you will find the ability to:
- Clone your dashboard
- Duplicate it into another sub-account
- Manage the access permissions
- Delete it
How and Where Can You Add Custom CSS?
So, you have your new shiny dashboard, but everything else still looks, well, very GoHighLevelly.
You can remedy this by adding custom CSS to your GoHighLevel account, which will switch up the platform’s colors, fonts, and style in pretty much any way you choose.
Want a hot pink background? It can be done!
The catch is that custom CSS is code, so if you don’t know how to code, the usual route would be to find and pay for a coder to do it for you.
I have a clever workaround for that, though. There’s a Chrome extension called “Visual CSS Editor” that you can use to edit your GoHighLevel dashboard with ease.
While in a GoHighLevel sub-account, open up the extension. Click on any element on the page so it highlights with a blue border.
The extension will open up an editing menu where you can change the font, color, spacing, and a bunch of other things for the highlighted element. You can even add shadows and animations, so you can go to town with it!
When you have finished making the page look pretty, click the green “Export” button.
The CSS code for your work is revealed! Copy it, and add it to the relevant area described below.
Admin Console
To add custom CSS to your admin console (dashboard and menu), make sure you’re in your account’s Agency view and click on “Settings.”
Click on “Company,” then scroll down until you see the custom CSS box. Paste your code in there and click “Update company.”
Forms and Surveys
Adding custom CSS to a form or survey is just as simple.
Open the form or survey in the editor and click the slider icon underneath the “Save” button. A side menu will appear. Make sure the “Styles” tab is selected.
Scroll down the menu until you see the custom CSS box, and paste in your code. Hit “Save,” and you’re good to go!
Examples of Custom CSS
If you need some inspiration, here are a few examples of what others have done to customize the look of their GoHighLevel SaaS login pages.
You can see there are endless possibilities and make the GoHighLevel platform fit seamlessly with your brand.
To compare, here is the basic login page without any customization added.
CleanCore
Here is CleanCore’s effort. They have changed the font and color scheme, added their logo, and included a nice graphic to jazz up the page.
Nerdly
Nerdly has chosen a clean look with a black-and-white background. To add interest, the logo overlaps with the sign-in form. They have also chosen to use custom fonts.
Lead Savage
LeadSavage has gone for a striking gold and black look with a prominent logo. They haven’t changed the default color of the sign-in button, though, which may not have been the best choice.
Frequently Asked Questions
Can I Customize the Agency View Dashboard?
You cannot customize the GoHighLevel Agency view dashboard. Customization options only apply to sub-accounts.
Do I Need to Know Coding to Use Custom CSS?
You do not need to know coding to add custom CSS to GoHighLevel. You can either hire a coder to do the job for you, or use a Chrome extension called “Visual CSS Editor” to do it yourself.
Can I Add Custom CSS to a Sub-Account Dashboard?
Yes, you can add custom CSS to any GoHighLevel sub-account dashboard. This allows you to customize the appearance and aesthetics to fit your brand.
