This guide is going to show you how to customize Dubsado’s navigation tabs to change what the top of your Proposals say. So instead of “Proposal, Contract, Invoice” it can read “Booking Form, Agreement, Invoice” (or whatever you’d like!)

I’ll walk you through the process step-by-step to help you personalize your Dubsado Proposal experience to be fully on brand for your small business!

Where to put the Customization

Once you’ve logged into your Dubsado account and have your Proposal template pulled up, you want to add an HTML block to the top of your page. And then Copy and Paste the code that is below this ‘lil video that shows you where to put it!

Then you’ll want to use this HTML code and replace the code that is in the HTML box you dragged onto your form.

<script type="application/javascript">
var diReplaceMenuItemScript = document.createElement('script');
diReplaceMenuItemScript.setAttribute('type', 'text/javascript');
diReplaceMenuItemScript.src = "https://cdn.jsdelivr.net/npm/@dub-ins/change-dubsado-menu-label@1.5.0/index.js";
document.getElementsByTagName("head")[0].appendChild(diReplaceMenuItemScript);

diReplaceMenuItemScript.onload = function() {
replaceDiMenuItem('Proposal', 'Booking Form'); //Booking Form
replaceDiMenuItem('Contract', 'Agreement'); //Agreement
replaceDiMenuItem('Invoice', 'Invoice'); //Invoice
}
</script>

On lines 8, 9, 10 is where the customization takes place. The first ‘Proposal’, ‘Contract’, ‘Invoice’ is telling the code what to look for and the second is telling the code what to replace – so that can be anything you want!

You need to Preview your form to see what it looks like from your clients perspective!

A BIG thank you to Dub-Ins for sharing this code with us! Dub-Ins is an amazing tool that works with Dubsado to create custom forms that SLAYYY.

Keep an eye out

If you Preview your form and you don’t see you contract or invoice tabs – that is because you have them toggled “Off” under your form settings. Toggle them on to see all three!

If the form is giving you a hard time, double check you aren’t in “Legacy Mode” under settings. You need to be using the most up to date form builder in Dubsado.

Customize the Look of your Navigation Tab

Looking to change the fonts and colors of your Dubsado Proposal Navigation Tab? I gotchu – check out our blog post that shows you how to do just that!

I hope this guide has empowered you to take control of your Dubsado proposals and create a seamless experience for your clients. If you have any questions or need further assistance, don’t hesitate to reach out. We’re here to support you every step of the way! Book a free Clarity Call today, or check out our Shop for Dubsado Proposal Templates!