Customer Portal

Get Involved. Join the Conversation.

Topic

    Jean Felisme
    Add Proactive Chat Widget to AnswerAnswered
    Topic posted August 5, 2011 by Jean FelismeGreen Ribbon: 100+ Points, last edited January 9, 2012 
    3766 Views, 20 Comments
    Title:
    Add Proactive Chat Widget to Answer
    Content:

    Hi,

    We are using Nov.10 of RightNow interface.

    I was wondering can I add the chat or proactive chat to an answer or answer id?

    I am looking to only show the chat widget when a customer select a certain question in our knowledgebase.

    And If so, is there any documention I can be pointed to?

    Best Comment

    JN Hutchinson

    NOTE: Edited this to add the <div> to control where the chat pop up appears on the apge.

    Actually ... you CAN embed a proactive chat widget inside an answer.  

    The trick is using variables:

    Create a variable (let's call it ProactiveChatPopup):

    <div id="myDiv" style="RIGHT: 325px; POSITION: fixed; TOP: 2em"></div>
    
    <script type="text/javascript" src="http://rockwellautomation.custhelp.com/rnt/rnw/yui_2.7/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript">
    function loadScript() {
    // Modified code from http://www.ejeliot.com/blog/109
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://rockwellautomation.custhelp.com/euf/rightnow/RightNow.Client.js";
    // most browsers
    script.onload = addComponent;
    // IE7
    script.onreadystatechange = function() {
    if (this.readyState == "complete") {
    addComponent();
    }
    }
    head.appendChild(script);
    }

    function addComponent() {

    RightNow.Client.Controller.addComponent(
    {
    avatar_image: "/rnt/rnl/img/logo1.gif",
    chat_login_page: "/app/chat/chat_landing",
    logo_image: "",
    p: "1",
    min_agents_avail: 1,
    seconds: 60,
    wait_threshold: 300,
    instance_id: "spac_0",
    div_id: "myDiv",
    module: "ProactiveChat",
    type: 2
    },
    "http://rockwellautomation.widget.custhelp.com/ci/ws/get"
    );

    }

    YAHOO.util.Event.onDOMReady(loadScript);
    </script>

    The convulted loadScript function is necessary because otherwise there is a conflict with the standard RightNow javascript that gets put on all pages.  Basically, the proactive chat widget wasn't MEANT to appear inside a page like this.

    (NOTE: You can change things like the p variable above to match your product numbers)

    To activate this, just put the variable $ProactiveChatPopup at the bottom of an answer.  That variable will get replaced at runtime with the code above.

    Josh

    PS One other cool thing you can do is wrap the above in a 

    <rn:answer_section access="7"></rn:answer_section>

    wrapper.  Then, the above code will ONLY be there if the logged in user meets the access level 7 (or whatever number your access level is assigned).  We use that to only pop up proactive chat offers if the customer has a support contract with us.

    Comment

    • monique perkins

      You can use the proactive chat widet to show on a CP page.  You can't embed any widgets in answers though.

      One way to do it is to use an rn:condition tag and put the proactive chat widget in the content.  You can use the attribute

      url_parameter_check

      <rn:condition url_parameter_check="a_id == '1230'">

      Then the proactive chat widget would show up on the answers detail page when a user is viewing that particular answer.

    • JN Hutchinson

      NOTE: Edited this to add the <div> to control where the chat pop up appears on the apge.

      Actually ... you CAN embed a proactive chat widget inside an answer.  

      The trick is using variables:

      Create a variable (let's call it ProactiveChatPopup):

      <div id="myDiv" style="RIGHT: 325px; POSITION: fixed; TOP: 2em"></div>
      
      <script type="text/javascript" src="http://rockwellautomation.custhelp.com/rnt/rnw/yui_2.7/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript">
      function loadScript() {
      // Modified code from http://www.ejeliot.com/blog/109
      var head = document.getElementsByTagName("head")[0];
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://rockwellautomation.custhelp.com/euf/rightnow/RightNow.Client.js";
      // most browsers
      script.onload = addComponent;
      // IE7
      script.onreadystatechange = function() {
      if (this.readyState == "complete") {
      addComponent();
      }
      }
      head.appendChild(script);
      }

      function addComponent() {

      RightNow.Client.Controller.addComponent(
      {
      avatar_image: "/rnt/rnl/img/logo1.gif",
      chat_login_page: "/app/chat/chat_landing",
      logo_image: "",
      p: "1",
      min_agents_avail: 1,
      seconds: 60,
      wait_threshold: 300,
      instance_id: "spac_0",
      div_id: "myDiv",
      module: "ProactiveChat",
      type: 2
      },
      "http://rockwellautomation.widget.custhelp.com/ci/ws/get"
      );

      }

      YAHOO.util.Event.onDOMReady(loadScript);
      </script>

      The convulted loadScript function is necessary because otherwise there is a conflict with the standard RightNow javascript that gets put on all pages.  Basically, the proactive chat widget wasn't MEANT to appear inside a page like this.

      (NOTE: You can change things like the p variable above to match your product numbers)

      To activate this, just put the variable $ProactiveChatPopup at the bottom of an answer.  That variable will get replaced at runtime with the code above.

      Josh

      PS One other cool thing you can do is wrap the above in a 

      <rn:answer_section access="7"></rn:answer_section>

      wrapper.  Then, the above code will ONLY be there if the logged in user meets the access level 7 (or whatever number your access level is assigned).  We use that to only pop up proactive chat offers if the customer has a support contract with us.

    • Amanda Jo

      JHutch2000, should the code above be included in the /app/answers/detail.php or within the KM answer workspace itself? I've never used variables before and may need some more detailed steps, if possible?

      Also, what kind of impact will this have when it comes time to upgrade versions? Typically, we like to keep things vanilla (as possible) so as not to create further complicatios during upgrades.

      Any help is appreciated!

      Thanks,

      Amanda Balliet

      IBM

    • JN Hutchinson

      A variable, in RightNow parlance, is a special string that you define in the console.  Then, whenever that variable appears in an answer, it gets replaced at runtime by whatever text you define in the variable.

      To open up the variables, go into your RightNow Console, click on the Configuration bar in the left nav menu, then Service -> Variables.

      When you create a new variable, the dialog box has a space for the "Name" and the "Value".  The name can be any string you want (no spaces).  In my case, I have things like "COMMSProactiveChatPopup" as the name.

      Then, when I want to put a proactive chat widget inside a particular answer, I simply plop the variable at the bottom of the answer:

      $COMMSProactiveChatPopup

      When this gets display on the web, it automatically replaces the variable with the code in the Value field.

      ***

      As far as living through upgrades, this has made it through one so far and I don't see any problems in the next one we plan for the fall.  The proactive chat code hasn't really changed, so the variable method just "works".  The really nice thing is that if I need to change the code, I change it once in the variable ... and it automatically updates into any answer where I used that variable.

      Josh

    • Amanda Jo

      Hi Josh,

      Thank you for your help so far! However, I am hoping for some more! 

      I created a variable named "ProactiveChatbyAnswer" with the following code:  

      <script type="text/javascript" src="//usdaforestservice.widget.custhelp.com/euf/rightnow/RightNow.Client.js"></script>

      <script type="text/javascript">
      //Custom code (different from tag documentation) begins
      function loadScript() {

      var head = document.getElementsByTagName("head")[0];
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "//usdaforestservice.widget.custhelp.com/euf/rightnow/RightNow.Client.js";
      // most browsers
      script.onload = addComponent;
      // IE7
      script.onreadystatechange = function() {
      if (this.readyState == "complete") {
      addComponent();
      }
      }
      head.appendChild(script);
      }

      function addComponent() {
      //Custom code (different from tag documentation) ends

      RightNow.Client.Controller.addComponent(
      {
      label_dialog_header: "USDA Forest Service CHD",
      label_title: "Would you like help?",
      logo_image: "",
      min_agents_avail_type: "sessions",
      seconds: 10,
      instance_id: "spac_0",
      div_id: "myDiv",
      module: "ProactiveChat",
      type: 2
      },
      "//usdaforestservice.widget.custhelp.com/ci/ws/get"
      );

      }

      YAHOO.util.Event.onDOMReady(loadScript);
      </script>

        <div id="myDiv"></div>

       
      
      I added $ProactiveChatbyAnswer to the bottom of one of our answer docs. I logged in as an agent and made myself available for chat. I acted as the customer and directed to the KM that I added the variable to, but nothing happens. There must be something wrong in my code? I customized what I thought was needed for our site, but I admit I didn't know what to do with this:
      
      YAHOO.util.Event.onDOMReady(loadScript);
      
       
      
      Any help is much appreciated!
      
      Thanks,
      
      Amanda Balliet
      
      IBM
      
    • JN Hutchinson

      I noticed two things, one of which I'm sure is a show-stopper.  :)

      First line is missing:

      <script type="text/javascript" src="http://rockwellautomation.custhelp.com/rnt/rnw/yui_2.7/yahoo-dom-event/yahoo-dom-event.js"></script>

      The first line you have isn't necessary because it is duplicated in the loadScript() function.

      The reason this stuff needs to be there is that the proactive chat code CAN'T load until ALL the other code that RightNow uses has been loaded. Because you don't have that first line in there, the YAHOO.util.Event.onDOMReady(loadScript); line isn't able to execute properly. There *is* no YAHOO javascript stack to run.

      The second thing I noticed was the last line of the addComponent() function looks mal-formed:

      "//usdaforestservice.widget.custhelp.com/ci/ws/get"

      should be, I think:

      "http://usdaforestservice.widget.custhelp.com/ci/ws/get"

       

      Hope that helps,

      Josh

       

      PS One thing I found that helps track down what isn't working is to use Firebug (in FireFox) or the right-click "Inspect element" in Chrome.  If there is a javascript error, that will get you right to where it is failing and that can help sometimes.

    • Amanda Jo

      Hi Josh! You have been an enormous help! Thank you!

      I was able to get the chat to appear when I want it to and take me to the correct chat_landing page, however it does just that- appears- where I put the code within the answer, at the bottom of the KM. I was under the impression it would "pop" and hover wherever you were scrolling at that moment. Was I mistaken or is something else wrong?

      Appreciate it!

      Amanda Balliet

      IBM

    • JN Hutchinson

      Oh, my bad!

      I forgot the <div id="myDiv"></div>

      That's the div you place on the page to get it to appear.

      I use a CSS style to force the pop up in the upper corner of the browser window:

      <div id="myDiv" style="RIGHT: 325px; POSITION: fixed; TOP: 2em"></div>

      ***

      The div just goes at the beginning of the variable and then it makes the pop up appear in the same place (and hover over the rest of the screen).

      Josh

      PS Edited the original code above to add the <div>

    • Amanda Jo

      You're the man! Thanks so much for all of your help!

      Best,

      Amanda Balliet

      IBM

    • Jeremy Watson

      I'm glad you both have figured things out, but I did want to mention one thing that Josh posted earlier:

      -------------------------------------
      "//usdaforestservice.widget.custhelp.com/ci/ws/get"
      should be, I think:
      "http://usdaforestservice.widget.custhelp.com/ci/ws/get"
      -------------------------------------

      The leading '//' (instead of 'http://') is actually correct.  It's a protocol-relative URL so that you don't risk an issue of a user being on https and the /ci/ws/get request then going over http (and failing because of the change in protocol).

      James

    • Amanda Jo

      Helpful to know! Thanks, James!

    • Amanda Jo

      Hi Josh, I'm back with another question. The widget is working great, but I'm wondering about reporting now. I found the OOTB reports "Proactive Chat Offer Statistics" and "Proactive Chat Summary Statistics". The latter (based on chats table) produces the expected results, but none of my proactive chat sessions are recognized in "Proactive Chat Offer Statistics" which is based on the widget_stats table. Is this because we are housing the widget code within the KM? If so, is there a way to still gather this data?

      Help is very appreciated!

      Thanks,

      Amanda Balliet

      IBM

    • JN Hutchinson

      Got me there.  I don't track the proactive chats separate from our normal chats, so I've never tried any of the widget_stats table stuff.

      If no one else pops in with any info, I'd open a ticket with RNT and ask them what is going on in this instance.

      Josh

    • Amanda Jo

      Hi Josh,

      I'm back again with another question. We found that since adding the variable to pop the proactive chat on the portal for specific KM, when an agent views the KM in the console using the print preview (we use this instead of opening up the full answer which can take some time), the variable is triggered and a proactive chat is offered to the agent on the console. This is impacting our reporting statistics for proactive chat. Have you run into this issue? If so, how did you handle it?

      Thanks,

      Amanda

    • JN Hutchinson

      Well, haven't run into the reporting problem end because we don't track proactive chats separate from our standard chats.

      I'm not surprised that it tries to trigger, though, since previews will replace the variable with the javascript code.  I'd imagine that when our folks open it in the console, they just ignore the prompt and we don't bother to track how many offers we gave out.

      Sorry.

      Josh