JSFiddle - React, Tailwind, and code Playground

by Brian Houlihan

HTML

<script src="//fpcu--tst.widget.custhelp.com/euf/rightnow/RightNow.Client.js"></script>
<div id="fpcuMortgageContainer">
    <div id="fpcuMortgageLink">
        <div id="fpcuMortgageInfo">
              <img id="availableimage" src= 'https://www.fpcu.org/portals/0/Images/Icons/footer-icon-equalhousing.png'  />
              <img id="unavailableimage" src= 'https://www.fpcu.org/portals/0/Images/Icons/footer-icon-ncua.png'  />
        </div>
    </div>
</div>

CSS

#fpcuMortgageInfo #availableimage{display:none;}
#fpcuMortgageInfo.rn_ChatAvailable #availableimage{display:block;}
#fpcuMortgageInfo #unavailableimage{display:block;}
#fpcuMortgageInfo.rn_ChatAvailable #unavailableimage{display:block;}
#fpcuMortgageInfo #unavailabletext{display:block;position:fixed;left:0px;top:10px;z-index:1200;}
#fpcuMortgageInfo.rn_ChatAvailable #unavailabletext{display:none;}
#fpcuMortgageInfo > span {display:block;position:fixed;left:0px;top:10px;z-index:1200;}

JavaScript

RightNow.Client.Controller.addComponent(
        {
            container_element_id: "fpcuMortgageContainer",
          info_element_id: "fpcuMortgageInfo",
          link_element_id: "fpcuMortgageLink",
          instance_id: "sccl_0",
          module: "ConditionalChatLink",
          wait_threshold: "1800",
          label_available_immediately_template: "avail",
          label_available_with_wait_template: "1111111111111111111111111111",
          label_default: "2222222222222222222222222222222222",
          label_unavailable_busy_template: "33333333333333333333333333",
          label_unavailable_hours: "444444444444444444444444444444",
          type: 7
        },
        "http://fpcu--tst.widget.custhelp.com/ci/ws/get"
    );