Web-компоненты
Skills use ready-made data-attribute components handled by the SkillManager inside the widget.
data-action — кнопки действий
Turns any element into a button that dispatches an 'action' event on the skill host when clicked.<button data-action="submit" data-value='{"size":"M"}'>Подтвердить</button>
host.addEventListener('action', (e) => {
if (e.detail.action === 'submit') {
console.log(e.detail.value)
}
})
data-radio-switch — селектор вариантов
<div data-radio-switch data-name="size" data-value="M">
<button data-option="S">S</button>
<button data-option="M">M</button>
<button data-option="L">L</button>
</div>
data-card — карточки товаров
Renders a product card with image, price, attributes and CTA.<article data-card class="rounded-2xl p-4 bg-white">
<img src="/assets/laptop.webp" alt="Ноутбук" />
<h3>Ноутбук Pro</h3>
<p>от 79 990 ₽</p>
<button data-action="select" data-value='{"id":"sku-1"}'>Выбрать</button>
</article>
data-gallery — галерея Fancybox
<div data-gallery>
<a href="/assets/hero.jpg"><img src="/assets/hero-thumb.jpg" alt="" /></a>
<a href="/assets/alt.jpg"><img src="/assets/alt-thumb.jpg" alt="" /></a>
</div>
data-suggest-input — инпут с подсказками
Morphing input with suggestions via Yandex Geocoder. Keyboard nav and 1Password blocking included.<div class="suggest-wrap">
<input data-suggest-input data-shop-id="20" placeholder="Введите город или адрес" />
</div>
host.addEventListener('suggest-select', (e) => {
const { text, value } = e.detail
console.log('Picked:', text, value)
})
Утилиты стилей
Along with the components, the following CSS variables brand the skill to match the widget:--skill-primary /* primaryColor из widget config */
--skill-text-on-primary /* контрастный цвет на primary */
Inline styles inside skills are stripped by the bundle parser. Always use Tailwind classes.