У каждого элемента виджета есть свои настройки стиля. Их можно посмотреть в коде страницы (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. Меняем настройки/код кнопки, вместо заданных параметров подставляем необходимые.

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

Увидим подобный результат:

<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. Актуальные всегда можно взять в меню мероприятия во вкладке «Виджет».