mitodl / micromasters

Portal for learners and course teams to access MITx Micromasters® programs
https://mm.mit.edu
BSD 3-Clause "New" or "Revised" License
29 stars 17 forks source link

add ZenDesk help button #1106

Closed pdpinch closed 7 years ago

pdpinch commented 7 years ago

We need a prominent location on the site for users to contact us -- through ZenDesk -- with questions. The button needs to be on all pages, but it probably makes sense to have separate PRs for (in priority order):

We'll embed a ZenDesk widget

<!-- Start of odl Zendesk Widget script -->
<script>/*<![CDATA[*/window.zEmbed||function(e,t){var n,o,d,i,s,a=[],r=document.createElement("iframe");window.zEmbed=function(){a.push(arguments)},window.zE=window.zE||window.zEmbed,r.src="javascript:false",r.title="",r.role="presentation",(r.frameElement||r).style.cssText="display: none",d=document.getElementsByTagName("script"),d=d[d.length-1],d.parentNode.insertBefore(r,d),i=r.contentWindow,s=i.document;try{o=s}catch(e){n=document.domain,r.src='javascript:var d=document.open();d.domain="'+n+'";void(0);',o=s}o.open()._l=function(){var o=this.createElement("script");n&&(this.domain=n),o.id="js-iframe-async",o.src=e,this.t=+new Date,this.zendeskHost=t,this.zEQueue=a,this.body.appendChild(o)},o.write('<body onload="document._l();">'),o.close()}("https://assets.zendesk.com/embeddable_framework/main.js","odl.zendesk.com");
/*]]>*/</script>
<!-- End of odl Zendesk Widget script -->
pdpinch commented 7 years ago

@roberthouse54 can you give this some thought? I think a mailto link is adequate at this point, but the ZenDesk widget is easy to implement too, and they would both go to the same inbox.

pdpinch commented 7 years ago

I spoke with @roberthouse54 and we're going to go with the default anchored "Help" button from ZenDesk. He is interested in styling the button though, if that's possible.

I'll generate the necessary javascript from zendesk and then you can add it @amir-qayyum-khan

amir-qayyum-khan commented 7 years ago

@pdpinch sure, please tell me where (on which page ) I should add this button? And what will it do?

pdpinch commented 7 years ago

Updated the description to answer @amir-qayyum-khan's questions in https://github.com/mitodl/micromasters/issues/1106#issuecomment-250456645

amir-qayyum-khan commented 7 years ago

@pdpinch what are TOS and Financial Aid Review pages, can you give me url? or screenshots?

pdpinch commented 7 years ago

TOS = "terms of service" => /terms_of_service/

The financial aid review page hasn't been merged yet. It's part of PR #1161

Ferdi commented 7 years ago

Where does the button goes in the page(s) ?

pdpinch commented 7 years ago

The default position is for it to be anchored to bottom edge of the window, on the right.

amir-qayyum-khan commented 7 years ago

why not on footer?

Ferdi commented 7 years ago

@amir-qayyum-khan It should be easily accessible to the users , at least in the first phase.

amir-qayyum-khan commented 7 years ago

can we use a floating button for this? https://github.com/nobitagit/react-material-floating-button

roberthouse54 commented 7 years ago

No, please just use the ZenDesk defaults.

pdpinch commented 7 years ago

FYI, I've configured ZenDesk so that all new tickets that come from the web widget are routed to the MicroMasters team.

At some future point, we may want to include more data from the portal when opening a ticket, like user's full name, e-mail address and MicroMasters program.