Onboarding using an iframe and a cookie


(Spero Koulouras) #1

We needed a “softer landing” or onboarding process for new users, especially technical neophytes, to our Discourse forum, so here is what we did:

  • Built an external web site containing our “onboarding” screens.
  • Inserted an iFrame into Discourse top of page
  • Added a cookie to track dismissal.

New users to our site get the “Guided Tour”. The tour stays active on their account until they dismiss it. They can bring it back anytime they want by clicking on a “Guided Tour” button added up by the notification icon.

This was a quick and dirty hack, but is reasonably general. I used Wix (overkill) to build the onboarding screens super quickly. The implementation was a single web page with a size of 600x300px containing 7 anchors and using a “Next” button to jump from anchor to anchor. But it does not matter - any web site that fits the iframe will work.

check out dev.sennseis.com and register as a new user to see it, or use “guided tour” if you already have an account. This machine is an unstable development machine. Code is below.

Thanks to @tuananh for the inspiration.

Continuing the discussion from Dismissable banner like on discourse.soylent.me:

Here are the key snippets from our implementation:

First - put some Javascript in the Header to get/set cookie and enable/disable the iframe (Admin -> Customize -> Header)

<script type="text/javascript" charset="utf-8">
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}

function checkCookie(cname) {
    var cval = getCookie(cname);
    if (cval != "") {
        /* cookie has a value */
    } else {
        cval = "true";
            setCookie(cname, cval, 3650);
    }
    return cval;
}


function toggle(btn, id, cname) {
    var el = document.getElementById(id);
    var box = el.getAttribute("class");
    if(box == "hide"){
        el.setAttribute("class", "show");
        setCookie(cname, "true", 3650);
    }
    else{
        el.setAttribute("class", "hide");
        setCookie(cname, "false", 3650);
    }
}


function setid(id, state) {
    
    /* state should be "show" or "hide" */
    
    var el = document.getElementById(id);
    el.setAttribute("class", state);
}

</script>

The in Content -> Top of Page added this code which creates an iframe and loads content. It checks the cookie to decide whether or not the iframe is visible.

<div id="sennseis-blog-iframe" class="show" scrolling="no">
<script>
        if (checkCookie("guidedTour") == "false")
            setid("sennseis-blog-iframe", "hide")
</script>
<button id="sennseis-blog-close-button" onclick="toggle('sennseis-blog-close-button', 'sennseis-blog-iframe', 'guidedTour');"><nbsp></nbsp>X<nbsp></nbsp></button>
 <iframe id="sennseis-blog-frame" src="http://onboard.sennseis.com" name="iframe_a" scrolling="no"></iframe>
 </div>

and there is some associated .css:

#sennseis-blog-iframe {
    float: left;
    height: 300px;
    top: 1%;
    left: 1%;
    width: 600px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 70px;
    margin-top: 20px;
    padding: 0px;
    background-color: transparent;
    border: 2px solid orange;
    border-radius: 6px;
    overflow: hidden;
}

#sennseis-blog-close-button {
    float: right;
    top: 15px;
    right: 15px;
    position: relative;
    margin-bottom: -30px;
    border-top: none;
    background: transparent;
    border: none;
    font-size: 18pt;
    color: lightgray;
}

Discourse documentation
Discourse Tour - do we have such one?
Hamburger menu: how to change FAQ to Guidelines, add Help link, remove About or make About customizable?
PAID Seeking discourse developer for user card/user profile customizations
Try bot, a bot that teaches staff about Discourse
(Tobias Eigen) #2

this seems to be no longer available - would you be able to show me what you’ve done?

thanks! :slight_smile:


(Spero Koulouras) #3

As mentioned, the first implementation we did of this was a performance nightmare with the Wix interaction. The general technique is good, but the website used for onboarding needs to be much lighter weight.

I have turned the onboarding back on temporarily. It would be great if you take a look in the next few hours. This is a development system and the content reflects that. You can create an account. We are in the process of integrating with a SquareSpace website where we will run in an iframe. The top level banner and Nav will be in SquareSpace so are not shown in this site.


(Tobias Eigen) #4

thanks! I had a look so you can remove it.

I like it generally and would be glad to have a way to do this on my site. To be explored further!