Customer Portal

Get Involved. Join the Conversation.

Topic

    Lavish Kumar
    How to hide styling when chat is NOT available?
    Topic posted June 2, 2015 by Lavish KumarGold Medal: 3,500+ Points 
    674 Views, 48 Comments
    Title:
    How to hide styling when chat is NOT available?
    Content:

    So, I have added styling to chat conditional link and configured it to show only when someone is "online".

    Issue: when nobody is online, the styling is still showing up even when everything is in conditional widget, why?

    Any way to hide the styling when no one is online?

    Please see the code attached

    Version:
    Feb 2014 - CP3
    Code Snippet:

    Comment

    • Anuj Behl

      Lavish, with your Conditional tag you are checking for MOD_CHAT_ENABLED config verb and not if the agents are online. Moreover, Conditional chat link widget will hide irrespective of condition tag since you have hide_on_unavailable as true.

      Use chat_available attribute of condition tag to check chat availability.

      -Anuj

    • Anurag Mittal

      Anuj, Description say Chat_available will only check chat hours not whether agents are available or not, does it work other way too? 

      chat_available

      • Name: Chat Available
      • Type: BOOL
      • Description: Denotes whether the current time is within Chat operating hours and not currently a holiday.

       

    • Anuj Behl

      I don't think it would check for agents being online. Since condition tag is only checked once on server while the page loads, it won't be much helpful to check for agents availability as that can change very frequently. ConditionalChatLink widget. on the other hand, pings for chat availability every x seconds, making sure real-time agent availability is returned.

      Additionally, ConditionalChatLink widget's look and feel is already customizable by simply editing the ConditionalChatLink CSS file, if the only ask here is to style this widget.

    • Lavish Kumar

      So, what should I put in this attribute?

      <rn:condition chat_available=""WHAT_GOES_HERE???>
                           <div style="background-color:orange;height:50px;width:200px;">
                           <li><rn:widget path="chat/ConditionalChatLink" min_sessions_avail="1" hide_on_unavailable="True" label_available_immediately_template="Chat is available"></li>     
                          </div>                    
                          </rn:condition>

    • Lavish Kumar

      FYI...

      Requirement: My requirement is "ONLY" show live chat link on the page if someone is online. If nobody is only, do no show anything.

      But when I want to show, I want to add styling too it. Currently, when nobody is online, styling is showing up.

    • Anuj Behl

      TRUE, if you want to check whether the current time is within Chat operating hours and not currently a holiday, and you would still like to keep the styling on the page.



      Other options is to move styling in the ConditionalChatLink CSS file, as mentioned above.

    • Anuj Behl

      CSS file can be found here - http://<site>/dav/customer/assets/themes/<theme>/widgetCss/ConditionalChatLink.css

    • Lavish Kumar

      So, I just checked all the CSS in all themes and I can't find "ConditionalChatLink.css". All I found is: ChatLaunchButton.css

      I have ul like this on homepage:

      <ul>

      <li> link 1 here </li>

      <li> link 2 here </li>

      <li> link 3 here </li>

       <rn:condition config_check="MOD_CHAT_ENABLED == true">
                           
                           <li><rn:widget path="chat/ConditionalChatLink" min_sessions_avail="1" hide_on_unavailable="True" label_available_immediately_template="Chat is available"></li>     
                               
                          </rn:condition>

      </ul>

       

      So, basically each li is a box and I want to display chat as <li>. So, when I am online it shows perfectly fine but when I am not online, it still shows the styling of li.

      Any other way for fix this or workaround for this problem?

      "TRUE" for chat_available is not doing anything. I still see styling of <li> when I am not online.

       

       

    • Lavish Kumar

      Here is the screenshot on web page (attached). You can see when I am "NOT" online, it is showing a white background line.

       

    • Lavish Kumar

      So, finally I found the css in this location: assets/css/syndicated_widgets/standard

      I added the style and I don't see any change at all on webpage? It seems like the css is not even being used.

       

      .rn_ConditionalChatLink .rn_ChatAvailable
      {
          display: block;
      }

      .rn_ConditionalChatLink .rn_ChatAvailable{
      background-color:#ffffff;height:50px;width:200px;
      display: block;
      }

    • Anuj Behl

      Hi,

      The CSS file you found is for Syndicated widget. For this particular widget, you can create the CSS file yourself at path mentioned above and put your styling there.

      To solve your issue, either you can use CSS to customize the look without using <li> or customize the widget and move <li> inside the widget's view file.

      -Anuj

    • Lavish Kumar

      If I go with 2nd option (customize widget).

      I have already trying adding styling to view file here: core/widgets/standard/chat/ConditionalChatLink

       

      For testing, I tried adding <h1> like this BUT I don't see my h1 heading in the output, why?

       

      <?php /* Originating Release: February 2014 */?>

      <h1>This is test</h1>
      <div id="rn_<?=$this->instanceID;?>" class="<?= $this->classList ?>">

      <h1>Second Test</h1>
          <rn:block id="top"/>
          <rn:block id="bottom"/>
      </div>

       

      Shouldn't I be getting H1 with the live chat link?

    • Anuj Behl

      Files in cp/core/ directory are not editable. You'll have to customize the widget and then edit view file in that widget.

    • Anuj Behl

      Use Widget Builder to create custom widget.

    • Lavish Kumar

      I would just like to confirm. In order to create a copy of this "STANDARD" widget. Do I need to select extend widget? Because I have done that but I don't get the same view as standard since I get the blank view page.

      How I can create an exact copy of "standard" widget to "custom" widget and then I can add <li> in the custom widget's view page?

      What options I need to select on widget builder page to create a standard widget copy?