Bootstrap Snippet SC Support using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container text-center">
    <div class="row">
        <img class="svg-image" width="144" height="60" alt="Standard Chartered" src="https://www.sc.com/global/av/standard_chartered_logo_svg.svg">
    
        <h2>Standard Chartered Customer Support</h2>        
        <div class="round hollow text-center">
        <a href="#" id="addClass" style="color:#26922c;border:#26922c 2px solid"><span class="glyphicon glyphicon-comment"></span> Open in chat </a>
        </div>
        
        <hr>        
         
         <img src="https://clare.ai/images/sc/blur.png"></img>
    </div>
</div>
<iframe class="popup-box chat-popup" id="qnimate"
    width="350"
    height="430"
    src="https://console.api.ai/api-client/demo/embedded/ac7fc073-c37d-4d09-b619-d4a22ee4d814">
</iframe>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body
{
    font-family: 'Open Sans', sans-serif;
    }
.popup-box {
   background-color: #ffffff;
    border: 1px solid #b0b0b0;
    bottom: 0;
    display: none;
    height: 415px;
    position: fixed;
    right: 70px;
    width: 300px;
    font-family: 'Open Sans', sans-serif;
}
.round.hollow {
    margin: 40px 0 0;
}
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  // A $( document ).ready() block.
$(document).ready(function() {
    $('#toolbar').hide();
});
  $(function(){
      
$("#addClass").click(function () {
         $('#qnimate').addClass('popup-box-on');
            });
         
            $("#removeClass").click(function () {
         $('#qnimate').removeClass('popup-box-on');
            });
 })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"SC Support"
Bootstrap 3.3.0 Snippet by kenyeung

Related: See More

Questions / Comments:

"SC Support" Bootstrap 3.3.0 Snippet by kenyeung

Related: See More

Questions / Comments:

"SC Support"
Bootstrap 3.3.0 Snippet by kenyeung