Customer Portal

Get Involved. Join the Conversation.


    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
    Add Proactive Chat Widget to Answer


    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=""></script>
    <script type="text/javascript">
    function loadScript() {
    // Modified code from
    var head = document.getElementsByTagName("head")[0];
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "";
    // most browsers
    script.onload = addComponent;
    // IE7
    script.onreadystatechange = function() {
    if (this.readyState == "complete") {

    function 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



    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.


    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.


    • Gary Ranta

      Hi all.  I am using the code above to launch a proactive chat on one specific answer.  It works great in every browser but Chrome.  It does pop in Chrome but is locked and none of the options can be accessed.  Has anyone using this experienced this problem and if so can you share how you over came it?




    • JN Hutchinson

      I quit using this code a while back, but it *used* to work in Chrome.  I'd check the dev tools in Chrome to see if there is a javascript error somewhere that is stopping the code from running.


    • Gary Ranta



      Thanks for the response.  The code works in Chrome and I am not getting a java error.  The behavior I am seeing in Chrome is that the mask is loading over the chat widget so users cannot accept a chat.  If you are no longer using this code, do you know of a  better way in CP2 to load a proactive chat widget on specific answers?




    • JN Hutchinson

      Hmm.  Not sure what mask you are referring to, but if something else is covering the pop up, you could try changing the pop up's location by changing the style settings in the myDiv code.

      We don't use a pop up chat anymore, so I can't get very specific.


    • Gary Ranta


      This is the line that seems to be generating the problem.  Normally and in all other browsers this only effects the page behind the widget.  However in Chrome this covering both the widget and the answer behind it.  

      <div class="mask" id="rn_Dialog_0_mask" style="z-index: 9998; height: 1234px; width: 1530px; display: block;">&nbsp;</div>

      any ideas would be appreciated.