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;
}
Maybe I am not alone with this idea and we can work together on this as my budget is not that great and I want to keep it open source of possible ☺
archive.site.com/forum/whatever.
