Chat Uygulama Tasarımı

WebForm Ekranı
<div class="row ana">
        <div class="round hollow text-center">
        <a href="#" id="ekranac"><span class="glyphicon glyphicon-comment"></span> Chat başlat </a>
        </div>      
   div class="ekransınıfı chat-popup" id="ekran">
       <iframe width="450" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" allowtransparency="true" src="https://chatroll.com/embed/chat/1exk?id=x7ppUeaUAQQ&platform=html"></iframe>
       <button data-widget="remove" id="ekrankapat" class="chat-header-button pull-right margin" type="button"><i class="glyphicon glyphicon-off"></i></button>
 
  </div>
</div>



CSS Ekranı
.ekransınıfı{
    background-color: #ffffff;
    bottom: 0;
    display: none;

    position: fixed;
    right: 10px;

}
.round.hollow {
    margin: 40px 0 0;
    
}
.ana{
   
    bottom: 0;
    position: fixed;
    right: 10px;
    padding:15px;
}

.round.hollow a {
    border: 2px solid #ff6701;
    border-radius: 35px;
    color: red;
    color: #ff6701;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow a:hover {
    border: 2px solid #000;
    border-radius: 35px;
    color: red;
    color: #000;
    font-size: 23px;
    padding: 10px 21px;
    text-decoration: none;
}
.popupkutusuac {
    display: block !important;
}


Javascript Ekranı
$(function(){
$("#ekranac").click(function () {
          $('#ekran').addClass('popupkutusuac');
            });
          
            $("#ekrankapat").click(function () {
          $('#ekran').removeClass('popupkutusuac');
            });
  })



Ekran Görüntüsü