Коллекция сниппетов для оформления публикаций

Инфостарт Маркетплейс

Коллекция сниппетов для оформления страницы

Обновите внешний вид публикации, используя современные формы и блоки для отображения информации о программном продукте. Все блоки доступны для копирования, их необходимо вставлять в редактор и править только в режиме HTML кода (источник)

4 правила работы с кодом:

Сохраните текущий код в блокнот, чтобы в случае чего вернуть всё как было

Для блоков с картинкой изображения должны быть загружены в публикацию заранее

Не играйтесь со шрифтом и стилями, используйте простые конструкции

Используйте базу знаний фрейморка Bootstrap, а лучше обратитесь к нам.

Название, суть продукта

Кратко сформулируйте практическое назначение продукта, для каких пользователей он разработан, какие боли и потребности этот продукт закрывает и какой главный сценарий использования. Или ответьте на 3 вопроса:

Для кого предназначен программный продукт? Какую проблему он решает? В каких ситуациях продукт полезен?

Пример кода шапки

<section class="wrapper bg-light">
    <div class="container py-12 py-md-12">
        <div class="row gx-lg-8 gx-xl-12 gy-10 align-items-center">
            <div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative text-left">
                <div class="shape bg-soft-primary rounded-circle rellax w-20 h-20" data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"> </div>
                
                <figure class="rounded">
                    <img  loading="lazy" alt="" data-cue="slideInRight" src="/upload/iblock/f12/f12af2232965f5d116380cb2d64f54fa.jpg" style="width: 99.5976%; height: auto;" />
                </figure>
            </div>
            
            <div class="col-lg-6">
                <h2 class="display-4 mb-3">Название, суть продукта</h2>
                
                <p>Кратко сформулируйте практическое предназначение продукта, для каких пользователей он разработан, какие боли и потребности этот продукт закрывает и какой главный сценарий использования. Или ответьте на 3 вопроса:</p>
                
                <p>Для кого предназначен программный продукт? Какую проблему он решает? В каких ситуациях продукт полезен?</p>
                
                <button class="btn btn-lg btn-primary rounded text-wrap btn-feedback" data-direction="59092" data-dop_req="EMAIL,COMPANY,POST" data-ticket_title="Запрос бесплатной демонстрации Веб-портала для 1С:ITIL" data-title="Записаться на бесплатную демонстрацию Веб-портала для 1С:ITIL" title="Записаться на бесплатную демонстрацию">Заказать демонстрацию</button>
            </div>
        </div>
    </div>
</section>

Текст слева, картинка справа

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

Система управления запасами позволяет собирать различные показатели, используемые в системе мотивации: часто зарплата закупщика привязывается к ключевым показателям эффективности, KPI. Например, к прибыли или выручке, оборачиваемости, упущенному спросу по ТОПу позиций, объему излишков, количеству SKU без продаж, соблюдению бюджета и т.п.

Пример кода

<div class="container py-12 py-md-12">
    <div class="row">
        <div class="col-md-8 col-lg-6 col-xl-5 order-lg-2 position-relative">
            <div class="shape bg-soft-aqua rounded-circle rellax w-20 h-20" data-rellax-speed="1" style="top:-2rem;right:-1.9rem"> </div>
            
            <figure class="rounded">
                <img alt="Frame 1321315639.png" loading="lazy" src="/upload/iblock/3f4/3f42b2a53901e944a12ae19c1c094bf2.gif" />
            </figure>
        </div>
        
        <div class="col-lg-6">
            <h2 class="display-4 mb-3">Текст слева, картинка справа</h2>
            
            <p>В первую очередь показатели нужны для оперативной работы — например, чтобы получить список излишков и пойти с ними разбираться.&nbsp;</p>
            
            <p>Система управления запасами позволяет собирать различные показатели, используемые в системе мотивации: часто зарплата закупщика привязывается к ключевым показателям эффективности, KPI.&nbsp;Например, к прибыли или выручке, оборачиваемости, упущенному спросу по ТОПу позиций, объему излишков, количеству SKU без продаж, соблюдению бюджета и т.п.</p>
        </div>
    </div>
</div>

Текст справа, картинка слева

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

Пример кода

<div class="container py-12 py-md-12">
    <div class="row">
        <div class="col-md-8 col-lg-6">
            <div class="shape bg-soft-aqua rounded-circle rellax w-20 h-20" data-rellax-speed="1" style="top:-2rem;right:-1.9rem"> </div>
            
            <figure class="rounded">
                <img alt="Frame 1321315639.png" loading="lazy" src="/upload/iblock/3f4/3f42b2a53901e944a12ae19c1c094bf2.gif" />
            </figure>
        </div>
        
        <div class="col-lg-6">
            <h2 class="display-4 mb-3">Текст справа, картинка слева</h2>
            
            <p>В первую очередь показатели нужны для оперативной работы — например, чтобы получить список излишков и пойти с ними разбираться.&nbsp;</p>
            
            <p>Система управления запасами позволяет собирать различные показатели, используемые в системе мотивации: часто зарплата закупщика привязывается к ключевым показателям эффективности, KPI.&nbsp;Например, к прибыли или выручке, оборачиваемости, упущенному спросу по ТОПу позиций, объему излишков, количеству SKU без продаж, соблюдению бюджета и т.п.</p>
        </div>
    </div>
</div>

Ключевые возможности и преимущества

Пошаговая отладка как в конфигураторе

Использование процедур и функций

Просмотр стека вызовов

Вычисления произвольных выражений на встроенном языке

Синтаксический контроль с подсветкой и контекстной подсказкой

Остановки по ошибке

Пример кода

<div class="container py-12 py-md-12">
    <div class="row text-center">
        <div class="mx-auto text-center">
            <h2 class="display-4 mb-10 px-xl-11">Ключевые возможности и преимущества</h2>
        </div>
    </div>

    <div class="row gx-lg-8 gx-xl-12 gy-8">
        <div class="col-md-6 col-lg-4">
            <div class="d-flex flex-row">
                <div>
                    <img  loading="lazy" alt="" class="svg-inject me-2 icon-svg icon-svg-sm text-primary" src="/upload/sandbox/assets/img/icons/lineal/check.svg" />
                </div>
                <div>
                    <p>Пошаговая отладка как в конфигураторе</p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="d-flex flex-row">
                <div>
                    <img  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy" alt="" class="svg-inject icon-svg icon-svg-sm me-2 text-primary" src="/upload/sandbox/assets/img/icons/lineal/check.svg" />
                </div>
                <div>
                    <p>Использование процедур и функций</p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="d-flex flex-row">
                <div>
                    <img  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy" alt="" class="svg-inject icon-svg icon-svg-sm me-2 text-primary" src="/upload/sandbox/assets/img/icons/lineal/check.svg" />
                </div>
                <div>
                    <p>Просмотр стека вызовов</p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="d-flex flex-row">
                <div>
                    <img  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy" alt="" class="svg-inject icon-svg icon-svg-sm me-2 text-primary" src="/upload/sandbox/assets/img/icons/lineal/check.svg" />
                </div>
                <div>
                    <p>Вычисления произвольных выражений на встроенном языке</p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="d-flex flex-row">
                <div>
                    <img  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy" alt="" class="svg-inject icon-svg icon-svg-sm me-2 text-primary" src="/upload/sandbox/assets/img/icons/lineal/check.svg" />
                </div>
                <div>
                    <p>Синтаксический контроль с подсветкой и контекстной подсказкой</p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-4">
            <div class="d-flex flex-row">
                <div>
                    <img  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy"  loading="lazy" alt="" class="svg-inject icon-svg icon-svg-sm me-2 text-primary" src="/upload/sandbox/assets/img/icons/lineal/check.svg" />
                </div>
                <div>
                    <p>Остановки по ошибке</p>
                </div>
            </div>
        </div>
    </div>
</div>

Технические требования

Конфигурации:

Бухгалтерия предприятия, ред.3.0.156 и выше
Комплексная автоматизация, ред.2.5.20.68 и выше
ERP Управление предприятием, ред.2.5.20.104 и выше

Версия платформы, не ниже: 8.3.18.1483
Поддерживаемый интерфейс: Такси, Управляемый
Режим запуска ИБ: тонкий клиент, толстый клиент

Код обработки открыт.

Пример кода

<div class="row">
    <section class="wrapper bg-light">
        <div class="container pt-9 pt-lg-11 pb-14 pb-lg-6">
            <div class="row gx-lg-8 gx-xl-10 align-items-center">
                <div class="col-lg-6 text-center">
                    <figure>
                        <img alt="" loading="lazy" src="/upload/iblock/b0a/b0a1bb4129ebc450d2978342c1029f11.png" style="width: 95.9677%; height: auto; box-shadow: 3px 3px 10px; border-radius: 10px;" />
                    </figure>
                </div>
                
                <div class="col-lg-6">
                    <h2 class="display-4 mb-5" style="font-size: 36px;">Технические требования</h2>
                    
                    <p><strong>Конфигурации:</strong></p>
                    
                    <ul>
                        <li>Бухгалтерия предприятия, ред.3.0.156 и выше</li>
                        <li>Комплексная автоматизация, ред.2.5.20.68 и выше</li>
                        <li>ERP Управление предприятием, ред.2.5.20.104 и выше</li>
                    </ul>
                    
                    <p><strong>Версия платформы, не ниже: 8.3.18.1483</strong>&nbsp;<br />
                    Поддерживаемый интерфейс: Такси, Управляемый<br />
                    Режим запуска ИБ: тонкий клиент, толстый клиент</p>
                    
                    <p><strong>Код обработки открыт.</strong></p>
                </div>
            </div>
        </div>
    </section>
</div>

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

Пример кода

<div class="row">
    <div class="container py-12 py-md-12">
        <div class="card card-border-start border-red mt-5">
            <div class="card-body">
                Важное уведомление для пользователя, которое выделено в отдельный бордер для повышения внимания. Цвет меняется с red на другие стандартные
            </div>
        </div>
    </div>
</div>

Тарифные планы

Стандартный

19 900р

Pellentesque taciti blandit.
Pellentesque taciti blandit.
Pellentesque taciti blandit.

Купить

Расширенный

49 500р

Amet porta ac turpis.
Amet porta ac turpis.
Amet porta ac turpis.

Купить

Профессиональный

99 900р

Erat venenatis erat massa.
Erat venenatis erat massa.
Erat venenatis erat massa.

Купить

Пример кода

<div class="container py-12 py-md-12">
    <div class="row">
        <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center">
            <h3 class="display-4 mb-15 mb-md-6 px-lg-10">Тарифные планы</h3>
        </div>
    </div>

    <div class="pricing-wrapper position-relative">
        <div class="shape bg-dot primary rellax w-16 h-18" data-rellax-speed="1" style="top:2rem;right:-2.4rem"> </div>
        
        <div class="shape rounded-circle bg-line red rellax w-18 h-18 d-none d-lg-block" data-rellax-speed="1" style="bottom:.5rem;left:-2.5rem"> </div>
        
        <div class="row gy-6 mt-3 mt-md-5">
            <div class="col-md-6 col-lg-4">
                <div class="pricing card text-center">
                    <div class="card-body">
                        <img alt="" class="svg-inject icon-svg icon-svg-md text-primary mb-3" loading="lazy" src="/upload/sandbox/assets/img/icons/lineal/laptop.svg" />
                        <h4 class="card-title">Стандартный</h4>
                        
                        <div class="prices text-dark">
                            <div class="price price-show"><span class="price-value">19 900р</span></div>
                        </div>
                        
                        <ul>
                            <li><span>Pellentesque taciti blandit.</span></li>
                            <li><span>Pellentesque taciti blandit.</span></li>
                            <li><span>Pellentesque taciti blandit.</span></li>
                        </ul>
                        <a class="btn btn-primary rounded-pill" href="#">Купить</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-lg-4">
                <div class="pricing card text-center">
                    <div class="card-body">
                        <img alt="" class="svg-inject icon-svg icon-svg-md text-primary mb-3" loading="lazy" src="/upload/sandbox/assets/img/icons/lineal/group-2.svg" />
                        <h4 class="card-title">Расширенный</h4>
                        
                        <div class="prices text-dark">
                            <div class="price price-show"><span class="price-value">49 500р</span></div>
                        </div>
                        
                        <ul>
                            <li><span>Amet porta ac turpis.</span></li>
                            <li><span>Amet porta ac turpis.</span></li>
                            <li><span>Amet porta ac turpis.</span></li>
                        </ul>
                        <a class="btn btn-primary rounded-pill" href="#">Купить</a>
                    </div>
                </div>
            </div>

            <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-0">
                <div class="pricing card text-center">
                    <div class="card-body">
                        <img alt="" class="svg-inject icon-svg icon-svg-md text-primary mb-3" loading="lazy" src="/upload/sandbox/assets/img/icons/lineal/briefcase-2.svg" />
                        <h4 class="card-title">Профессиональный</h4>
                        
                        <div class="prices text-dark">
                            <div class="price price-show"><span class="price-value">99 900р</span></div>
                        </div>
                        
                        <ul>
                            <li><span>Erat venenatis erat massa.</span></li>
                            <li><span>Erat venenatis erat massa.</span></li>
                            <li><span>Erat venenatis erat massa.</span></li>
                        </ul>
                        <a class="btn btn-primary rounded-pill" href="#">Купить</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Видеодемонстрация

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

Пример кода

<div class="container py-12 py-md-12">
    <div class="row gx-lg-0 gy-10 align-items-center">
        <div class="col-lg-6">
            <h3 class="display-4 mb-6 pe-xxl-6">Видеодемонстрация</h3>
            
            <p>В этом видео показано, как установить программу, как провести первоначальные настройки и как правильно пользоваться функционалом для достижения результата, ради которого приобретается продукт</p>
        </div>
        
        <div class="col-lg-6">
            <iframe allow="clipboard-write; autoplay" allowfullscreen="" frameborder="0" height="405" mozallowfullscreen="" src="https://rutube.ru/play/embed/ad6e6e0d902d6829c2096f7c0625cf93/" webkitallowfullscreen="" width="720"></iframe>
        </div>
    </div>
</div>

Причины купить

Надежное хранение данных

Ваши данные хранятся в защищенном дата-центре 1С, который обеспечивает высокий уровень безопасности. Вся информация находится под круглосуточной охраной и защитой от любых угроз.

Регулярное резервное копирование

Регулярно осуществляется резервное копирование всех данных. Это обеспечивает дополнительную безопасность в случае любых непредвиденных ситуаций. Вы также можете легко создать персональную копию данных на своем ПК.

Контроль доступа

Доступ к вашим данным строго ограничен. Только вы и те, кому вы предоставляете соответствующие права, могут получить доступ к информации. Это исключает возможность неавторизованного доступа.

Шифрование передаваемой информации

Вся передаваемая информация защищена современным протоколом шифрования https. Это гарантирует, что данные, передаваемые через Интернет, защищены от перехвата и недоступны посторонним.

Пример кода

<div class="container py-12 py-md-12">
    <div class="row text-center pb-5">
        <div>
            <h3 class="display-4 mb-15 mb-md-6 px-lg-10">Причины купить</h3>
        </div>
    </div>

    <div class="row gx-md-8 gx-xl-12 gy-10">
        <div class="col-lg-6">
            <div class="card shadow-lg card-border-start border-primary">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div> </div>
                        <div>
                            <h3 class="text-center fs-20">Надежное хранение данных</h3>
                            <p>Ваши данные хранятся в защищенном дата-центре 1С, который обеспечивает высокий уровень безопасности. Вся информация находится под круглосуточной охраной и защитой от любых угроз.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card card-border-end border-primary">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div> </div>
                        <div>
                            <h3 class="text-center fs-20">Регулярное резервное копирование</h3>
                            <p>Регулярно осуществляется резервное копирование всех данных. Это обеспечивает дополнительную безопасность в случае любых непредвиденных ситуаций. Вы также можете легко создать персональную копию данных на своем ПК.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow-lg card-border-start border-primary">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div> </div>
                        <div>
                            <h3 class="text-center fs-20">Контроль доступа</h3>
                            <p>Доступ к вашим данным строго ограничен. Только вы и те, кому вы предоставляете соответствующие права, могут получить доступ к информации. Это исключает возможность неавторизованного доступа.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card card-border-end border-primary">
                <div class="card-body">
                    <div class="d-flex flex-row">
                        <div> </div>
                        <div>
                            <h3 class="text-center fs-20">Шифрование передаваемой информации</h3>
                            <p>Вся передаваемая информация защищена современным протоколом шифрования https. Это гарантирует, что данные, передаваемые через Интернет, защищены от перехвата и недоступны посторонним.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

4 шага/4 действия

Заполните форму регистрации

Перенесите ваши базы или создайте новую

Попробуйте тестовый доступ на 30 дней

По окончании тестового доступа оплатите счет

Пример кода

<div class="container py-12 py-md-12">
    <div class="row">
        <div class="col-lg-12">
            <h2 class="display-4 mb-10 text-center">4 шага/4 действия</h2>
        </div>
    </div>

    <div class="row gx-lg-8 gx-xl-12 gy-6 process-wrapper line mb-8">
        <div class="col-md-6 col-lg-3">
            <span class="icon btn btn-circle btn-lg btn-primary pe-none mb-4">
                <span class="number">01</span>
            </span>
            <p class="mb-1 text-navy fs-19"><strong>Заполните форму регистрации</strong></p>
        </div>

        <div class="col-md-6 col-lg-3">
            <span class="icon btn btn-circle btn-lg btn-primary pe-none mb-4">
                <span class="number">02</span>
            </span>
            <p class="mb-1 text-navy fs-19"><strong>Перенесите ваши базы или создайте новую</strong></p>
        </div>

        <div class="col-md-6 col-lg-3">
            <span class="icon btn btn-circle btn-lg btn-primary pe-none mb-4">
                <span class="number">03</span>
            </span>
            <p class="mb-1 text-navy fs-19"><strong>Попробуйте тестовый доступ на 30 дней</strong></p>
        </div>

        <div class="col-md-6 col-lg-3">
            <span class="icon btn btn-circle btn-lg btn-primary pe-none mb-4">
                <span class="number">04</span>
            </span>
            <p class="mb-1 text-navy fs-19"><strong>По окончании тестового доступа оплатите счет</strong></p>
        </div>
    </div>
</div>

Спойлеры (FAQ, описание функционала и т.д.)

Заголовок 1

Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus lacinia conubia potenti imperdiet inceptos finibus porttitor nunc.

Lorem ipsum odor amet, consectetuer adipiscing elit.

Lorem ipsum odor amet, consectetuer adipiscing elit. Lectus mus ultricies euismod vitae dolor ornare ornare arcu.

Lorem ipsum odor amet, consectetuer adipiscing elit.

Lorem ipsum odor amet, consectetuer adipiscing elit. Accumsan lectus fusce maecenas ac mauris fames; dignissim ultricies.

Пример кода

<div class="row">
    <div class="col-md-12 pb-md-4 pb-4">
        <div class="container">
            <h3 class="display-1 text-center fw-bold mb-12" style="font-size: 36px;">Спойлеры (FAQ, описание функционала и т.д.)</h3>
            
            <div class="accordion accordion-wrapper" id="accordionExample">
                <div class="card accordion-item">
                    <div class="card-header" id="accn-head-1">
                        <button aria-controls="accn-1" aria-expanded="false" class="accordion-button text-dark" data-bs-target="#accn-1" data-bs-toggle="collapse">Заголовок 1</button>
                    </div>
                    <div aria-labelledby="accn-head-1" class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="accn-1">
                        <div class="card-body">
                            <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus lacinia conubia potenti imperdiet inceptos finibus porttitor nunc.</p>
                        </div>
                    </div>
                </div>
                
                <div class="card accordion-item">
                    <div class="card-header" id="accn-head-2">
                        <button aria-controls="accn-2" aria-expanded="false" class="collapsed text-dark" data-bs-target="#accn-2" data-bs-toggle="collapse">Заголовок 2</button>
                    </div>
                    <div aria-labelledby="accn-head-2" class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="accn-2">
                        <div class="card-body">
                            <p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
                        </div>
                    </div>
                </div>
                
                <div class="card accordion-item">
                    <div class="card-header" id="accn-head-3">
                        <button aria-controls="accn-3" aria-expanded="false" class="collapsed text-dark" data-bs-target="#accn-3" data-bs-toggle="collapse">Заголовок 3</button>
                    </div>
                    <div aria-labelledby="accn-head-3" class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="accn-3">
                        <div class="card-body">
                            <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Lectus mus ultricies euismod vitae dolor ornare ornare arcu.</p>
                        </div>
                    </div>
                </div>
                
                <div class="card accordion-item">
                    <div class="card-header" id="accn-head-4">
                        <button aria-controls="accn-4" aria-expanded="false" class="collapsed text-dark" data-bs-target="#accn-4" data-bs-toggle="collapse">Заголовок 4</button>
                    </div>
                    <div aria-labelledby="accn-head-4" class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="accn-4">
                        <div class="card-body">
                            <p>Lorem ipsum odor amet, consectetuer adipiscing elit.</p>
                        </div>
                    </div>
                </div>
                
                <div class="card accordion-item">
                    <div class="card-header" id="accn-head-5">
                        <button aria-controls="accn-5" aria-expanded="false" class="collapsed text-dark" data-bs-target="#accn-5" data-bs-toggle="collapse">Заголовок 5</button>
                    </div>
                    <div aria-labelledby="accn-head-5" class="accordion-collapse collapse" data-bs-parent="#accordionExample" id="accn-5">
                        <div class="card-body">
                            <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Accumsan lectus fusce maecenas ac mauris fames; dignissim ultricies.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Техническая поддержка

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

Создать обращение (тикет)

Создать тикет

Заполнить данные

Контакты, номер заказа, подробное описание вопроса
Напишите порядок ваших действий с программой, приложите видео/скриншоты/отчеты об ошибке
Точную конфигурацию 1С, версии платформы, инструмента, СУБД

Дождаться ответа

Время ответа до 24 часов в рабочее время

Внимание! Техническая поддержка предоставляется исключительно в рамках переписки по обращению. В некоторых случаях для диагностики ошибок и/или вопросов, связанных с особенностями использования продукта в информационных базах покупателя, может потребоваться дополнительная платная диагностика с организацией удаленного доступа к информационной базе. Стоимость уточняется индивидуально.

Пример кода (В коде кнопки обязательна замена data-pub_id на id текущей публикации!)

<div class="card image-wrapper bg-full bg-image bg-overlay my-10 my-md-14 bg-overlay-light-500" style="background-image:url(/upload/sandbox/assets/img/photos/bg22.png)">
    <div class="card-body py-14 px-0">
        <div class="container">
            <div class="offset-lg-1">
                <h2 class="h1 mb-3">Техническая поддержка</h2>
                
                <p class="mb-0">
                    В случае возникновения ошибок рекомендуем ознакомиться с описанием и документацией программы.<br />
                    Если не нашли решения своей проблемы в документации или решение не помогает - тогда создайте обращение по инструкции ниже:  
                </p>
                
                <div class="d-flex flex-row mb-6">
                    <div>
                        <span class="icon btn btn-circle btn-primary pe-none me-5">
                            <span class="number fs-18">1</span>
                        </span>
                    </div>
                    
                    <div>
                        <h4 class="mb-1">Создать обращение (тикет)</h4>
                        <p class="mb-0">
                            <a class="more hover btn-feedback" data-direction="59098" data-hide-fields="POST,COMPANY" data-pub_id="2163140" data-special_case="BTN_SUPPORT" data-title="Техподдержка" href="#">Создать тикет</a>
                        </p>
                    </div>
                </div>
                
                <div class="d-flex flex-row mb-6">
                    <div>
                        <span class="icon btn btn-circle btn-primary pe-none me-5">
                            <span class="number fs-18">2</span>
                        </span>
                    </div>
                    
                    <div>
                        <h4 class="mb-1">Заполнить данные</h4>
                        <p class="mb-0">
                            Контакты, номер заказа, подробное описание вопроса<br />
                            Напишите порядок ваших действий с программой, приложите видео/скриншоты/отчеты об ошибке<br />
                            Точную конфигурацию 1С, версии платформы, инструмента, СУБД
                        </p>
                    </div>
                </div>
                
                <div class="d-flex flex-row">
                    <div>
                        <span class="icon btn btn-circle btn-primary pe-none me-5">
                            <span class="number fs-18">3</span>
                        </span>
                    </div>
                    
                    <div>
                        <h4 class="mb-1">Дождаться ответа</h4>
                        <p class="mb-0">Время ответа до 24 часов в рабочее время</p>
                    </div>
                </div>
                
                <p><strong>Внимание!</strong> Техническая поддержка предоставляется исключительно в рамках переписки по обращению. В некоторых случаях для диагностики ошибок и/или вопросов, связанных с особенностями использования продукта в информационных базах покупателя, может потребоваться дополнительная платная диагностика с организацией удаленного доступа к информационной базе. Стоимость уточняется индивидуально.</p>
            </div>
        </div>
    </div>
</div>