Встроить как 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-класс

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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