csergent08

Easily Letting Your Users Contact You From Your App

Blog Post created by csergent08 Champion on Feb 2, 2015

For the mobile and desktop web apps I create, I like to provide the user with a way to contact me in the event that they run into trouble in the application. More often than not, a user sends an e-mail and puts no subject in it, which might make it appear vague as to what application they are talking about, so my e-mail links not only include "to", but also the "subject",  typed in for the user, which displays the application name and a brief message in the "body" that instructs the user to describe the issue they are having. I place it in a dojo pane at the bottom right of the page. To create this pane with this type of content, just add the HTML here and don't forget to require the dojo title pane in you AMD application.

<!-- Mail Pane Begin -->
            <div id="mailPane" data-dojo-type="dijit/TitlePane"
                               data-dojo-props="title:'Ask For Assistance',closeable:false,open:false">
                <!-- Send Mail Begin -->
                <div id="send Mail">
                    <p>Contact <a href="mailto:email@someone.com?subject=GIS Mobile App&body=Please Provide some information on your issue.">Contact me for help.</a>
                                if you need assistance or need to report an issue.</p>
                </div>
                <!-- Send Mail End -->
            </div>
            <!-- Mail Pane End -->

And this CSS will place the pane at the bottom right hand corner of your web page.

 

/* Mail Pane Style */
    #mailPane
    {
        width:240px;
        position:absolute;
        right:0%;
        bottom:0%;
        background-color:White;
        border-color:Black;
        width:auto;
        z-index:50;
    }
    .soria  .dijitTitlePaneTitle {
        background: #fff;
        font-weight:600;
        border: none;
        border-bottom:solid 1px #29201A;
        border-top:solid 1px #29201A;
    }
           
    .soria .dijitTitlePaneTitleHover
    {
        background:#eee;
    }
           
    .soria .dijitTitlePaneTitleActive
    {
        background:#808775;
    }
           
    .soria .dijitTitlePaneContentOuter
    {
        border-right: none;
        border-bottom: none;
        border-left: none;
    }

 

There is no JavaScript required and this completes the mobile template. You can get a full working copy here. You can also try a live demo here. The user name is field and the password is test.

Outcomes