Pop-Up Window

Всплывающее окно с виджетом чата для сайта

Это универсальное решение для вашего чата и сайта! Всплывающее окно позволяет общаться в чате абсолютно с любой страницы вашего сайта. Удобно открывать и закрывать. Позволяет установить Вашу собственную кнопку/иконку вызова чата.

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

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

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

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

CSS

HTML
html код устанавливаем в любое удобное место. Предпочтительно ставить код в нижнюю часть сайта перед закрывающим тегом body, для отображения иконки-кнопки вызова чата на всех страницах сайта.

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

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

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

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

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

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

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

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