Встроить виджет

Виджет Prioplan уведомляет пользователей о новых функциях прямо в вашем продукте. Встройте его, чтобы повысить вовлечённость пользователей в вашу Доску идей.

Когда вы встраиваете виджет, пользователи получают уведомления о новых функциях прямо в продукте. Когда вы переводите Идеи в статус Done, виджет отображает обновления с красным индикатором.

Демо: Посетите https://hi.prioplan.app/ и нажмите What's New (Что нового) в меню шапки.

Встройте в любом месте

Встройте виджет на любую страницу. Если пользователи идентифицированы, они увидят персональные уведомления на всех поддоменах. Например, когда пользователь читает анонс и переходит на другую страницу, красный индикатор не появится снова до следующего релиза.

В Prioplan мы встраиваем виджет на:

Маркетинговый сайт: https://hi.prioplan.app/
Портал помощи: /knowledge-base/
Продукт: prioplan.app

Виджет changelog состоит из двух частей:

Базовый JavaScript-код виджета, который загружает виджет
Кнопка для открытия виджета

внимание

Если ваша Доска идей приватная с ограничениями доступа, вы должны передавать идентификаторы пользователей в виджет. Иначе никто не сможет получить к нему доступ.

1. Откройте настройки Доски идей

Перейдите в настройки Доски идей.
Найдите секцию Embed (Встроить).
Нажмите Add 'What's New' Widget (Добавить виджет «Что нового»).

Добавьте этот код в нижнюю часть страниц, где вы хотите показать виджет.

<!-- prioplan.app Changelog Widget -->
<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://prioplan.app/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
  });
</script>
<!-- End prioplan.app Changelog Widget -->

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

Добавьте CSS-класс к любому элементу, чтобы создать кнопку, которая открывает виджет и показывает уведомления:

<div class="Prioplan-changelog-widget">What's new</div>

Эта базовая настройка предоставляет:

Виджет отображает последние Идеи в статусе Done, отсортированные по дате релиза
Индикатор уведомлений для новых выпущенных функций (Идеи, переведённые в Done)
Посетители могут прочитать до 20 выпущенных Идей
Ссылку на Доску идей, чтобы проверить роадмап, добавить Идеи, проголосовать и комментировать
Сбор email для еженедельной рассылки обновлений роадмапа

Вы найдёте подписчиков Доски идей в настройках Доски идей.

Страница по умолчанию

Выберите, какая страница — Roadmap или Changelog — будет открываться первой в вашем виджете.

Чтобы указать страницу, настройте defaultView в коде. Используйте roadmap или changelog:

dclsPxl("initWidget", {
  ...
    // optional, default state is undefined
    // Use 'roadmap' or 'changelog' to open specific page
    defaultView: undefined,
  ...
});

Для страниц Changelog и Roadmap вы можете дополнительно открыть определённый фильтр или действие (только для авторизованных пользователей):

dclsPxl("initWidget", {
   ...

   // optional,
   // use it to open a specific filter (only for authorized users)
   openNewIdea: true,
   myIdeas: true,
   myVotes: true,

   ...
});

Метод аутентификации

Выберите между аутентификацией Prioplan или вашим собственным методом аутентификации.

Вариант 1: Использовать аутентификацию Prioplan (по умолчанию)

По умолчанию используется аутентификация Prioplan, когда клиенты хотят голосовать, добавлять Идеи или комментировать.

Вариант 2: Использовать вашу собственную аутентификацию

Если вы используете свою собственную аутентификацию, укажите это в коде: onAuth: showUserAuth

dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    ...
    onAuth: showUserAuth
    ...
});

Когда эта функция указана, она заменяет аутентификацию Prioplan. Вы обрабатываете весь процесс аутентификации, но вы должны передать аутентифицированного пользователя виджета: требуются user.email + user.hash.

dclsPxl("initWidget", {
    // required
    appId: "dc9ae89*******",
    boardId: "78aef2c7c0********",

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
     },
     onAuth: showUserAuth
    ...
});

После встраивания виджета Changelog Prioplan настройте его под стиль вашего продукта.

Добавьте эти параметры в ваш код:

<script>
  !function(b,c,f,d,a,e){b.dclsPxl||(((d=b.dclsPxl=function(){d.callMethod?d.callMethod.apply(d,arguments):d.queue.push(arguments)}).push=d).queue=[],(a=c.createElement("script")).async=!0,a.src=f,(e=c.getElementsByTagName("script")[0]).parentNode.insertBefore(a,e))}(window,document,"https://prioplan.app/js/widget.js")
  dclsPxl("initWidget", {
    appId: "_YOUR_APP_ID", // Required
    boardId: "_YOUR_BOARD_ID", // Required
    selector: "_YOUR_SELECTOR", // optional - default .Prioplan-changelog-widget
    width: "400", // optional, Widget width (minimal width 400px)
    debug: true, // optional - Always show Notification bubble and logs for events

    bubble: {
      selector: '#embedBoardBuble', // optional - use it for bubble without widget, default ".Prioplan-changelog-widget"
      className: 'some-class-name', // optional - clear initial styles. Usage for custom styles by className ONLY. Default undefined
      style: { // optional, customization initial styles. Default undefined
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
       }
     },
   });
 </script>

Мигрировать на новый параметр bubble

к сведению

Параметры top, right, backgroundColor и color устарели. Используйте bubble.style вместо них.

Добавьте новый параметр bubble.style:

bubble: {
    ...
    // optional, default state is undefined
    // customization initial styles
    style: {
	right: '7px',
	top: '7px',
	backgroundColor: '#db3737',
	borderRadius: '4px',
	fontSize: '13px',
    }
    ...
}

Режим отладки

debug: true,

Когда вы открываете виджет, он помечает все обновления как прочитанные, и красный индикатор исчезает. Для лучшего тестирования вёрстки используйте режим отладки.

Виджет всегда будет показывать красный индикатор уведомлений, когда вы закрываете и снова открываете его. Это помогает вам протестировать правильную позицию.

Прикрепить индикатор уведомлений к любому элементу

selector: "_YOUR_SELECTOR"

Выберите или создайте элемент, который будет запускать виджет Prioplan. Используйте ID или уникальный класс этого элемента для параметра selector.

подсказка

Если selector — это класс (а не ID), начните его с точки. Для класса openWidget ваш selector будет .openWidget.

Для вашего selector виджета вы можете использовать:

ID: #DucalisChangelogNotification, #someID, …
Класс: .DucalisChangelogNotification, .someClass, .some-class, …
Атрибут: [data-bubble="1"], [data-whats-new], …
Комбинацию: div.someClass[data-show-bubble="true"], a[href^="https://ideas.prioplan.app"], …

Цвета уведомлений

Подберите цвета под ваш продукт. Цвета по умолчанию:

backgroundColor: "#f04438", // Notification bubble Background color

color: "#fee4e2", // Notification bubble text color

Позиция индикатора уведомлений

По умолчанию индикатор уведомлений позиционируется относительно элемента, прикреплённого к selector.

Если вам не нравится позиция индикатора уведомлений, настройте её в инструментах разработчика браузера и добавьте в настройки виджета:

top: "-10px", // Notification bubble position by top

right: "-10px", // Notification bubble position by right

По умолчанию ширина виджета — 376px. Вы можете изменить её:

width: "376px", // optional, Widget width

Кастомный CSS-класс

Только для продвинутого использования. Добавляет кастомное имя класса к индикатору уведомлений без стилей с нашей стороны. Вы можете настроить индикатор уведомлений с помощью вашего CSS.

bubble.className: "_SOME_CLASS_NAME"

bubble: {
    ...
    // optional - clear initial styles.
    // Usage for custom styles by className ONLY. Default undefined
    className: 'some-class-name',
    ...
}

к сведению

Параметр bubbleClassName устарел. Используйте bubble.className вместо него.

Одна из самых полезных функций Досок идей — автоматические релиз ноутсы.

Поскольку Доска идей — это отдельное приложение, автоподписка на релиз ноутсы включена по умолчанию, чтобы избежать постоянного импорта списков новых активных пользователей.

Пользователи автоматически подписываются, когда:

Вы отправляете данные пользователя в Prioplan через API Prioplan или виджет (требуются user.email + user.hash).
Пользователь открывает виджет или фрейм доски.

При выполнении этих условий пользователи подписываются на релиз ноутсы автоматически.

внимание

Чтобы пользователи получали обновления релиз ноутсов, настройте кастомный email-домен.

dclsPxl("initWidget", {
    // required
    appId: "dc9ae89*******",
    boardId: "78aef2c7c0********",

    user: {
        // required
        email: "Your user Email",
        hash: "User hash",
        ...
    },

     // Auto subscribe current user on current board (needed user.email + user.hash)
    autoSubscribe: true,  // optional, default: true
});

Если вы выполняете условия выше, но не хотите подписывать пользователей автоматически, измените на autoSubscribe: false.

Встроить виджет

Виджет changelog и уведомления

Встройте в любом месте

Настроить виджет

1. Откройте настройки Доски идей

2. Установите базовый код виджета

3. Создайте кнопку виджета

4. Возможности виджета в базовой конфигурации

Настроить параметры виджета

Страница по умолчанию

Метод аутентификации

Настроить внешний вид виджета

Мигрировать на новый параметр bubble

Режим отладки

Прикрепить индикатор уведомлений к любому элементу

Цвета уведомлений

Позиция индикатора уведомлений

Ширина виджета

Кастомный CSS-класс

Виджет changelog и уведомления​

Встройте в любом месте​

Настроить виджет​

1. Откройте настройки Доски идей​

2. Установите базовый код виджета​

3. Создайте кнопку виджета​

4. Возможности виджета в базовой конфигурации​

Настроить параметры виджета​

Страница по умолчанию​

Метод аутентификации​

Настроить внешний вид виджета​

Мигрировать на новый параметр bubble​

Режим отладки​

Прикрепить индикатор уведомлений к любому элементу​

Цвета уведомлений​

Позиция индикатора уведомлений​

Ширина виджета​

Кастомный CSS-класс​

Подписать пользователей на релиз ноутсы​

Связанные статьи​

Виджет changelog и уведомления

Встройте в любом месте

Настроить виджет

1. Откройте настройки Доски идей

2. Установите базовый код виджета

3. Создайте кнопку виджета

4. Возможности виджета в базовой конфигурации

Настроить параметры виджета

Страница по умолчанию

Метод аутентификации

Настроить внешний вид виджета

Мигрировать на новый параметр bubble

Режим отладки

Прикрепить индикатор уведомлений к любому элементу

Цвета уведомлений

Позиция индикатора уведомлений

Ширина виджета

Кастомный CSS-класс

Подписать пользователей на релиз ноутсы

Связанные статьи