Всплывающее окно быстрого заказа

Привет! Сегодня на работе была задача сделать всплывающее окно, которое сообщало бы пользователю что есть более простой способ оформить заказ на сайте.

Заказчик хотел сделать такое окно при закрытии вкладки. Вы видели такие, когда кликали не по тем ссылкам, и попадали на сайты казино, с которых не так просто уйти.

Эту идею я сразу забраковал, по одной простой причине: когда я хочу закрыть вкладку, это значит что я хочу закрыть вкладку, а не смотреть предложения от этой компании/продавца/сайта.

Если такие окна и должны быть, они должны быть видны, но не мешать просматривать сайт.

Сначала я сделал окно с белым фоном. Я решил сделать его похожим на окно подписки.

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

Цветовая схема сайта — зеленая, решил попробовать сделать его зеленым, вот что получилось.

Мне понравилась такое оформление, она выделяло окно среди других элементов на этой странице. Заказчик тоже понравилось.

Осталось совсем немного:

— Анимировать появление, для того чтобы пользователь обратил внимание
— Добавить возможность скрывать окно
— Добавить возможность вернуть окно для перехода к быстрому заказу.

Если пользователь передумает и захочет воспользоваться формой быстрого заказа, ему придется искать его где-то еще. Мы можем позаботиться о нем и оставить окно на виду, но чтобы оно не мешало оформлять заказ.

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

В конце чуть поправили внешний вид по пожеланию заказчика.

Если вы ругаетесь на меня за внешний вид окна — напишите мне в комментариях или личном сообщении и я с радостью приму все замечания и предложения.

Исходный код на codepen https://bit.ly/2MbnVgg.