<style>
 
@charset "UTF-8";
body {
  font-family: "Open Sans", sans-serif;
}
 
.chat-launcher {
  position: fixed;
  bottom: 60px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 9999;
  
  color: white;
  border-radius: 50%;
  cursor: pointer;
  
}
.chat-launcher:before, .chat-launcher:after {
  font-family: FontAwesome;
  font-size: 34px;
  position: absolute;
  -webkit-transition: transform 180ms linear, opacity 130ms linear;
  transition: transform 180ms linear, opacity 130ms linear;
}
.chat-launcher:before {
  content: "\1F4AC";
  margin: 8px;
  opacity: 1;
  -webkit-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
}
.chat-launcher:after {
  content: "\1F4AC";
  margin: 8px 9px;
  opacity: 0;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);
}
.chat-launcher:hover {
  background: #...;
}
 
 .chat-launcher.active:before {
  opacity: 0;
  -webkit-transform: rotate(70deg) scale(0);
  transform: rotate(70deg) scale(0);
}
.chat-launcher.active:after {
  opacity: 1;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
  .chat-wrapper {
  height: 430px;
  width: 385px;
  display: block;
  border-radius: 5px;
  background: #ebebeb;
  position: fixed;
  right: 20px;
  bottom: 110px;
  z-index: 999;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 22px rgba(0, 0, 0, 0.16);
  -webkit-transition: transform 400ms ease;
  transition: transform 400ms ease;
  -webkit-transform: translateY(130%);
  transform: translateY(130%);
}
.chat-wrapper:before {
  height: 3%;
  padding: 4%;
  font-size: 1.1em;
  line-height: 1em;
  display: block;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background: #666;
  color: white;
  content: attr(data-headline);
}
.chat-wrapper iframe {
  width: 94%;
  height: 84%;
  border: 0;
  border-radius: 5px;
  padding: 3%;
  overflow: hidden;
}
 
  .chat-wrapper.is-open {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
 
</style>  
<div class="chat-launcher"></div>
<div class="chat-wrapper" data-headline="Quasselbox">
<!-- www.speechbox.de: Beginn Code -->
<div class="speechbox-widget" data-boxid="54600" data-popup="true"></div>
<script async src="https://www.speechbox.chat/widget.js" charset="utf-8"></script>
<!-- www.speechbox.de: Ende Code -->
</div>
 

 
<script>
  
$(function () {
    $('.chat-launcher').on('click', function () {
        $('.chat-launcher').toggleClass('active');
        $('.chat-wrapper').toggleClass('is-open');
    });
});  
</script>