Forum Discussion

MeredithMoore5's avatar
MeredithMoore5
Qrew Assistant Captain
2 years ago

CODE DUMP: Email Help Button for Top Right Corner (that grabs page url)

Have you ever had the email come across desperately crying out for help because "... the QuickBase App is broken..." as you stare at 45 separate apps wondering if they could try to be more vague... Well here is a button that can help. I use it on a bunch of my Apps and it auto emails me with the url of the exact page the user is on. It has been a god-send for me, and I wanted to share it with you all here, instead of doing a whole Empower presentation on it.

First create a html page. I creatively named mine 'TicketPage.html'. Then throw in this code (replace what you need to with your own information)
(This code has been updated to reflect the missing '?' after the destination email as pointed out by @Tim D below.)

<!DOCTYPE html>
<html>
<head>
<script>
let oldUrl = document.referrer;
var oldTable = oldUrl.substring(oldUrl.lastIndexOf('/')+1);
var newBody = oldTable+'testin';
function handleonload() {
window.open("mailto:support@myurl.com?subject=New%20Quick%20Base%20Ticket%20Request%3A%20APP%20NAME&body=---------------------------------------------------------------------------------------------%0D%0APlease describe your problem below %26 attach screenshots to this email.%0D%0A---------------------------------------------------------------------------------------------%0D%0ADESCRIPTION OF THE PROBLEM%3A%20%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A---------------------------------------------------------------------------------------------%0D%0APlease make sure that the Ticket Fields below are filled out correctly%3A%0D%0A---------------------------------------------------------------------------------------------%0D%0AQUICK BASE APP%3A%20APP%20NAME%0D%0ALINK TO PROBLEM%3A%20"+oldUrl+"%0D%0A", "_blank");
}
function ticket(){
    history.back();
    handleonload();
}

</script>
</head>
<body onload="ticket()">


</body>
</html> 

"+oldTable+"%0D%0A%0D%0AURL%3A%20"+oldUrl+"%0D%0A%0D%0ADESCRIPTION OF THE PROBLEM%3A%20", "_blank");
}
function ticket(){
    history.back();
    handleonload();
}

</script>
</head>

This is your email body. This is what will populate in a new email when the user clicks on the help button. 

Next we make the button!

Go to the Branding page and alter the Right Element and add your logo. make sure it is set to be open to view.

https://myurl.quickbase.com/up/btable42/g/rj/eg/va/HelpLogo.png


Then click the link icon to the right of the Right Element logo url. This opens up the Right Element Hyperlink.

 

Paste in the following, replacing the info with your own information.

https://myURL.quickbase.com/db/bpgtabl42?a=dbpage&pageID=15&target=_blank


Now save it all and you should see your new help icon at the top right corner of your app. 


I hope this can help a few of you out there. 



------------------------------
Meredith Moore
------------------------------

7 Replies

Sort By
  • MarkShnier__You's avatar
    MarkShnier__You
    Qrew #1 Challenger
    2 years ago

    OMG. I'm definitely going to figure this one out.  I support dozens of clients who collectively have hundreds of applications and that means thousands of tables and zillions of records.  So like you say, they say they have a problem and they expect that I'm are reading their mind as to which record,  which table,  and which app it is.   They might ( or might not) give me a screen shot and I hate squinting to discern the URL.  So, I have to train everybody who contacts me to give me the link to the page they are on!

    Thank you for posting this.  



    ------------------------------
    Mark Shnier (Your Quickbase Coach)
    mark.shnier@gmail.com
    ------------------------------

  • TimD's avatar
    TimD
    Qrew Trainee
    2 years ago

    i had to change 

    window.open("mailto:support@myurl.com&

    to

    window.open("mailto:support@myurl.com?

    the first one was messing up the To part of the email.

    This is very cool!! Thanks for sharing.



    ------------------------------
    Tim D
    ------------------------------
  • KatlynAllen's avatar
    KatlynAllen
    Qrew Assistant Captain
    2 years ago

    I can't wait to use this! First thing I'm doing on Monday morning. 



    ------------------------------
    Katlyn Allen
    kallen@eatatjacks.com
    ------------------------------
  • DonLarson's avatar
    DonLarson
    Qrew Commander
    2 years ago

    Meredith,

    Well done.  Very good feature.





    ------------------------------
    Don Larson
    ------------------------------
  • CRMServices1's avatar
    CRMServices1
    Qrew Member
    2 years ago

    Meredith:

    Awesome feature!



    ------------------------------
    CRM Services
    WPL
    ------------------------------
  • SimonH's avatar
    SimonH
    Qrew Cadet
    2 years ago

    Amazing! thanks for sharing
    In addition to the update Tim mentioned, (changing from "&" to "?" before the subject)
    I also found that url encoding the the origin URL was helpful to make sure that the email gets generated with the full URL including the full query string which is helpful to landing you on the exact record a user was on

    New code page now looks like 

    <html>

<head>
    <script>
        let oldUrl = encodeURIComponent(document.referrer);
        var oldTable = oldUrl.substring(oldUrl.lastIndexOf('/') + 1);
        var newBody = oldTable + 'testin';
        function handleonload() {
            window.open("mailto:support@yourcompany.com?subject=New%20Quick%20Base%20Ticket%20Request%3A%20App%20Name&body=---------------------------------------------------------------------------------------------%0D%0APlease describe your problem below %26 attach screenshots to this email.%0D%0A---------------------------------------------------------------------------------------------%0D%0ADESCRIPTION OF THE PROBLEM%3A%20%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A---------------------------------------------------------------------------------------------%0D%0APlease make sure that the Ticket Fields below are filled out correctly%3A%0D%0A---------------------------------------------------------------------------------------------%0D%0AQUICK BASE APP%3A%20App%20Name%0D%0ALINK TO PROBLEM%3A%20" + oldUrl + "%0D%0A", "_blank");
        }
        function ticket() {
            history.back();
            handleonload();
        }

    </script>
</head>

<body onload="ticket()">


</body>

</html>


    ------------------------------
    Simon H
    ------------------------------
    • MeredithMoore5's avatar
      MeredithMoore5
      Qrew Assistant Captain
      10 months ago

      I LOVE all the community upgrades to this code, and I hope this helps you all!

      I took all of your input, consumed a bunch of caffeine, fixed a few things, made some things a bit prettier, and spat out this code for the code page part of this button:

      <!DOCTYPE html>
<html>
<head>
    <script>
        let oldUrl = encodeURIComponent(document.referrer);
        var oldTable = oldUrl.substring(oldUrl.lastIndexOf('/') + 1);
        var newBody = oldTable + 'testin';
        function handleonload() {
            window.open("mailto:qbsupport@myurl.com?subject=New%20Quick%20Base%20Ticket%20Request%3A%20App%20Name&body=------------------------------------------------------------------------------------------------%0D%0APlease describe your problem below %26 attach screenshots to this email.%0D%0A------------------------------------------------------------------------------------------------%0D%0ADESCRIPTION OF THE PROBLEM%3A%20%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A%0D%0A------------------------------------------------------------------------------------------------%0D%0APlease make sure that the Ticket Fields below are filled out correctly%3A%0D%0A------------------------------------------------------------------------------------------------%0D%0AQUICK BASE APP%3A%20App%20Name%0D%0ALINK TO PROBLEM%3A%20" + oldUrl + "%0D%0A", "_blank");
        }
        function ticket() {
            history.back();
            handleonload();
        }
    </script>
</head>
<body onload="ticket()">
</body>

      Be sure to replace the 'mailto' with your own email, and the 'App%20Name' (2 places) with the name of your app.

      Thank you @Simon H and @Tim D for your help!



      ------------------------------
      Meredith Moore
      ------------------------------