comagic/widget_preview: null

<!DOCTYPE html>
<html>
    <head>
        <script>
            var __cs = __cs || [];
            __cs.push(['applyWidgetsOptions', {
                'personal_form': {
                    desktop: {
                        js: 'personal_form.js',
                        css: 'personal_form.css',
                        tpls: {
                            "personal_form": 'tpls/personal_form.html'
                        }
                    }
                }
            }]);
        </script>
        <script type="text/javascript" async src="https://app.comagic.ru/widget/js/preview.min.js"></script>
    </head>
    <body>
        <h1>Персональная форма</h1>
    </body>
</html>

@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-personal-form-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-personal-form-background--top--left {
    align-items: flex-start;
    justify-content: flex-start;
}

.comagic-personal-form-background--top--right {
    align-items: flex-start;
    justify-content: flex-end;
}

.comagic-personal-form-background--bottom--left {
    align-items: flex-end;
    justify-content: flex-start;
}

.comagic-personal-form-background--bottom--right {
    align-items: flex-end;
    justify-content: flex-end;
}

.comagic-personal-form-background--middle--left {
    align-items: center;
    justify-content: flex-start;
}

.comagic-personal-form-background--middle--right {
    align-items: center;
    justify-content: flex-end;
}

.comagic-personal-form-background--middle--center {
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.3);
}

.comagic-personal-form--top--left {
    transform: translateY(-110%);
}

.comagic-personal-form--top--right {
    transform: translateY(-110%);
}

.comagic-personal-form--middle--left {
    margin-bottom: 4%;
    transform: translateX(-110%);
}

.comagic-personal-form--middle--right {
    margin-bottom: 4%;
    transform: translateX(110%);
}

.comagic-personal-form--middle--center {
    margin-bottom: 4%;
}

.comagic-personal-form--bottom--left {
    transform: translateY(110%);
}

.comagic-personal-form--bottom--right {
    transform: translateY(110%);
}

.comagic-personal-form {
    min-height: 100px;
    width: 505px;
    border-radius: 8px;
    box-shadow: 0 3px 30px 0 rgba(0, 0, 0, 0.5);
    padding-bottom: 42px;
    text-align: center;
    pointer-events: auto;
    transition: transform .3s;
    background-color: #CFCCCC;
    color: black;
    position: relative;
}

.comagic-personal-form--showed {
    transform: none;
}

.comagic-personal-form__image__wrap {
    min-height: 25px;
    margin-bottom: 22px;
    text-align: left;
}

.comagic-personal-form__image {
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.comagic-personal-form__close-btn {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}

.comagic-personal-form__close-btn-intense {
    background-image: url(//app.comagic.ru/widget/images/lead/desktop/lead-close-button.png);
    height: 26px;
    width: 26px;
    margin-top: 11px;
    margin-right: 11px;
}

.comagic-personal-form__close-btn-default {
    font: 12px Arial, Helvetica, Trebuchet, sans;
    height: 26px;
    width: 26px;
    margin-top: 3px;
    margin-right: 0;
    color: #868686;
    opacity: .46;
    font-size: 32px;
    line-height: 28px;
    text-align: left;
}

.comagic-personal-form__title {
    font-family: "Open Sans CoMagic", sans-serif;
    font-weight: 300;
    font-size: 28px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 33px;
    padding: 0 45px;
    text-align: center;
}

.comagic-personal-form__message {
    font-family: "Open Sans CoMagic", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 90px;
    margin: 9px 0 21px;
    padding: 0 45px;
    text-align: center;
}

.comagic-personal-form__main-btn {
    display: inline-block;
    background: none;
    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;
    outline: none;
    margin: 0 0 4px 0;
}

.comagic-personal-form__main-btn:hover {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 100%);
}

.comagic-personal-form__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-personal-form__main-btn__inner {
    text-decoration: none;
    font-family: Arial;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 42px;
    display: block;
}

.comagic-personal-form__bottom-bar {
    position: absolute;
    bottom: 14px;
    left: 230px;
    right: 20px;
}

a.comagic-personal-form__bottom-bar__link {
    opacity: .5;
    font-size: 12px;
    text-decoration: underline;
    font-family: Arial, Helvetica, sans-serif;
    white-space: nowrap;
    position: absolute;
    right: 0;
    bottom: 0;
    color: black;
}

Comagic.UI.registerViewController('personal_form', function (settings, tpls) {
    var personalForm = Comagic.UI.createWidget('personal_form', {
        settings: settings,
        id: settings['id'],
        template: tpls['personal_form'],

        render: function () {
            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-personal-form__main-btn').addEventListener('click', function () {
                personalForm.submit();
                window.open(settings['button_url']);
                personalForm.destroy();
            });

            this.getEl('.comagic-personal-form__close-btn').addEventListener('click', function () {
                if (!personalForm.isSubmitted()) {
                    personalForm.cancel();
                }
                personalForm.destroy()
            });
        },

        _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-personal-form');

            setTimeout(function () {
                el.classList.add('comagic-personal-form--showed');
            }, 10);

            this._centered = settings['h_position'] == 'center' && settings['v_position'] == 'middle';
        },

        destroy: function () {
            var scope = this,
                backgroundEl = this.getEl(),
                el = backgroundEl.querySelector('.comagic-personal-form');

            if (this._centered) {
                scope.constructor.prototype.destroy.apply(scope, arguments);
            } else {
                el.classList.remove('comagic-personal-form--showed');
                setTimeout(function () {
                    scope.constructor.prototype.destroy.apply(scope, arguments);
                }, 500);
            }
        }
    });
    personalForm.render();

    personalForm.on('leadhide', function () {
        personalForm.destroy();
    });

    personalForm.on('leadsubmit', function (answer) {
    });
});

{
  "image_url": null,
  "allowed_groups": null,
  "group_title": 0,
  "fields": [],
  "delayed_call_times": false,
  "is_schedule_active": true,
  "banner_color": "CFCCCC",
  "available_connect_ways": [
    "sitephone",
    "chat",
    "offline_message"
  ],
  "site_id": 26760,
  "preferred_connect_way": "chat",
  "banner_skin": null,
  "id": 700,
  "banner_color_mobile": "FFFFFF",
  "app_id": 1103,
  "banner_branding_url": "http://www.comagic.ru/?utm_medium=widget&utm_campaign=link_widget",
  "is_image": false,
  "banner_text": "Мы ценим Ваше время и готовы помочь найти нужную Вам информацию. Если Вы готовы, мы обсудим это по телефону.",
  "banner_title": "Поздравляем! Вы миллионный посетитель и выиграли приз",
  "scenario_id": 13111,
  "button_color": "00A500",
  "image_id": null,
  "banner_branding_text": "CoMagic.ru",
  "button_color_mobile": "00A500",
  "button_text": "Забрать приз",
  "button_url": "https://www.ya.ru/",
  "banner_place": "middle_center",
  "h_position": "center",
  "v_position": "middle",
  "widget_link_text": false,
  "widget_link_url": false
}

<div class="comagic-widget comagic-personal-form-background comagic-personal-form-background--<%= v_position %>--<%= h_position %>">
    <div class="comagic-personal-form comagic-personal-form--<%= v_position %>--<%= h_position %>">
        <% if (is_image) { %>
        <div class="comagic-personal-form__image__wrap">
            <img src="<%= image_url %>" class="comagic-personal-form__image">
        </div>
        <div class="comagic-personal-form__close-btn comagic-personal-form__close-btn-intense"></div>
        <% } else { %>
        <div class="comagic-personal-form__image__wrap"></div>
        <div class="comagic-personal-form__close-btn comagic-personal-form__close-btn-default">&times;</div>
        <% } %>
        <div class="comagic-personal-form__title"><%= banner_title %></div>
        <div class="comagic-personal-form__message"><%= banner_text %></div>
        <a tabindex="0" unselectable="on" class="comagic-personal-form__main-btn comagic-unselectable" style="background-color: #<%= button_color %>;">
            <span style="color: #<%= Comagic.UI.getContrastColor(button_color) %>;" class="comagic-personal-form__main-btn__inner"><%= button_text %></span>
        </a>
        <div class="comagic-personal-form__bottom-bar">
            <% if (banner_branding_url && banner_branding_text) { %>
            <a href="<%= banner_branding_url %>" target="_blank" class="comagic-personal-form__bottom-bar__link"><%= banner_branding_text %></a>
            <% } %>
        </div>
    </div>
</div>