For this tutorial in video form, click here
In this article, we’ll go over how to use TamperMonkey to make your CRM more colorful. Check out all these colors.
Arguably, they’re a little bit loud, but this is what our client wanted. They wanted a way to easily be able to see which tab was which, and we’ve done this by using a tool called TamperMonkey to be able to modify the user interface of Zoho CRM.
How It Works
TamperMonkey allows you to write JavaScript that can manipulate the user interface of any webpage.
You can specify what webpage you want it to run on. Here, we’re making it run on anything. Essentially, we check if we’re on the Zoho CRM page, Sandbox, or CRM Plus.
Check out these tabs:
They are web tabs pointing to different custom views in the Deals Module. If we turn off the Tampermonkey script, we get a double navigation header:
The TamperMonkey script removes the second header by checking for strip_header = true in the URL. We added that URL parameter in our Web Tab.
Zoho will ignore this but the TamperMonkey script will recognize it. When it sees that, it knows that it needs to delete that part of the UI. It’ll appear momentarily before getting deleted. That’s achieved with this little function:
We’ve also done a few other things. We’ve made it so that it automatically changes the notes to only show the notes for that record rather than the notes for the contacts potentials as well.
You’ll also notice a section about “Disengaged”.
It’s looking for a particular part, and if it has “Disengaged” it highlights it in red. You can achieve that with canvas view now but you might want to have more control.
Conclusion
There’s a lot that you can do with this if you know some JavaScript. This fix is a bit hacky and potentially will break if Zoho CRM changes as much as a class name in the HTML. If you want to do it properly, you would use Zoho CRM WebApps, which is a way of creating your own user interface for Zoho CRM. It’s quite a lot of work though, because you need to create the whole UI from scratch. Here, we like most of the UI. We just want to modify a few things. That’s where Tampermonkey comes in handy. Feel free to give it a go. You need to get the Tampermonkey extension for Chrome and then write some JavaScript to hack the DOM. Good luck!