Update ZenDesk widget code

[pdpinch]

It appears that we're using the wrong ZenDesk IDs for the widget in the lower right of the viewport.

Here is the correct embed code, provided by ZenDesk:

<!-- Start of mitx-micromasters Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=0c7cfbbc-76c9-4083-869f-b76d03922056"> </script>
<!-- End of mitx-micromasters Zendesk Widget script -->

Steps to Reproduce

1. Visit https://micromasters.mit.edu
2. Visit https://micromasters.mit.edu/dashboard (I'm not sure if we use the same widget in both places)

Expected Behavior

The ZenDesk widget should be blue.

Actual Behavior

The ZenDesk widget is red.

[umarmughal824]

@pdpinch I have checked that we are using the correct and the same ZenDesk id what is shared above. Could you please confirm the theme or theme text color in the widget configuration on the ZenDesk account?

https://support.zendesk.com/hc/en-us/articles/226005528-How-do-I-change-the-color-of-the-Chat-and-Web-Widgets-#:~:text=From%20the%20Chat%20product%2C%20go,select%20a%20new%20widget%20color.

https://support.zendesk.com/hc/en-us/articles/115009692388-Configuring-components-in-the-Web-Widget

[umarmughal824]

This is the reference of it in the source code https://github.com/mitodl/micromasters/blob/e11a03a2a93e902eafaba39508dee7d15db2e4f9/static/js/entry/zendesk_widget.js#L53

[pdpinch]

Thanks for confirming the key. As far as I can tell, everything is correct, but we're still get the wrong color and, more importantly, the wrong brand setting.

I think we need to take this up with ZenDesk support.

[umarmughal824]

@pdpinch Yeah, that color is coming from the Zendesk. If we want to customize it we can do it manually through writing the JS code.

FYI Besides that, there is an outdated code for that widget which is manipulating the hover states of the buttons. I don't know its purpose in this code. But we can update it to customize the color through the code.

Let me know if we want to update the default color from the Zendesk side or should we update it through the code in our repository.

https://github.com/mitodl/micromasters/blob/e11a03a2a93e902eafaba39508dee7d15db2e4f9/static/js/entry/zendesk_widget.js#L79

[pdpinch]

I posted a question to the ZenDesk support forum about our problem.

I would like to open a ticket with ZenDesk, but it seems like only the account admin can do that.

[umarmughal824]

@pdpinch We will have to fix it programmatically as long as we will not update it with the admin account.

As far I could see the code is outdated and trying to update the wrong iframe which does not even exist. As the Zendesk has changed the HTML iframe code.

Gist Reference: https://gist.github.com/umarmughal824/3e86912b00bc8b96f35eedab52294fa0 Please ignore the commented code and that's a sample code that only updates the pop-up button background color and it has some extra stuff that needs to incorporate.

[pdpinch]

I opened a support ticket with ZenDesk and it's been moving slowly over the past several months. I think we've reached an impasse, with them replying:

According to our Support Engineer who's looking into this, you would need to use the supported embed method/use the snippet found in the product. You could try using a custom implementation but we cannot support custom coding and would defer to the supported method of using the snippet found in your Brand widget settings.

Can we try unbundling the ZenDesk widget code and just embedding it in the home page, to see if it changes things (maybe when we work on the imminent home page redesign)?

I've also noticed that when static/js/entry/zendesk_widget.js gets webpack'ed for delivery, it includes a large amount of unnecessary code, apparently pulled in from util/util.js. (see this slack thread)

[pdpinch]

I think this is ready to work on again. I know @umarmughal824 has already spent some time on it, but I think the requirements have changed enough that anyone could pick it up.

[pdpinch]

This still didn't have the desired affect. Tickets from the web site are still being routed to the wrong brand (MITx Support instead of MicroMasters). I'll take another look at how it appears in the browser before taking it up again with ZenDesk support.

[pdpinch]

I spoke too soon -- it wasn't deployed last week. Now it is, and it works!

Thanks @umarmughal824