Настройка внешнего вида виджета

Виджет можно настроить под свои потребности: изменить цвет основных элементов, убрать отступы, убрать фиксирование максимального размера в 670px.

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

Изначально виджет выглядит вот так:

Внешний вид виджета по умолчанию

Цвет синий, есть внутренний отступ виджета в 15px, максимальная ширина в 670px.

Виджет зависит от ширины контейнера и тянется вместе с ним. Хорошо выглядит как на ПК, так и на мобильном. При разработке мы специально отрисовали отдельную версию под мобилки.

Изменение цвета

Но хочется, чтобы виджет стал красным. Тогда добавляем параметр data-color-main="#d02138". Этот параметр задает цветовую тему виджета. Кнопки, иконки, некоторые шрифты красятся в этот цвет. Есть и другие элементы, например плашка — ее цвет рассчитывается от основного.

В большинстве случаев этого параметра достаточно, чтобы изменить цвет.

Код будет выглядеть вот так:

<div id="osago-calculator-iframe" data-webmaster-id="xxxxxx" data-color-main="#d02138"></div> <script type="text/javascript" src="https://cpamotor.ru/js/osagocalc.js"></script>

Изменили основной цвет

Если очень хочется изменить дополнительные цвета, для этого есть параметр data-color-add. Отдельно можно поменять цвета кнопок. Это лучше попробовать самим, взяв названия параметров в личном кабинете.

Изменение максимальной ширины

Напомню виджет имеет максимальную ширину в 670px. В большинстве случае этого хватает, но иногда хочется больше. При этом он адаптивный, для этого ничего делать не нужно.

Для того, чтобы отключить ограничение, используем параметр data-fluid-on="true". Показывать его работу смысла нет, он будет максимально тянуться по ширине.

Отключение информационных блоков

Это блоки, которые показываются на 1 шаге — предварительном расчете.

Их тоже можно отключить специальным параметром: data-info-blocks-on="false".

Отключаем информационные блоки. Исчез человечек с маской и 3 абзаца внизу.

В итоге имеем вот такой код вызова виджета, в котором меняется основной цвет и отключаем ограничение по ширине в 670px:

<div id="osago-calculator-iframe" data-webmaster-id="xxxxxx" data-color-main="#d02138" data-info-blocks-on="false"></div> <script type="text/javascript" src="https://cpamotor.ru/js/osagocalc.js"></script>

На этом все, думаю суть понятна. Пробуйте свои варианты. И если копируете из примеров, не забывайте подставлять свое значение data-webmaster-id.