У каждого элемента виджета есть свои настройки стиля. Их можно посмотреть в административном меню (Ctrl + Shift + I или Cmd+Opt + I), на примере сайта с уже изменённым стилем кнопки.
​

Слева появится административная панель с кодом элемента. В нём содержится информация о стиле и атрибутах стиля.

На примере кнопки Купить, видим что ей задан класс class=btn-widget и параметры в виде атрибутов: class с параметрами фона, обязательными атрибутами type (тип) и tc-event (id нашего события).

Так как код каждого сайта уникален, то в вашем случае настройки могут иметь своё название, например, btn-widget, button-widget, tc-widget-button и др., важна лишь привязка к виджету.

Таким образом можно увидеть настройки любой части нашего виджета: фона, надписи, кнопки и цвета категорий. Для этого в левом верхнем углу нажмите стрелку и щёлкните на элемент виджета.

А целиком код страницы открывается через правую кнопку мыши 🠖 Посмотреть код страницы. Скопируйте из админ панели class=btn-widget 🠖 нажмите Ctrl + F на странице кода 🠖 смотрите настройки.

Очень похоже на то, что мы предлагаем в нашем ЛК:

Чтобы изменить настройки, то есть изменить код виджета, нужны административные права к интернет-площадке. В зависимости от платформы, на базе которой сделан сайт, редактор стиля (кода) будет отличаться.

Например, у нас есть инструкция по установке виджета на сайт на платформе Tilda.

Для примера возьмём кнопку Купить.

1. Для этого нам нужен класс элемента class=btn-widget, копируем его.

2. Идём в админку нашего сайта, ищем элемент кнопки (либо есть отдельный блок изменения настроек/кода кнопки, либо один блок с кодом всего сайта).

3. Меняем настройки/код кнопки, вместо заданных параметров подставляем необходимые.

За основу можно взять настройки стиля нашей кнопки, их можно свободно менять 🠖 сохранить в админке своего сайта 🠖 увидеть результат :

<button

style= — атрибут стиля

"background-color: #FFD900; — цвет фона кнопки

color: black; — цвет текста

text-shadow: #f2f2f2 0 -1px 1px; — размер тени текста

font: bold 22px/41px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif; — настройки шрифта

padding: 0 13px; — отступы

text-align: center; — выравнивание текста

text-transform: lowercase; — только строчные буквы

border: 0; — границы

border-radius: 4px; — радиус границ

box-shadow: rgba(0, 0, 0, 0.75) 0 1px 1px; — настройки теней

appearance: button; — отображение элемента (зависит от платформы сайта)

cursor: pointer; — курсор при его наведении на кнопку

margin: 0; — величина отступа со всех сторон

vertical-align: baseline;" — вертикальные отступы

>Купить билет</button>

Можно придумать свой класс и прописать свои стили к нему.

data-tc-round — Плавающая кнопка

Она всегда будет на виду у покупателя, даже если у вас на сайте очень много контента.

tc-position-bottom — положение кнопки на странице

data-tc-event — id события Ticketscloud

data-tc-token — токен (цифровой ключ индентификации и доступа)

data-tc-meta — периодическое событие (необязательный атрибут)

width: 110px;

height: 110px;

border-radius: 50%;

border: 3px solid transparent;

padding: 0 !important;

margin: 8px;

text-transform: none;

font: bold 16px/16px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif;

box-shadow: 0 0 0 5px #FFFFFF inset;

Параметры кнопок.

Стандарт:

padding: 0 13px;

text-align: center;

text-transform: lowercase;

border: 0;

border-radius: 4px;

Мы не ограничиваем себя в цветах виджета. Но есть основные сочетания.

Для кнопки Купить:

Цвет кнопки #FFD900

Цвет текста #000000

Тень текста #f2f2f2

Цвет кнопки #f77100

Тень текста #ab4e00

Цвет кнопки #CB000D

Тень текста #7f0008

Цвет кнопки #808080

Тень текста #5a5a5a

Цвет кнопки #97b700

Тень текста #4a6b00

Примеры цвета категорий на схеме:

#02a8e4

#5c58b0

#8f4b14

#3a872

#5b3c6c

#175184

Возможно наши цвета не подходят, тогда используйте иную палитру цветов для WEB, например, Артемия Лебедева.

Вот пример настроек плавающей кнопки нашего виджета:

Открываем код страницы в ЛК 🠖 <link rel="stylesheet" href="/static/css/tc-widget-button.css" />

button[data-tc-round] {

width: 110px;

height: 110px;

border-radius: 50%;

border: 3px solid transparent;

padding: 0 !important;

margin: 8px;

text-transform: none;

font: bold 16px/16px 'PT Sans', Trebuchet, Helvetica, Arial, sans-serif;

position: fixed;

z-index: 111111;

box-shadow: 0 0 0 5px #FFFFFF inset;

padding: 0 !important;

}

button[data-tc-round] > img {

width: 35px;

height: 35px;

}

button[data-tc-round] > div {

max-height: 32px;

min-height: 32px;

width: 75%;

margin: 0 auto;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

text-overflow: ellipsis;

}

Можно придумать свои атрибуты и задать свой стиль, вот пример кнопки с градиентом:

<a href="#" class="button10">кнопка</a>

<style>

a.button10 {

display: inline-block;

color: black;

font-size: 125%;

font-weight: 700;

text-decoration: none;

user-select: none;

padding: .25em .5em;

outline: none;

border: 1px solid rgb(250,172,17);

border-radius: 7px;

background: rgb(255,212,3) linear-gradient(rgb(255,212,3), rgb(248,157,23));

box-shadow: inset 0 -2px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,0);

transition: box-shadow .2s, border-color .2s;

}

a.button10:hover {

box-shadow: inset 0 -1px 1px rgba(0,0,0,0), inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px rgba(255,255,0,.5);

}

a.button10:active {

padding: calc(.25em + 1px) .5em calc(.25em - 1px);

border-color: rgba(177,159,0,1);

box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px rgba(255,255,0,.45);

}

</style>

В качестве альтернативы, для изменения настроек кнопки подходят сторонние сервисы, например Генератор HTML кнопок

В данном случае используется пример, у вас будут другие идентификаторы data-tc-event и data-tc-token.