ChaTemplate — PopUp окно для виджета чата

Чаще всего такие окна (PopUp window) появляются при совершении определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать услугу» и перед ним всплывает форма заказа. В нашем случае, мы предлагаем использовать всплывающее окно для открытия ваших чатов. Зачем терять место на странице, если можно сделать её более удобной и привлекательной, используя всплывающие окна, чтобы свернуть и развернуть чат?!

Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети: ВК, Фейсбук и другие.

Как же создать всплывающее окно поверх всего сайта?

Все что вам нужно сделать, это скопировать представленный ниже код на ваш сайт и в нем заменить строку здесь ваш HTML-код для вставки чата на сайт на HTML-код виджета своего чата.

CSS


.chatemplate {
  position: fixed;
  width: 32px;
  height: 32px;
  right: 100px;
  bottom: 25px;
  background-image: url(//www.haotu.net/up/2020/128/smile.png);
  background-color: transparent;
  background-position: center center;
  background-repeat; no-repeat;
  background-size:32px;
} 
.parent_popup, 
.parent_popup_click {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
}
.popup, 
.popup_click { 
  background: #fff;
  max-width: 745px;
  width:70%;
  margin: 5% auto;
  padding-bottom: 1px;
  position: relative;
} 
.popup_click::after {  
 position:absolute;  
 bottom:2px;  
 right:5px;  
 content:'ChaTemplate';  
 color:#E1E1E1;  
 font-size:8px;
}
.close {
  position: absolute;
  width: 30px;
  height: 30px;
  top: -20px;
  left: -20px;
  background-image: url(//st1.chatovod.ru/i/orangebox/close.png);
  cursor: pointer;
  position: absolute;
  z-index: 1000;
}

HTML


< !-- всплывающее окно с виджетом чата -->
 < a href="javascript:void(0)" class="chatemplate" onclick="this.nextElementSibling.style.display='block';">
 < div id="parent_popup_click1" class="parent_popup_click">
 < div class="popup_click">
  здесь ваш HTML-код для вставки чата на сайт
 < a class="close" title="Закрыть" onclick="document.getElementById('parent_popup_click1').style.display='none';">
< /a>
 < /div>
 < /div>
< !--/ всплывающее окно с виджетом чата -->

Когда вы установите этот код на свой сайт, в нижней части сайта появится смайлик, открывающий окно вашего чата.

Особенности:

  • виджет чата в модальном окне имеет стандартный размер
  • фиксированная кнопка-смайлик позволяет открыть виджет чата в любой части страницы сайта
  • стильная кнопки закрытия чата

Конечно, мы настоятельно рекомендуем не изменять css стили, однако, если на вашем сайте кнопка-смайл вызова чата смотрится не комильфо, вы можете подключить свои стили самостоятельно, воспользовавшись инструкцией ниже.

Изменить иконку кнопки:

.chatemplate {
  background: url(ссылка на вашу картинку);
}

Поменять положение кнопки на сайте:

  top: ; /* сверху */
  left: ; /* слева */
  right: ; /* справа */
  bottom: ; /* снизу */