<!DOCTYPE html>
<html>
<head>
<script>
var __cs = __cs || [];
__cs.push(['applyWidgetsOptions', {
'offline_message_generator': {
desktop: {
js: 'offline_message_generator.js',
css: 'offline_message_generator.css',
tpls: {
"offline_message_generator": 'tpls/offline_message_generator.html'
}
}
}
}]);
</script>
<script type="text/javascript" async src="https://app.comagic.ru/widget/js/preview.min.js"></script>
</head>
<body>
<h1>Генератор заявок</h1>
</body>
</html>
@charset "UTF-8";
@keyframes popup-right-life {
0% {
left: 100%;
}
9.09091% {
left: 0%;
}
90.90909% {
left: 0%;
}
100% {
left: 100%;
}
}
@keyframes popup-left-life {
0% {
left: -100%;
}
9.09091% {
left: 0%;
}
90.90909% {
left: 0%;
}
100% {
left: -100%;
}
}
.comagic-widget--hidden {
visibility: hidden;
}
.comagic-unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
[c-draggable="x"] [c-dragger] {
cursor: ew-resize;
}
[c-draggable="x"] [c-dragger] *:not([c-nodragger]) {
cursor: ew-resize;
pointer-events: none;
}
[c-draggable="y"] [c-dragger] {
cursor: ns-resize;
}
[c-draggable="y"] [c-dragger] *:not([c-nodragger]) {
cursor: ns-resize;
pointer-events: none;
}
[c-draggable="xy"] [c-dragger] {
cursor: move;
}
[c-draggable="xy"] [c-dragger] *:not([c-nodragger]) {
cursor: move;
pointer-events: none;
}
.comagic-offline-message-generator__field {
margin: 0 0 5px 0;
position: relative;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error::after, .comagic-offline-message-generator__field.comagic-offline-message-generator__field--error::before {
position: absolute;
pointer-events: none;
font-family: Arial, Helvetica, Trebuchet, sans;
font-size: 12px;
line-height: 12px;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error::before {
content: ' ';
width: 17px;
height: 17px;
right: 6px;
top: 6px;
background-image: url(//app2.comagic.ru/widget/images/common/desktop/error.png);
z-index: 1;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error::after {
position: absolute;
color: red;
width: 100%;
height: 100%;
top: 0;
right: 0;
line-height: 30px;
text-align: right;
padding-right: 31px;
box-sizing: border-box;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error--required::after {
content: 'Необходимо заполнить';
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error--required.comagic-offline-message-generator__field-name::after {
content: 'Укажите имя';
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error--required.comagic-offline-message-generator__field-phone::after {
content: 'Укажите телефон';
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error--required.comagic-offline-message-generator__field-email::after {
content: 'Укажите ваш email';
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error--required.comagic-offline-message-generator__field-personal-info .comagic-offline-message-generator__field__label--personal-info {
color: red;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error--required.comagic-offline-message-generator__field-personal-info::before {
display: none;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error--required.comagic-offline-message-generator__field-personal-info::after {
display: none;
}
.comagic-offline-message-generator__field__input {
text-indent: 1px;
box-sizing: border-box;
border-radius: 4px;
background-color: white;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 1px 0 rgba(212, 212, 212, 0.39);
width: 100%;
line-height: 12px;
font-family: Arial, Helvetica, Trebuchet, sans;
font-size: 12px;
height: 30px;
padding: 6px;
}
.comagic-offline-message-generator__field__input::-webkit-input-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-offline-message-generator__field__input:-moz-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-offline-message-generator__field__input::-moz-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-offline-message-generator__field__input:-ms-input-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-offline-message-generator__field__input:focus {
outline: none;
}
.comagic-offline-message-generator__field__input:focus::-webkit-input-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field__input:focus:-moz-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field__input:focus::-moz-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field__input:focus:-ms-input-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field__input::-ms-clear {
display: none;
}
.comagic-offline-message-generator__field__input.comagic-offline-message-generator__field--error__input {
color: red;
}
.comagic-offline-message-generator__field__input.comagic-offline-message-generator__field--error__input::-webkit-input-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field__input.comagic-offline-message-generator__field--error__input:-moz-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field__input.comagic-offline-message-generator__field--error__input::-moz-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field__input.comagic-offline-message-generator__field--error__input:-ms-input-placeholder {
color: transparent;
}
.comagic-offline-message-generator__field-textarea {
height: 87px;
}
.comagic-offline-message-generator__field-textarea__input {
resize: none;
height: 87px;
text-transform: none;
margin: 0;
cursor: text;
overflow: hidden;
text-align: left;
}
.comagic-offline-message-generator__field-textarea__input:empty:before {
color: #757575;
font-style: italic;
font-size: 12px;
content: attr(placeholder);
display: inline;
}
.comagic-offline-message-generator__field-textarea__input:empty:focus:before {
content: "";
}
.comagic-offline-message-generator__field-textarea__input.comagic-offline-message-generator__field--error__input:empty:before {
color: transparent;
}
.comagic-offline-message-generator__field-group__input, .comagic-offline-message-generator__field-combobox__input {
width: 100%;
background: url(//app2.comagic.ru/widget/images/common/desktop/trigger-combobox.png) no-repeat;
background-position: right 12px center;
background-color: #fff;
}
.comagic-offline-message-generator__field-group__select, .comagic-offline-message-generator__field-combobox__select {
line-height: 32px;
border: 1px solid darkgrey;
font-family: "Open Sans CoMagic", sans-serif;
font-weight: 600;
font-size: 12px;
color: #000;
box-shadow: none;
border-radius: 4px;
height: 30px;
padding: 0 8px;
background-color: white;
box-sizing: border-box;
width: 100%;
opacity: 0;
position: absolute;
top: 0px;
left: 0px;
}
.comagic-offline-message-generator__field-group__select::-webkit-input-placeholder, .comagic-offline-message-generator__field-combobox__select::-webkit-input-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-offline-message-generator__field-group__select:-moz-placeholder, .comagic-offline-message-generator__field-combobox__select:-moz-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-offline-message-generator__field-group__select::-moz-placeholder, .comagic-offline-message-generator__field-combobox__select::-moz-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-offline-message-generator__field-group__select:-ms-input-placeholder, .comagic-offline-message-generator__field-combobox__select:-ms-input-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-offline-message-generator__background-submit-popup {
position: absolute;
overflow: hidden;
pointer-events: none;
display: inline-block;
left: 50%;
margin-left: -147px;
top: -106px;
}
.comagic-offline-message-generator__submit-popup {
margin: 10px;
width: 270px;
height: 92px;
position: relative;
border-radius: 13px;
background-color: rgba(0, 0, 0, 0.5);
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.5)));
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
background-image: -moz-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
background-image: -o-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
background-image: -ms-linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5));
background-repeat: repeat-x;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 4px 4px 14px 0 rgba(0, 0, 0, 0.1);
font-family: Arial, Helvetica, sans-serif;
pointer-events: auto;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
animation-fill-mode: forwards;
}
.comagic-offline-message-generator__submit-popup.comagic-offline-message-generator__submit-popup--success {
color: #B7EB81;
}
.comagic-offline-message-generator__submit-popup.comagic-offline-message-generator__submit-popup--failure {
color: #FF7A77;
}
.comagic-offline-message-generator__submit-popup__title {
font-size: 14px;
margin: 0;
}
.comagic-offline-message-generator__submit-popup__message {
font-size: 12px;
color: #D4D4D4;
margin: 0;
}
.comagic-offline-message-generator__background-submit-popup--top {
top: initial;
bottom: -106px;
}
.comagic-offline-message-generator__submit-popup {
left: -100%;
}
.comagic-offline-message-generator__submit-popup:not(.comagic-offline-message-generator__submit-popup--hidden) {
animation: popup-left-life 3.3s;
}
.comagic-offline-message-generator__submit-popup--right {
left: 100%;
}
.comagic-offline-message-generator__submit-popup--right:not(.comagic-offline-message-generator__submit-popup--hidden) {
animation: popup-right-life 3.3s;
}
.comagic-offline-message-generator-background {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: baseline;
text-align: left;
box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-webkit-box-sizing: content-box;
background-image: none;
height: auto;
position: static;
opacity: .99;
float: none;
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
zoom: 1;
pointer-events: none;
z-index: 100005;
}
.comagic-offline-message-generator-background--top--left {
align-items: flex-start;
justify-content: flex-start;
}
.comagic-offline-message-generator-background--middle--left {
align-items: center;
justify-content: flex-start;
}
.comagic-offline-message-generator-background--bottom--left {
align-items: flex-end;
justify-content: flex-start;
}
.comagic-offline-message-generator-background--top--right {
align-items: flex-start;
justify-content: flex-end;
}
.comagic-offline-message-generator-background--middle--right {
align-items: center;
justify-content: flex-end;
}
.comagic-offline-message-generator-background--bottom--right {
align-items: flex-end;
justify-content: flex-end;
}
.comagic-offline-message-generator-background--middle--center {
align-items: center;
justify-content: center;
pointer-events: auto;
background-color: rgba(0, 0, 0, 0.3);
}
.comagic-offline-message-generator {
transition: transform .3s, visibility .3s;
padding: 10px 30px;
pointer-events: none;
color: white;
}
.comagic-offline-message-generator--submitted {
transition-delay: 3s;
}
.comagic-offline-message-generator--top--left {
transform: translateY(-100%);
}
.comagic-offline-message-generator--middle--left {
margin-bottom: 4%;
transform: translateX(-100%);
}
.comagic-offline-message-generator--bottom--left {
transform: translateY(100%);
}
.comagic-offline-message-generator--top--right {
transform: translateY(-100%);
}
.comagic-offline-message-generator--middle--right {
margin-bottom: 4%;
transform: translateX(100%);
}
.comagic-offline-message-generator--bottom--right {
transform: translateY(100%);
}
.comagic-offline-message-generator--middle--center {
margin-bottom: 4%;
visibility: hidden;
}
.comagic-offline-message-generator--shown {
transform: none;
visibility: visible;
}
.comagic-offline-message-generator--with-image__inner {
margin-top: 78px;
}
.comagic-offline-message-generator__inner {
pointer-events: auto;
box-sizing: border-box;
width: 322px;
border-radius: 8px;
padding: 40px 36px 0 36px;
position: relative;
background-color: #7CB342;
}
.comagic-offline-message-generator__image {
box-sizing: border-box;
width: 156px;
height: 156px;
border: solid 5px #D7DCDE;
border-radius: 85px;
margin: 0 auto 7px auto;
margin-top: -118px;
background-size: 146px 146px;
background-position: center;
}
.comagic-offline-message-generator__close-btn {
cursor: pointer;
position: absolute;
right: 0;
top: 0;
font: 12px Arial, Helvetica, Trebuchet, sans;
height: 26px;
width: 26px;
margin: 3px 4px 0 0;
opacity: .46;
font-size: 32px;
line-height: 28px;
text-align: left;
}
.comagic-offline-message-generator__message {
text-align: center;
font-size: 14px;
line-height: 18px;
font-family: Arial, Helvetica, Trebuchet, sans;
opacity: .8;
word-wrap: break-word;
}
.comagic-offline-message-generator__field {
margin: 6px 0 0 0;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field--error::after {
line-height: 34px;
}
.comagic-offline-message-generator__field.comagic-offline-message-generator__field-textarea {
height: 80px;
}
.comagic-offline-message-generator__field__input {
height: 34px;
text-indent: 1px;
}
.comagic-offline-message-generator__field-textarea__input {
height: 80px;
}
.comagic-offline-message-generator__main-btn-area {
text-align: center;
}
.comagic-offline-message-generator__main-btn {
max-width: 210px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
display: inline-block;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.3);
text-decoration: none;
border-radius: 3px;
padding: 0 20px;
min-width: 0;
cursor: pointer;
line-height: 16px;
margin-top: 15px;
height: 38px;
outline: none;
}
.comagic-offline-message-generator__main-btn:hover {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 100%);
}
.comagic-offline-message-generator__main-btn:active {
background-image: linear-gradient(360deg, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0) 100%);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
.comagic-offline-message-generator__main-btn__inner {
text-decoration: none;
font-family: Arial;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
line-height: 42px;
display: block;
}
.comagic-offline-message-generator__bottom-bar {
overflow: auto;
font-size: 12px;
font-family: Arial, Helvetica, Trebuchet, sans;
text-align: right;
padding: 12px 0 0 0;
}
a.comagic-offline-message-generator__bottom-bar__link {
color: white;
padding-bottom: 2px;
font-size: 10px;
text-decoration: underline;
font-family: Arial, Helvetica, Trebuchet, sans;
opacity: .8;
margin-bottom: 13px;
}
.comagic-offline-message-generator__widget-link {
float: left;
text-align: center;
}
.comagic-offline-message-generator__branding {
float: right;
}
.comagic-offline-message-generator__wrap {
position: relative;
}
.comagic-offline-message-generator__field__input--personal-info {
border: none;
box-shadow: none;
width: 15px;
height: 15px;
float: left;
margin: 3px 3px 3px 4px;
}
.comagic-offline-message-generator__field__label {
font-size: 14px;
}
Comagic.UI.registerViewController('offline_message_generator', function (settings, tpls) {
var offlineMessageGenerator = Comagic.UI.createWidget('offline_message_generator', {
settings: settings,
template: tpls['offline_message_generator'],
id: settings['id'],
_submittedCls: 'comagic-offline-message-generator--submitted',
_errorFieldCls: 'comagic-offline-message-generator__field--error',
_errorInputFieldCls: 'comagic-offline-message-generator__field--error__input',
_DELAY_POPUP_ANIMATION: 3300,
_DELAY_HIDING_ANIMATION: 300,
render: function () {
var scope = this,
combo, comboInput, comboList;
if (settings['is_image'] && !this.imgLoaded) {
this._onImageLoad(settings['image_url'], this.render, this);
return;
}
this.constructor.prototype.render.apply(this, arguments);
this._setPosition();
this.getEl('.comagic-offline-message-generator__close-btn').addEventListener('click', function () {
if (!offlineMessageGenerator.isSubmitted()) {
offlineMessageGenerator.cancel();
}
offlineMessageGenerator.destroy()
});
this.getEl('.comagic-offline-message-generator__main-btn').addEventListener('click', function () {
var values;
if (!scope.isSubmitted() && scope._isValid()) {
values = scope.getValues();
delete values['group'];
combo && (values['group_id'] = comboInput.selectedValue);
scope.submit(values);
}
});
this._iterFields(function (field, input) {
var scope = this,
getClearFn = function (f, i) {
return function () {
scope._clearField(f, i);
}
};
input.addEventListener('focus', getClearFn(field, input));
}, this);
combo = this.getEl('.comagic-offline-message-generator__field-group');
if (combo) {
comboInput = combo.querySelector('input');
comboList = combo.querySelector('select');
comboList.value = null;
comboList.addEventListener('change', function () {
var selectedValue = comboList.value,
selectedNode = [].slice.apply(comboList.children).filter(function (node) {
return node.value == selectedValue;
})[0];
comboInput.value = selectedNode && selectedNode.text;
if (!isNaN(parseFloat(selectedValue)) && isFinite(selectedValue)) {
selectedValue = +selectedValue;
}
scope._clearField(combo, comboInput);
comboInput.selectedValue = selectedValue;
});
comboList.addEventListener('focus', function () {
scope._clearField(combo, comboInput);
});
}
this._initPopup();
},
_initPopup: function () {
this._popup = this.getEl('.comagic-offline-message-generator__submit-popup');
this._popupSubmitInfoTitle = this.getEl('.comagic-offline-message-generator__submit-popup__title');
this._popupSubmitInfoMessage = this.getEl('.comagic-offline-message-generator__submit-popup__message');
},
_showPopupSubmitInfo: function (o) {
this._popupSubmitInfoTitle.innerHTML = o.info.title;
this._popupSubmitInfoMessage.innerHTML = o.info.message;
this._popup.classList.add(
o.success
? 'comagic-offline-message-generator__submit-popup--success'
: 'comagic-offline-message-generator__submit-popup--failure'
);
this._popup.classList.remove('comagic-offline-message-generator__submit-popup--hidden');
},
_onImageLoad: function (url, callback, scope) {
var img = document.createElement('IMG'),
handler = function () {
scope.imgLoaded = true;
callback.apply(scope);
};
img.addEventListener('load', handler);
img.addEventListener('error', handler);
img.src = url;
},
_setPosition: function () {
var backgroundEl = this.getEl(),
el = backgroundEl.querySelector('.comagic-offline-message-generator');
setTimeout(function () {
el.classList.add('comagic-offline-message-generator--shown');
}, 10);
this._centered = settings['v_position'] == 'center' && settings['h_position'] == 'middle';
},
_iterFields: function (callback, scope) {
[].slice.apply(this.getEl().querySelectorAll('.comagic-offline-message-generator__field')).forEach(function (field) {
callback.call(
scope || this,
field,
field && field.querySelector('.comagic-offline-message-generator__field__input')
);
});
},
_isValid: function () {
var scope = this,
errors = this.getErrors() || {},
isValid = true;
this._iterFields(function (field, input) {
var error = errors[input.getAttribute('c-name')];
if (error) {
isValid = false;
scope._setElError(field, scope._errorFieldCls, error);
scope._setElError(input, scope._errorInputFieldCls, error);
}
}, this);
return isValid;
},
_setElError: function (el, errorCls, errorName) {
el.classList.add(errorCls);
el.classList.add(errorCls + '--' + errorName);
},
_clearField: function (field, inner) {
field && this._clearEl(field, this._errorFieldCls);
inner && this._clearEl(inner, this._errorInputFieldCls);
},
_clearEl: function (el, errorCls) {
var errorClasses;
errorClasses = [].slice.apply(el.classList).filter(function (cls) {
return cls == errorCls || cls.indexOf(errorCls + '--') == 0;
});
errorClasses.forEach(function (cls) {
el.classList.remove(cls);
});
},
destroy: function () {
var scope = this,
backgroundEl = this.getEl(),
el = backgroundEl.querySelector('.comagic-offline-message-generator'),
delay = 0;
if (this.isSubmitted()) {
delay = this._DELAY_POPUP_ANIMATION;
} else if (!this._centered) {
delay = this._DELAY_HIDING_ANIMATION;
}
el.classList.remove('comagic-offline-message-generator--shown');
setTimeout(function () {
scope.constructor.prototype.destroy.apply(scope, arguments);
}, delay);
},
submit: function () {
this.getEl('.comagic-offline-message-generator').classList.add(this._submittedCls);
this.constructor.prototype.submit.apply(this, arguments);
}
});
offlineMessageGenerator.render();
offlineMessageGenerator.on('leadhide', function () {
offlineMessageGenerator.destroy();
});
offlineMessageGenerator.on('leadsubmit', function (request) {
offlineMessageGenerator._showPopupSubmitInfo(request);
offlineMessageGenerator.destroy();
});
});
{
"banner_color_mobile": "FFFFFF",
"is_image": false,
"fields": [
{
"is_required": false,
"name": "name",
"title": "Как вас зовут"
},
{
"is_required": false,
"name": "phone",
"title": "Телефон для связи"
},
{
"is_required": false,
"name": "email",
"title": "E-mail для ответов"
},
{
"is_required": false,
"name": "message",
"title": "Вопрос"
}
],
"banner_color": "43A400",
"group_title": "Группы",
"button_color": "E6E9E9",
"button_color_mobile": "00A500",
"image_url": null,
"is_show_on_close": false,
"heading_mobile": null,
"allowed_groups": [
{
"id": 15846,
"name": "Группа 1"
},
{
"id": 15857,
"name": "Группа 2"
},
{
"id": 16305,
"name": "Группа 3"
}
],
"message": "Добрый день! Оставьте свой вопрос здесь, и мы скоро свяжемся с вами, чтобы рассказать обо всем, что вас интересует",
"banner_place": "middle_center",
"widget_link_text": null,
"widget_link_url": null,
"banner_branding_url": "http://www.comagic.ru/?utm_medium=widget&utm_campaign=link_widget",
"banner_branding_text": "CoMagic.ru",
"id": 43042939,
"h_position": "center",
"v_position": "middle",
"is_groups_enabled": true,
"is_personal_info_enabled": false,
"personal_info_text": "Согласен с обработкой персональных данных"
}
<div class="comagic-widget comagic-offline-message-generator-background comagic-offline-message-generator-background--<%= v_position %>--<%= h_position %> comagic-offline-message-generator-background--shown">
<div class="comagic-offline-message-generator__wrap">
<div class="comagic-offline-message-generator__background-submit-popup comagic-offline-message-generator__background-submit-popup--<%= v_position %>">
<div class="comagic-offline-message-generator__submit-popup comagic-offline-message-generator__submit-popup--<%= h_position %> comagic-offline-message-generator__submit-popup--hidden">
<div class="comagic-offline-message-generator__submit-popup__title"></div>
<div class="comagic-offline-message-generator__submit-popup__message"></div>
</div>
</div>
<div class="comagic-offline-message-generator <%= is_image ? 'comagic-offline-message-generator--with-image' : '' %> comagic-offline-message-generator--<%= v_position %>--<%= h_position %>">
<div class="comagic-offline-message-generator__inner <%= is_image ? 'comagic-offline-message-generator--with-image__inner' : '' %>">
<% if (is_image) { %>
<div class="comagic-offline-message-generator__image" style="background-image: url(<%= image_url %>);"></div>
<% } %>
<div class="comagic-offline-message-generator__close-btn">×</div>
<div class="comagic-offline-message-generator__message"><%= message %></div>
<% fields.forEach(function(field) {
if (field.name === 'name') { %>
<div class="comagic-offline-message-generator__field">
<input c-name="name" c-type="field" c-validator="<%= field['is_required'] ? 'required' : '' %>"
class="comagic-offline-message-generator__field__input"
placeholder="<%= field['title'] %><%= field['is_required'] ? '*' : '' %>">
</div>
<%}
if (field.name === 'phone') { %>
<div class="comagic-offline-message-generator__field">
<input c-mask="+7 (___) ___-__-__" c-name="phone" c-type="numberfield"
c-validator="phone <%= field['is_required'] ? 'required' : '' %>"
class="comagic-offline-message-generator__field__input"
placeholder="<%= field['title'] %><%= field['is_required'] ? '*' : '' %>">
</div>
<%}
if (field.name === 'email') {%>
<div class="comagic-offline-message-generator__field">
<input c-name="email" c-type="field"
c-validator="email <%= field['is_required'] ? 'required' : '' %>"
class="comagic-offline-message-generator__field__input"
placeholder="<%= field['title'] %><%= field['is_required'] ? '*' : '' %>">
</div>
<%}
if (field.name === 'message') {%>
<div class="comagic-offline-message-generator__field comagic-offline-message-generator__field-textarea">
<div contenteditable="true" c-name="message" c-type="field"
c-validator="<%= field['is_required'] ? 'required' : '' %>"
class="comagic-offline-message-generator__field__input comagic-offline-message-generator__field-textarea__input"
placeholder="<%= field['title'] %><%= field['is_required'] ? '*' : '' %>"></div>
</div>
<%}
if (field.name === 'custom') {%>
<div class="comagic-offline-message-generator__field">
<input c-name="custom" c-type="field"
c-validator="<%= field['is_required'] ? 'required' : '' %>"
class="comagic-offline-message-generator__field__input"
placeholder="<%= field['title'] %><%= field['is_required'] ? '*' : '' %>">
</div>
<%}
})%>
<% if (is_groups_enabled) { %>
<div class="comagic-offline-message-generator__field comagic-offline-message-generator__field-group">
<input tabindex="-1" unselectable="on" c-name="group" c-type="field" c-validator="required" class="comagic-offline-message-generator__field__input comagic-offline-message-generator__field-group__input" readonly="readonly" placeholder="<%= group_title %>*">
<select tabindex="-1" unselectable="on" class="comagic-offline-message-generator__field-group__select">
<% allowed_groups.forEach(function(group) { %>
<option value="<%= group.id %>" class="comagic-offline-message-generator__field-group__option"><%= group.name %></option>
<% }); %>
</select>
</div>
<% } %>
<% if(is_personal_info_enabled) { %>
<div class="comagic-offline-message-generator__field comagic-offline-message-generator__field-personal-info">
<input type="checkbox"
c-name="personal_info"
c-type="checkbox"
c-validator="required"
checked="checked"
class="comagic-offline-message-generator__field__input comagic-offline-message-generator__field__input--personal-info">
<label class="comagic-offline-message-generator__field__label comagic-offline-message-generator__field__label--personal-info"><%= personal_info_text %></label>
</div>
<% } %>
<div class="comagic-offline-message-generator__main-btn-area">
<a tabindex="0" unselectable="on"
class="comagic-offline-message-generator__main-btn comagic-unselectable"
style="background-color: #<%= button_color %>;">
<span style="color: #<%= Comagic.UI.getContrastColor(button_color) %>;"
class="comagic-offline-message-generator__main-btn__inner">Отправить</span>
</a>
</div>
<div class="comagic-offline-message-generator__bottom-bar">
<% if (widget_link_url && widget_link_text) { %>
<a href="<%= widget_link_url %>" target="_blank" class="comagic-offline-message-generator__bottom-bar__link comagic-offline-message-generator__widget-link"><%= widget_link_text %></a>
<% } %>
<% if (banner_branding_url && banner_branding_text) { %>
<a href="<%= banner_branding_url %>" target="_blank" class="comagic-offline-message-generator__bottom-bar__link comagic-offline-message-generator__branding"><%= banner_branding_text %></a>
<% } %>
</div>
</div>
</div>
</div>
</div>