How to Change Dubsado Navigation Tab Names

After my previous blogpost, How to Hide Dubsado Navigation Tabs, several people have asked me if there was a way to not only hide, but to change the text for Dubsado navigation tabs. The short answer is yes! It’s a little javascript hack that works great. At least until Dubsado allows us to change the form names at the top of Proposals through their system.

In this tutorial, you’ll learn how to:

1. Change the text of the Proposal form tabs (Proposal, Contract & Invoice)

2. Change the text of the Proposal form tabs when attached to a Scheduler

My plan was to update the previous blog and add the code snippet to change your form names, but my goal for these posts is to be specific to your needs and make them easy to digest.

Change your Proposal, Contract, and Invoice titles

Changing your form names from the default “Proposal/Invoice/Contract” that we are all too familiar with, is a feature Dubsado plans to roll out sometime in the future. If you’re impatient like me, you probably want this feature now. So let’s dive in…

The Code

This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:

<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', 'Your Wish'); //Update your Proposal name
    replaceDiMenuItem('Contract', 'Is My'); //Update your Contract name
    replaceDiMenuItem('Invoice', 'Command'); //Update your Invoice name
}</script>

Copy to clipboard

1. Update the form names where you see Your Wish (Proposal Name), Is My (Contract Name) and Command (Invoice Name) to whatever you would like.

2. Make sure you do NOT delete the straight single quotes wrapping the value (the updated name).

3. Preview your live form and watch the magic happen!

Change your form names when linked to a Dubsado Scheduler

You can also change the title of your “Appointment” and “Form” names when you have a proposal linked to your scheduler. The same logic applies, but with one caveat; the updated names will only show on the form side and not the scheduler side.

Since there isn’t a way to apply code to Dubsado schedulers, the names at the top won’t be able to change until the scheduler is submitted by your prospect/client.

Until Dubsado allows for more customizations to their schedulers, the following option will have to suffice.

The Code

This is your Javascript. Add an HTML Block onto your Dubsado form. Delete the example code, then copy and paste the following code into the block:

<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('Schedule', 'Schedule'); //Update your Scheduler name
    replaceDiMenuItem('Oh hey', 'Oh hey'); //Update your Form name
    replaceDiMenuItem('Pay Up!', 'Pay Up!'); //Update your Invoice name
}</script>

Copy to clipboard

1. Update the form names where you see Schedule (Scheduler Name), Oh hey (Form Name) and Pay Up! (Invoice Name) to whatever you would like.

2. Make sure you do NOT delete the straight single quotes wrapping the value (the updated name).

3. Preview your live form and watch the magic happen!

Things to note

Please note the following:

• You cannot combine the two codes so that the updated form names will work on both a proposal form and a linked scheduler form.

• If you would like to use the same form with updated title names for your scheduler, and also separately, make a copy of the form and apply the different codes that you’ll need for each. Use one of the forms as a proposal only form (with the option to link your contract and invoice), copy and paste the first code snippet inside a Code Block. Use the second copied form, specifically for your scheduler, and replace the first code snippet with the second above.

Pretty cool, yeah? Let me know if you’re using this little hack in the comments below!

TABLE OF CONTENTS

1. Change navigation tab names

2. Change names when linked to a Scheduler

3. Things to note