аскио
Войти Создать опрос
Документация виджета

Опрос на ваш сайт в одну строку

Виджет в 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>

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

idID опроса из редактора. Обязательное поле.
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 }}.
onLoadonOpenonSubmitonCloseКолбэки жизненного цикла.
Сценарии

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. Для гос/корп – see self-host на /pricing.

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

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

Создать опрос Посмотреть тарифы
Тарифы Создать опрос