Встроить как iframe

Встройте свою Доску идей прямо в ваш продукт с помощью iframe. Пользователи могут получать доступ к доске, не покидая ваше приложение.

В примере ниже показана Доска идей Prioplan, встроенная на страницу и открытая во фрейме.

Встроить доску

Выберите Доску идей и убедитесь, что она опубликована.
Перейдите в Voting settings (Настройки голосования) → Embed (Встраивание) → раздел Embed The Whole Board (Встроить всю доску).
Скопируйте базовый код виджета (Widget Base Code).
Добавьте объект embedBoard в код виджета (обязательно для встраивания).

Ваш финальный код должен выглядеть так:

dclsPxl("initWidget", {
    // Обязательно
    appId: "dc9ae89*******",
    boardId: "78aef2c7c0********",

    user: {
        // Обязательно
        email: "Your user Email",
        hash: "User hash",

        // Опционально
        userID: "Your user ID",
        name: "Your user Name",
        avatar: "https://you-user-avatar-domain/avatar.png",
        company: {
            id: 123,
            name: "Your user Company name",
            customFields: {
                created_at: "2019-06-02 17:10:00",
                spend: 123000,
                mrr: 100,
                plan: "pro",
                prop: value,
            }
        }
    },

    // Обязательно для встраивания Доски идей
    embedBoard: {
        selector: "#selector-where-show-iframe", // CSS-селектор, где отобразить Доску идей
        style: undefined, // Опционально, объект стилей iframe, напр. "style: {position: 'absolute', top: 0}"
    },
});

Установить страницу по умолчанию

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

Настройте defaultView в коде. Установите значение roadmap или changelog:

dclsPxl("initWidget", {
    // Опционально, по умолчанию undefined
    // Используйте 'roadmap' или 'changelog' для открытия конкретной страницы
    defaultView: undefined,
});

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

dclsPxl("initWidget", {
    // Опционально
    // Используйте для открытия конкретного фильтра (только для авторизованных пользователей)
    openNewIdea: true,
    myIdeas: true,
    myVotes: true,
});

Добавить индикатор уведомлений

Показывайте значки уведомлений, чтобы информировать пользователей о новых обновлениях и релизах.

Добавьте объект bubble в код виджета:

dclsPxl("initWidget", {
    bubble: {
        // Опционально, по умолчанию ".Prioplan-changelog-widget"
        // Используйте для индикатора без виджета
        selector: '#embedBoardBuble',

        // Опционально, по умолчанию undefined
        // Очищает исходные стили. Используйте для кастомных стилей через className ТОЛЬКО.
        className: 'some-class-name',

        // Опционально, по умолчанию undefined
        // Настраивает исходные стили.
        style: {
            right: '7px',
            top: '7px',
            backgroundColor: '#db3737',
            borderRadius: '4px',
            fontSize: '13px',
        }
    },
});

Настроить фон

Адаптируйте доску под ваш интерфейс и бренд, добавив прозрачный фон:

embedBoard: {
    // Опционально, по умолчанию false
    // Делает iframe и фон доски прозрачными
    transparent: true,
}

Добавить кастомный CSS-класс

Только для продвинутого использования

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

Используйте bubble.className, чтобы указать ваш класс:

bubble: {
    // Опционально, очищает исходные стили
    // Используйте для кастомных стилей через className ТОЛЬКО. По умолчанию undefined
    className: 'some-class-name',
}

Устаревший параметр

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

Автоматическая подписка на релиз ноутсы

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

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

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

Настройте кастомный email-домен

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

Встроить доску​

Установить страницу по умолчанию​

Добавить индикатор уведомлений​

Настроить фон​

Добавить кастомный CSS-класс​

Автоматическая подписка на релиз ноутсы​

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