Intercepting Chat Events

Demo of RightNow Syndicated Proactive Chat API

HTML

<script src="//unisacurrent--tst1.widget.custhelp.com/euf/rightnow/RightNow.Client.js"></script>
<h1>CRM Proactive Chat Demo</h1>

<p>See: <a href="http://cxdeveloper.com/article/proactive-chat-intercepting-chat-events">http://cxdeveloper.com/article/proactive-chat-intercepting-chat-events</a></p>

<p>
  <button onclick="RightNow.Client.Util.setCookie('noChat','',-10,'/','','');">Clear noChat Cookie</button>
</p>

<div id="myDiv">&nbsp;</div>

CSS

.yui-panel-container {
  bottom: -100%;
  -webkit-transition: bottom 1000ms ease;
  -moz-transition: bottom 1000ms ease;
  -o-transition: bottom 1000ms ease;
  transition: bottom 1000ms ease;
  position: fixed;
  right: 0;
}

.animate {
  bottom: 0 !important;
}

.yui-skin-sam .yui-panel .hd {
  font-family: altis_unisa, arial, helvetica, sans-serif;
  font-size: 1.2em;
  padding-left: 10px;
  color: white;
  background: #0052A0;
  width: 300px;
}

.rn_SyndicatedChatHeaderLabelDiv {
  border-bottom: none;
}

.rn_SyndicatedLabel {
  margin: 3px 0px 0px 5px;
  vertical-align: middle;
}

.rn_SyndicatedChatQuestionLabel {
  font-size: 1em;
  color: #0052A0;
  width: 270px;
  font-family: "altis_unisa_web", verdana, sans-serif;
  font-weight: bold;
}

.yui-skin-sam .container-close {
  top: 8px;
  right: 10px;
}

.rn_SyndicatedChatLogoImageDiv {
  visibility: hidden;
  clear: right;
  float: left;
  vertical-align: top;
  height: 0;
  margin-right: 10px;
}

.rn_SyndicatedChatHeaderLabelDiv {
  height: 0;
}

.rn_SyndicatedChatQuestionDiv {
  height: 80px;
}

.rn_Dialog .ft .yui-button button {
  min-width: 55px;
  margin-right: 5px;
}

.yui-skin-sam .yui-button button,
.yui-skin-sam .yui-button a {
  padding: 0 10px;
  font-size: 1.4rem;
  font-family: altis_unisa, arial, helvetica, sans-serif;
  font-weight: bold;
  line-height: 2em;
  min-height: 2em;
  color: #0052a0;
}

.rn_RefuseDiv {
  line-height: 3rem;
}

JavaScript

RightNow.Client.Controller.addComponent({
    instance_id: "spac_X",
    //modal: true,
    avatar_image: "",
    logo_image: "",
    label_dialog_header: "",
    label_title: "",
    label_question: "Hi there need to chat to an advisor",
    div_id: "myDiv",
    //chat_login_page: "/app/chat/chat_launch",
    module: "ProactiveChat",
    min_agents_avail: 0,
    wait_threshold: 99999,
    seconds: 2,
    type: 2
  },
  "//unisacurrent--tst1.widget.custhelp.com/ci/ws/get"
);

//Widget loaded callback
RightNow.Client.Event.evt_widgetLoaded.subscribe(function(event_name, data) {

  if (data[0].id == "spac_X") {
    //Initialization
    //alert('Widget Initialized');

    //Reset prototype
    spac_X.prototype = {};

    //Handle Chat Offered
    spac_X.prototype.chatOffered = spac_X.chatOffered;
    spac_X.chatOffered = function() {
      //console.log("Chat Offered Handled");
      spac_X.prototype.chatOffered.call(this);
      $('div.yui-panel-container').addClass('animate');
      RightNow.Client.Util.setCookie("noChat", '', -10, '/', '', '');
    };
  }
});