---
title: "Виджет опросов на сайт | документация и JS API аскио"
description: "Документация виджета аскио: установка через <script>, JS API, события, кастомизация, примеры для React, Vue, Тильды, Битрикс24."
url: https://askyo.ru/embed
lang: ru
last_modified: 2026-09-27
---

Документация виджета

# Виджет опроса для сайта: установка и JS API

Виджет в Shadow DOM, \~35 КБ gzip. Совместим с любым фреймворком, любой CMS, любым лендингом. Без iframe.

Быстрый старт

## Опрос на сайте в две строки HTML

index.html

```
<!-- 1. Подключите скрипт виджета -->
<script src="https://cdn.askyo.ru/widget.js" async></script>

<!-- 2. Вставьте контейнер с ID опроса -->
<div data-askyo="nps-feedback-v3"></div>
```

Полная инициализация

## JS API и параметры

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

layout.html

```
<script>
  window.Askyo = window.Askyo || { q: [] };
  window.Askyo.q.push(['init', {
    id: 'nps-feedback-v3',
    theme: 'auto',                  // 'light' | 'dark' | 'auto'
    locale: 'ru',
    position: 'bottom-right',       // или 'inline'
    trigger: 'exitIntent',          // или 'manual' | 'time:30s' | 'scroll:60%'
    closable: true,
    persist: 'session',             // 'session' | 'local' | 'none'
    variables: {
      userId: 'user-42',
      plan: 'pro',
      utmSource: location.search,
    },
    onLoad:   () => console.log('Виджет загружен'),
    onOpen:   () => analytics.track('Survey opened'),
    onSubmit: (data) => analytics.track('Survey submitted', data),
    onClose:  () => console.log('Закрыт'),
  }]);
</script>
<script src="https://cdn.askyo.ru/widget.js" async></script>
```

### Параметры конфигурации

`id`ID опроса из редактора. Обязательное поле.

`theme`'light' · 'dark' · 'auto' – следует за prefers-color-scheme. По умолчанию 'auto'.

`locale`'ru' · 'en' · 'kk'. По умолчанию определяется из navigator.language.

`position`'bottom-right' · 'bottom-left' · 'center' · 'inline'.

`trigger`'manual' · 'time:30s' · 'scroll:60%' · 'exitIntent'.

`variables`Любой объект – попадает в ответ и доступен в логике опроса как {{ var.userId }}.

`onLoad``onOpen``onSubmit``onClose`Колбэки жизненного цикла.

Сценарии

## Inline, программный запуск, фреймворки

### Inline-режим (внутри страницы)

html

```
<!-- inline-режим: виджет растягивается под ширину контейнера -->
<div data-askyo="onboarding-v2" data-position="inline" style="max-width: 640px"></div>
```

### Открыть из кнопки

javascript

```
// Открыть программно – из любой кнопки на сайте
document.querySelector('#feedback-button').addEventListener('click', () => {
  window.Askyo.open('nps-feedback-v3');
});

// Закрыть
window.Askyo.close('nps-feedback-v3');

// Уничтожить инстанс (полная очистка)
window.Askyo.destroy('nps-feedback-v3');
```

### React / Next.js

Feedback.tsx

```
// React: используйте useEffect для init, чтобы не дублировать на ре-рендере
import { useEffect } from 'react';

export function Feedback() {
  useEffect(() => {
    if (!window.Askyo) return;
    window.Askyo.init({
      id: 'in-app-feedback',
      trigger: 'manual',
      variables: { userId: currentUser.id },
    });
    return () => window.Askyo.destroy('in-app-feedback');
  }, []);

  return <button onClick={() => window.Askyo.open('in-app-feedback')}>Дать обратную связь</button>;
}
```

### Content Security Policy

text

```
Content-Security-Policy:
  script-src 'self' https://cdn.askyo.ru;
  connect-src 'self' https://api.askyo.ru;
  frame-src 'self';
  img-src 'self' data: https:;
```

Частые вопросы

## Часто спрашивают про виджет

Виджет конфликтует со стилями моего сайта?

Нет. Виджет рендерится в Shadow DOM – наши стили изолированы от ваших, ваши – от наших. Можно безопасно встраивать на сайт с любым CSS-фреймворком.

Какой размер скрипта?

Около 35 КБ gzip для основного раннера. Дополнительные модули (карта, файлы, капча) подгружаются по требованию.

Работает ли виджет без JS?

Сам виджет – нет, это интерактивный компонент. Но публичная страница опроса (askyo.ru/r/...) серверно рендерится и индексируется поисковиками.

Что с GDPR и согласием на cookies?

Виджет не ставит сторонних cookies. Можно настроить persist: "none", чтобы вообще не использовать localStorage. Для гос/корп – см. self-host на странице тарифов.

## Готовы встроить опрос?

Создайте опрос в визуальном редакторе и получите готовый сниппет для копирования.

[Создать опрос ](https://app.askyo.ru/build)[Посмотреть тарифы](https://askyo.ru/pricing)