<div class="circle position-absolute"></div>

<h3>Group Chat demo</h3>
<p>Adding to group after auth</p>

 The chat widget is loaded from http://imbachat.com/,
 you can create the same widget integrated with your site. 
 It's free.
<script src="https://api.imbachat.com/imbachat/v1/341/widget"></script>
  window.imbaApi.on('ImbaChat.Auth.Success', () => {
    //unique name of group
    let pipe = "TG_341";
    //Title of group
    let title = "Title of group"
      pipe: pipe,
      title: title,
      is_public: 1,
      type: imbaApi.room_type.conference,
.main-phone {
  background: url(https://imbachat.com/themes/imbachat/assets/img/main-phone.svg)
  width: 380px;
  height: 700px;
  float: right;
  margin-top: -25px;
.position-absolute {
  position: absolute !important;
.circle {
  width: 2000px;
  height: 2000px;
  top: -1200px;
  right: 50px;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(183.15deg, #b2dfff 63.89%, #549cff 97.24%);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.