@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-call-generator__field {
margin: 0 0 5px 0;
position: relative;
}
.comagic-call-generator__field.comagic-call-generator__field--error::after, .comagic-call-generator__field.comagic-call-generator__field--error::before {
position: absolute;
pointer-events: none;
font-family: Arial, Helvetica, Trebuchet, sans;
font-size: 12px;
line-height: 12px;
}
.comagic-call-generator__field.comagic-call-generator__field--error::before {
content: ' ';
width: 17px;
height: 17px;
right: 6px;
top: 6px;
background-image: url(//app.comagic.ru/widget/images/common/desktop/error.png);
z-index: 1;
}
.comagic-call-generator__field.comagic-call-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-call-generator__field.comagic-call-generator__field--error--required::after {
content: 'Необходимо заполнить';
}
.comagic-call-generator__field.comagic-call-generator__field--error--required.comagic-call-generator__field-name::after {
content: 'Укажите имя';
}
.comagic-call-generator__field.comagic-call-generator__field--error--required.comagic-call-generator__field-phone::after {
content: 'Укажите телефон';
}
.comagic-call-generator__field.comagic-call-generator__field--error--required.comagic-call-generator__field-email::after {
content: 'Укажите ваш email';
}
.comagic-call-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-call-generator__field__input::-webkit-input-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-call-generator__field__input:-moz-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-call-generator__field__input::-moz-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-call-generator__field__input:-ms-input-placeholder {
font-style: italic;
font-size: 12px;
padding-bottom: 5px;
color: #757575;
opacity: 1;
}
.comagic-call-generator__field__input:focus {
outline: none;
}
.comagic-call-generator__field__input:focus::-webkit-input-placeholder {
color: transparent;
}
.comagic-call-generator__field__input:focus:-moz-placeholder {
color: transparent;
}
.comagic-call-generator__field__input:focus::-moz-placeholder {
color: transparent;
}
.comagic-call-generator__field__input:focus:-ms-input-placeholder {
color: transparent;
}
.comagic-call-generator__field__input::-ms-clear {
display: none;
}
.comagic-call-generator__field__input.comagic-call-generator__field--error__input {
color: red;
}
.comagic-call-generator__field__input.comagic-call-generator__field--error__input::-webkit-input-placeholder {
color: transparent;
}
.comagic-call-generator__field__input.comagic-call-generator__field--error__input:-moz-placeholder {
color: transparent;
}
.comagic-call-generator__field__input.comagic-call-generator__field--error__input::-moz-placeholder {
color: transparent;
}
.comagic-call-generator__field__input.comagic-call-generator__field--error__input:-ms-input-placeholder {
color: transparent;
}
.comagic-call-generator__field-textarea {
height: 87px;
}
.comagic-call-generator__field-textarea__input {
resize: none;
height: 87px;
text-transform: none;
margin: 0;
cursor: text;
overflow: hidden;
text-align: left;
}
.comagic-call-generator__field-textarea__input:empty:before {
color: #757575;
font-style: italic;
font-size: 12px;
content: attr(placeholder);
display: inline;
}
.comagic-call-generator__field-textarea__input:empty:focus:before {
content: "";
}
.comagic-call-generator__field-textarea__input.comagic-call-generator__field--error__input:empty:before {
color: transparent;
}
.comagic-call-generator__field-group__input, .comagic-call-generator__field-combobox__input {
width: 100%;
background: url(//app.comagic.ru/widget/images/common/desktop/trigger-combobox.png) no-repeat;
background-position: right 12px center;
background-color: #fff;
}
.comagic-call-generator__field-group__select, .comagic-call-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-call-generator__field-group__select::-webkit-input-placeholder, .comagic-call-generator__field-combobox__select::-webkit-input-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-call-generator__field-group__select:-moz-placeholder, .comagic-call-generator__field-combobox__select:-moz-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-call-generator__field-group__select::-moz-placeholder, .comagic-call-generator__field-combobox__select::-moz-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-call-generator__field-group__select:-ms-input-placeholder, .comagic-call-generator__field-combobox__select:-ms-input-placeholder {
font-size: 12px;
font-weight: normal;
font-style: italic;
}
.comagic-call-generator-hidden {
display: none;
}
.comagic-call-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;
align-items: center;
justify-content: center;
z-index: 100005;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
zoom: 1;
background-color: rgba(0, 0, 0, 0.3);
}
.comagic-call-generator {
position: relative;
box-sizing: border-box;
background-size: contain;
background: #F8F8F8;
padding: 38px 25px 38px 50px;
border: none;
border-radius: 8px;
width: 700px;
min-width: 700px;
min-height: 340px;
max-height: 350px;
box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.5);
margin-bottom: 4%;
}
.comagic-call-generator--with-group {
min-height: 423px;
max-height: 423px;
}
.comagic-call-generator__close-btn {
font: 12px Arial, Helvetica, Trebuchet, sans;
height: 26px;
width: 26px;
color: #868686;
opacity: .46;
font-size: 32px;
line-height: 28px;
position: absolute;
top: 6px;
right: 5px;
cursor: pointer;
}
.comagic-call-generator__image-handset,
.comagic-call-generator__image-alarm-clock {
height: 145px;
width: 145px;
border: 5px solid #d7dcde;
border-radius: 77px;
background-size: contain;
background-repeat: no-repeat;
}
.comagic-call-generator__image-handset {
background-image: url(//app.comagic.ru/widget/images/lead/desktop/retention-handset.png);
margin-top: 28px;
}
.comagic-call-generator__image-alarm-clock {
box-sizing: border-box;
margin: auto;
background-image: url(//app.comagic.ru/widget/images/lead/desktop/retention-alarm-clock.png);
}
.comagic-call-generator__title {
font-family: "Open Sans CoMagic", sans-serif;
font-weight: 300;
color: #344b53;
font-size: 28px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 100%;
min-height: 60px;
max-height: 85px;
display: block;
vertical-align: middle;
}
.comagic-call-generator__message {
color: #666;
font-family: "Open Sans CoMagic", sans-serif;
font-weight: 400;
font-size: 13px;
text-overflow: ellipsis;
overflow: hidden;
min-height: 30px;
max-height: 72px;
margin: 7px 0 21px;
line-height: normal;
}
.comagic-call-generator__main-btn {
max-width: 225px;
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);
height: 42px;
text-decoration: none;
border-radius: 3px;
padding: 0 20px;
min-width: 0;
cursor: pointer;
line-height: 16px;
}
.comagic-call-generator__main-btn:hover {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 100%);
}
.comagic-call-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-call-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-call-generator__field {
margin-bottom: 20px;
}
.comagic-call-generator__field.comagic-call-generator__field--error::after {
left: 0;
line-height: 42px;
font-weight: bold;
}
.comagic-call-generator__field__input {
line-height: 32px;
font-family: "Open Sans CoMagic", sans-serif;
font-weight: 600;
font-size: 18px;
height: 42px;
padding: 0 8px;
border: 1px solid darkgrey;
box-shadow: none;
text-indent: 1px;
}
.comagic-call-generator__field__input::-webkit-input-placeholder {
font-size: 14px;
font-weight: normal;
}
.comagic-call-generator__field__input:-moz-placeholder {
font-size: 14px;
font-weight: normal;
}
.comagic-call-generator__field__input::-moz-placeholder {
font-size: 14px;
font-weight: normal;
}
.comagic-call-generator__field__input:-ms-input-placeholder {
font-size: 14px;
font-weight: normal;
}
.comagic-call-generator__block-delayed-call {
display: flex;
}
.comagic-call-generator__block-delayed-call > div {
width: 154px;
}
.comagic-call-generator__block-delayed-call .comagic-call-generator__field-delayed-call-time {
margin-left: 8px;
}
.comagic-call-generator__block-delayed-call .comagic-call-generator__field-group__select {
width: 154px;
}
.comagic-call-generator__block-delayed-call .comagic-call-generator__field-group.comagic-call-generator__field--error--required::after {
content: '';
width: 154px;
}
.comagic-call-generator__field.comagic-call-generator__field--error::before {
top: 12px;
}
.comagic-call-generator__field-phone__input {
width: 175px;
}
.comagic-call-generator__field-phone {
margin-bottom: 10px;
}
.comagic-call-generator__field-phone.comagic-call-generator__field--error::before {
left: 152px;
}
.comagic-call-generator__field-phone.comagic-call-generator__field--error--required::before {
left: 152px;
}
.comagic-call-generator__field-phone.comagic-call-generator__field--error--required::after {
width: 175px;
}
.comagic-call-generator__field-group {
width: 317px;
}
.comagic-call-generator__field-group.comagic-call-generator__field--error--required::after {
width: 317px;
}
.comagic-call-generator__field-group__select {
height: 42px;
width: 317px;
font-size: 14px;
}
.comagic-call-generator__field-group__option {
font-size: 18px;
}
.comagic-call-generator__body {
transition: opacity 0.3s;
opacity: 1;
position: relative;
}
.comagic-call-generator__body--transparent {
opacity: 0;
}
.comagic-call-generator__body-reverse {
text-align: center;
}
.comagic-call-generator__body__left-part {
width: 180px;
float: left;
}
.comagic-call-generator__body__right-part {
margin-left: 180px;
padding: 24px 0 0 0;
}
.comagic-call-generator__body__bottom-part {
position: absolute;
margin-left: 180px;
bottom: -25px;
}
.comagic-call-generator__body-reverse__title {
margin: 12px 0 14px 0;
height: 27px;
}
.comagic-call-generator__bottom-bar {
position: absolute;
bottom: 14px;
left: 230px;
right: 20px;
}
.comagic-call-generator__linkbutton {
line-height: 14px;
color: #000;
opacity: .5;
font-size: 12px;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
cursor: pointer;
}
a.comagic-call-generator__link {
line-height: 14px;
color: #000;
opacity: .5;
font-size: 12px;
text-decoration: underline;
font-family: Arial, Helvetica, sans-serif;
white-space: nowrap;
position: absolute;
left: 0;
bottom: 0;
}
a.comagic-call-generator__personal {
left: 0;
}
a.comagic-call-generator__branding {
left: auto;
right: 0;
}
Comagic.UI.registerViewController('call_generator', function (settings, tpls) {
var callGenerator = Comagic.UI.createWidget('call_generator', {
settings: settings,
id: settings['id'],
template: tpls['call_generator'],
_errorFieldCls: 'comagic-call-generator__field--error',
_errorInputFieldCls: 'comagic-call-generator__field--error__input',
_fields: {},
_delayedCallProps: {},
_delayedCallBlockState: null,
_getBodies: function () {
return [].slice.apply(this.getEl().querySelectorAll('.comagic-call-generator__body'));
},
_switchMode: function (title, message) {
var bb = this._getBodies(),
handler = function () {
bb[0].removeEventListener('transitionend', handler);
bb[0].classList.add('comagic-call-generator-hidden');
bb[1].classList.remove('comagic-call-generator__body--transparent');
};
bb[0].addEventListener('transitionend', handler);
bb[0].classList.add('comagic-call-generator__body--transparent');
bb[1].classList.remove('comagic-call-generator-hidden');
if (title && message) {
bb[1].querySelector('.comagic-call-generator__body-reverse__title').innerHTML = title;
bb[1].querySelector('.comagic-call-generator__message').innerHTML = message;
}
},
render: function () {
var scope = this,
combo, comboInput, comboList, phone, phoneInput;
this.constructor.prototype.render.apply(this, arguments);
this.getEl('.comagic-call-generator__close-btn').addEventListener('click', function () {
if (!scope.isSubmitted()) {
scope.cancel();
}
scope.destroy()
});
this.getEl('.comagic-call-generator__main-btn').addEventListener('click', function () {
var values;
if (scope._isValid()) {
values = scope.getValues();
delete values['group'];
combo && (values['group_id'] = comboInput.selectedValue);
scope.submit(values);
}
});
combo = this.getEl('.comagic-call-generator__field-group-lead');
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._iterFields(function (field, input) {
var scope = this,
getClearFn = function (f, i) {
return function () {
scope._clearField(f, i);
}
};
input.addEventListener('focus', getClearFn(field, input));
}, this);
this._initDelayedCallBlock();
},
_initDelayedCallBlock: function () {
if (!this.settings.delayed_call_times) {
return;
}
this.delayedCallBlockEl = this.getEl('.comagic-call-generator__block-delayed-call');
this.delayedCallBlockButton = this.getEl('.comagic-call-generator__linkbutton-delayed-call');
this._fields['delayed_call_day'] = this.getEl('.comagic-call-generator__field-delayed-call-day');
this._delayedCallProps.dayFakeSelectField = this.getEl('.comagic-call-generator__field-delayed-call-day__input');
this._delayedCallProps.daySelectField = this.getEl('.comagic-call-generator__field-delayed-call-day__select');
this._fields['delayed_call_time'] = this.getEl('.comagic-call-generator__field-delayed-call-time');
this._delayedCallProps.timeFakeSelectField = this.getEl('.comagic-call-generator__field-delayed-call-time__input');
this._delayedCallProps.timeSelectField = this.getEl('.comagic-call-generator__field-delayed-call-time__select');
if (this.delayedCallBlockButton) {
this._setDelayedCallBlockState(false);
this.delayedCallBlockButton.addEventListener('click', function () {
callGenerator._setDelayedCallBlockState(!callGenerator._delayedCallBlockState);
});
}
this._delayedCallProps.daySelectField.addEventListener('change', function () {
var index = callGenerator._delayedCallProps.daySelectField.selectedIndex,
selectedOption = callGenerator._delayedCallProps.daySelectField.options[index];
if (selectedOption && selectedOption.text !== callGenerator._delayedCallProps.dayFakeSelectField.value) {
callGenerator._delayedCallProps.dayFakeSelectField.value = selectedOption.text;
var options = '';
for (var i = 0; i < callGenerator.settings.delayed_call_times[index].times.length; i++) {
options += '<option value=' + callGenerator.settings.delayed_call_times[index].times[i] + '>' +
Comagic.UI.toTimeString(new Date(callGenerator.settings.delayed_call_times[index].times[i])) + '</option>';
}
callGenerator._delayedCallProps.timeSelectField.innerHTML = options;
callGenerator._delayedCallProps.timeSelectField.value = null;
callGenerator._delayedCallProps.timeFakeSelectField.value = '';
callGenerator._clearField(callGenerator._fields['delayed_call_time'], callGenerator._delayedCallProps.timeFakeSelectField);
}
callGenerator._clearField(callGenerator._fields['delayed_call_day'], callGenerator._delayedCallProps.dayFakeSelectField);
});
this._delayedCallProps.timeSelectField.addEventListener('change', function () {
var index = callGenerator._delayedCallProps.timeSelectField.selectedIndex,
selectedOption = callGenerator._delayedCallProps.timeSelectField.options[index];
if (selectedOption) {
callGenerator._delayedCallProps.timeFakeSelectField.value = selectedOption.text;
}
callGenerator._clearField(callGenerator._fields['delayed_call_time'], callGenerator._delayedCallProps.timeFakeSelectField);
});
var options = '';
for (var i = 0; i < this.settings.delayed_call_times.length; i++) {
options += '<option>' + Comagic.UI.toDateString(new Date(callGenerator.settings.delayed_call_times[i].date)) + '</option>';
}
this._delayedCallProps.daySelectField.innerHTML = options;
this._delayedCallProps.daySelectField.value = null;
},
_setDelayedCallBlockState: function (enabled) {
this._delayedCallBlockState = enabled;
this.delayedCallBlockButton.innerText = enabled ? 'Звонок сейчас' : 'Выбрать другое время';
this.delayedCallBlockEl.style.display = enabled ? 'flex' : 'none';
this._delayedCallProps.timeSelectField[enabled ? 'removeAttribute' : 'setAttribute']('c-disabled', '');
this._delayedCallProps.timeSelectField.value = null;
this._delayedCallProps.timeSelectField.innerHTML = '';
this._delayedCallProps.timeFakeSelectField.value = '';
this._delayedCallProps.daySelectField.value = null;
this._delayedCallProps.dayFakeSelectField.value = '';
this._delayedCallProps.daySelectField[enabled ? 'removeAttribute' : 'setAttribute']('c-disabled', '');
},
_iterFields: function (callback, scope) {
[].slice.apply(this.getEl().querySelectorAll('.comagic-call-generator__field')).forEach(function (field) {
callback.call(
scope || this,
field,
field && field.querySelector('.comagic-call-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, input) {
field && this._clearEl(field, this._errorFieldCls);
input && this._clearEl(input, 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);
});
}
});
callGenerator.render();
callGenerator.on('leadhide', function () {
callGenerator.destroy();
});
callGenerator.on('leadsubmit', function (response) {
callGenerator._switchMode(response.info.title, response.info.message);
});
});
<!DOCTYPE html>
<html>
<head>
<script>
var __cs = __cs || [];
__cs.push(['applyWidgetsOptions', {
'call_generator': {
desktop: {
js: 'call_generator.js',
css: 'call_generator.css',
tpls: {
"call_generator": 'tpls/call_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>
{
"image_url": null,
"allowed_groups": [
{
"id": 15846,
"name": "Группа 1"
},
{
"id": 15857,
"name": "Группа 2"
},
{
"id": 16305,
"name": "Группа 3"
}
],
"group_title": "Группы",
"fields": [],
"delayed_call_times": false,
"is_schedule_active": true,
"banner_color": "FFD441",
"available_connect_ways": [
"sitephone",
"chat",
"offline_message"
],
"site_id": 26760,
"preferred_connect_way": "chat",
"banner_skin": null,
"id": 5217,
"inactive_schedule_banner_text": "Мы ценим Ваше время и готовы помочь найти нужную Вам информацию. Если Вы готовы, мы обсудим это по телефону.",
"banner_branding_text": "CoMagic.ru",
"banner_branding_url": "http://www.comagic.ru/?utm_medium=widget&utm_campaign=link_widget",
"is_answer_countdown_timeout": false,
"banner_text": "Мы ценим Ваше время и готовы помочь найти нужную Вам информацию. Если Вы готовы, мы обсудим это по телефону.",
"staff_group_title": "Группы",
"inactive_schedule_banner_title": "Хотите, мы перезвоним в течение минуты?",
"is_delayed_call_enabled": false,
"answer_countdown_timeout": 60,
"scenario_id": 13110,
"button_color": "43A400",
"image_id": null,
"button_color_mobile": "00A500",
"is_always_displayed": false,
"banner_color_mobile": "FFFFFF",
"banner_title": "Хотите, мы перезвоним в течение минуты?",
"button_text": "Жду звонка",
"is_image": false,
"app_id": 1103,
"widget_link_text": false,
"widget_link_url": false,
"is_groups_enabled": true
}
<div class="comagic-widget comagic-call-generator-background">
<div class="comagic-call-generator <%= is_groups_enabled ? 'comagic-call-generator--with-group' : '' %>">
<div class="comagic-call-generator__close-btn">×</div>
<div class="comagic-call-generator__body">
<div class="comagic-call-generator__body__left-part">
<div class="comagic-call-generator__image-handset"<% if (is_image) { %>style="background-image: url('<%= image_url %>')"<% } %>></div>
</div>
<div class="comagic-call-generator__body__right-part">
<div class="comagic-call-generator__title"><%= banner_title %></div>
<div class="comagic-call-generator__message"><%= banner_text %></div>
<% if (is_groups_enabled) { %>
<div class="comagic-call-generator__field comagic-call-generator__field-group comagic-call-generator__field-group-lead">
<input tabindex="-1" unselectable="on" c-name="group" c-type="field" c-validator="required" class="comagic-call-generator__field__input comagic-call-generator__field-group__input" readonly="readonly" placeholder="<%= group_title %>">
<select tabindex="-1" unselectable="on" class="comagic-call-generator__field__select comagic-call-generator__field-group__select">
<% allowed_groups.forEach(function(group) { %><option value="<%= group.id %>" class="comagic-call-generator__field-group__option"><%= group.name %></option></li><% }); %>
</select>
</div>
<% } %>
<% if (delayed_call_times) { %>
<div class="comagic-call-generator__block-delayed-call">
<div class="comagic-call-generator__field comagic-call-generator__field-group comagic-call-generator__field-delayed-call-day">
<input tabindex="-1" unselectable="on" c-name="delayed_call_day" class="comagic-call-generator__field__input comagic-call-generator__field-group__input comagic-call-generator__field-delayed-call-day__input"
placeholder="День">
<select tabindex="-1" unselectable="on" class="comagic-call-generator__field__select comagic-call-generator__field-group__select comagic-call-generator__field-delayed-call-day__select"
c-type="field"
c-name="delayed_call_day"
c-validator="required">
</select>
</div>
<div class="comagic-call-generator__field comagic-call-generator__field-group comagic-call-generator__field-delayed-call-time">
<input tabindex="-1" unselectable="on" c-name="delayed_call_time" class="comagic-call-generator__field__input comagic-call-generator__field-group__input comagic-call-generator__field-delayed-call-time__input"
placeholder="Время">
<select tabindex="-1" unselectable="on" class="comagic-call-generator__field__select comagic-call-generator__field-group__select comagic-call-generator__field-delayed-call-time__select"
c-type="field"
c-name="delayed_call_time"
c-validator="required">
</select>
</div>
</div>
<% } %>
<div class="comagic-call-generator__field comagic-call-generator__field-phone">
<input c-mask="+7 (___) ___-__-__" c-name="phone" c-type="numberfield" c-validator="required phone" class="comagic-call-generator__field__input comagic-call-generator__field-phone__input" type="tel" placeholder="Введите номер">
<div class="comagic-call-generator__main-btn comagic-unselectable" style="background-color: #<%= button_color %>;"><span style="color: #<%= Comagic.UI.getContrastColor(button_color) %>;" class="comagic-call-generator__main-btn__inner"><%= button_text %></span></div>
</div>
<% if (delayed_call_times && is_schedule_active) { %>
<a class="comagic-call-generator__linkbutton comagic-call-generator__linkbutton-delayed-call"></a>
<% } %>
</div>
</div>
<div class="comagic-call-generator__body comagic-call-generator__body-reverse comagic-call-generator__body--transparent comagic-call-generator-hidden">
<div class="comagic-call-generator__image-alarm-clock"></div>
<div class="comagic-call-generator__body-reverse__title">Ожидайте звонка</div>
<div class="comagic-call-generator__message">Сотрудник свяжется с Вами в самое ближайшее время</div>
</div>
<div class="comagic-call-generator__bottom-bar">
<% if (banner_branding_url && banner_branding_text) { %>
<a href="<%= banner_branding_url %>" target="_blank" class="comagic-call-generator__link comagic-call-generator__branding"><%= banner_branding_text %></a>
<% } %>
</div>
</div>
</div>