Виджеты

В правой части Главной страницы по умолчанию выводятся виджеты. Здесь можно отобразить стандартные виджеты Битрикс24, виджеты созданные специально для Главной страницы, а также виджеты других решений Улья.

Стандартные виджеты Битрикс24Стандартные виджеты Битрикс24

На Главной странице можно вывести стандартные виджеты Битрикс24 — это те виджеты, которые пользователи видят в разделе «Лента».

Важные сообщенияВажные сообщения

На виджете выводятся все сообщения, которые при публикации в ленте были отмечены как важные. Важные сообщения остаются на виджете столько, сколько длится активность таких сообщений в Ленте. При этом, если пользователь нажмет на кнопку «Я прочитал(-а)», то данное важное сообщение больше не будет отображаться на виджете.

Отображение виджета на главной странице

Важное сообщение и аналогичный виджет в разделе «Лента»

ПульсПульс

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

Мои задачиМои задачи

Виджет отображает задачи текущего пользователя, где он выступает в следующих ролях: делаю, помогаю, поручил, наблюдаю. При нажатии на плюс (+) откроется слайдер для создания новой задачи.

При клике на строку осуществляется переход на страницу задач с предустановленным фильтром по одной из ролей: «Делаю», «Помогаю», «Поручил», «Наблюдаю».

Бизнес-процессыБизнес-процессы

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

При клике на строку «Ждут реакции» выполняется переход на страницу «Задания бизнес-процессов» (/company/personal/bizproc/). Здесь пользователь видит бизнес-процессы, в которых ему нужно принять участие.

При клике на строку «Мои процессы» выполняется переход на одноименную страницу Битрикс24 (/company/personal/processes/). Здесь пользователь видит бизнес-процессы, которые запустил он сам.

Дни рожденияДни рождения

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

Ближайшие событияБлижайшие события

На виджете отображаются ближайшие события из календаря пользователя и компании. При клике на конкретное событие открывается слайдер с описанием этого события. При нажатии на плюс (+) открывается слайдер для создания нового события.

ПопулярноеПопулярное

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

Виджеты Главной страницыВиджеты Главной страницы

Помимо стандартных виджетов Битрикс24, которые дублируются из раздела «Лента», на Главной странице есть несколько собственных виджетов, которые появляются при установке модуля.

ОтсутствияОтсутствия

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

СсылкиСсылки

Виджет предназначен для добавления полезных ссылок, например на сайты партнеров, полезные разделы корпоративного портала и тому подобное.

Добавлять новые ссылки могут только привилегированные пользователи. Для этого перейдите в административную часть портала по пути: адрес_портала/bitrix/admin. В левом меню нажмите «Контент» > «Главная страница» > «Ссылки». Нажмите кнопку «Добавить ссылку».

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

1. Активность. Опция влияет на отображение ссылки на виджете. Если галочка отключена, пользователи не будут видеть данную ссылку. Доступ к ссылке останется только в административной части портала у привилегированных пользователей.

2. Название. Обязательное поле для названия ссылки.

3. Сортировка. Настройка позволяет указать порядок, в котором ссылки будут размещены на виджете. Ссылки с наименьшим значением будут впереди, а с наименьшим — в конце.

4. Открывать в новом окне. Опция позволяет выбрать, открывать ссылку в новой вкладке или в той же.

5. Ссылка сноски. Поле для указания ссылки, по которой должны перейти пользователи.

6. Иконка. Поле для загрузки иконки, которая иллюстрирует ссылку. Иконка также является кликабельной. Для загрузки доступны картинки в формате gif, bmp, jpeg, webp, svg, png, jpg. Размер иконки фиксированный: 24x24px. Если иконка больше по ширине/высоте, то она сжимается/обрезается и центрируется.

Сохраните изменения. После этого новая ссылка появится на виджете.

Социальные сервисыСоциальные сервисы

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

Добавлять новые ссылки могут только привилегированные пользователи. Для этого перейдите в административную часть портала по пути: адрес_портала/bitrix/admin. В левом меню нажмите «Контент» > «Главная страница» > «Ссылки». Нажмите кнопку «Добавить сервис».

Для заполнения будут доступны поля:

1. Название. Обязательное поле для названия ссылки.

2. Сортировка. Настройка позволяет указать порядок, в котором ссылки будут размещены на виджете. Ссылки с наименьшим значением будут впереди, а с наименьшим — в конце.

3. Открывать в новом окне. Опция позволяет выбрать, открывать ссылку в новой вкладке или в той же.

4. Открывать в новом окне. Опция позволяет выбрать, открывать ссылку в новой вкладке или в той же.

5. Ссылка сноски. Поле для указания ссылки, по которой должны перейти пользователи.

6. Иконка. Поле для загрузки иконки, которая иллюстрирует ссылку. Иконка также является кликабельной. Для загрузки доступны картинки в формате gif, bmp, jpeg, webp, svg, png, jpg. Размер иконки фиксированный: 30x30px. Если иконка больше по ширине/высоте, то она сжимается/обрезается и центрируется. Обратите внимание, что загруженная иконка будет отображаться на сером фоне.

Сохраните изменения. После этого новая ссылка появится на виджете.

Виджеты решений УльяВиджеты решений Улья

Также на Главной странице отображаются виджеты других модулей Улья.

Корпоративный университетКорпоративный университет

Виджет отображает текущие активные карточки развития сотрудника, прогресс по ним и развиваемые компетенции. По нажатию на стрелку (→) пользователь перейдет в личный кабинет Корпоративного университета. По нажатию на кнопку «Открыть» пользователь откроет слайдер с данной карточкой развития.

Личный кабинет Корпоративного университета

Карточка развития

Подробнее о решении

Виджет может выглядеть по-разному в зависимости от следующих условий:

• Модуль «Корпоративный университет» не установлен

• У пользователя еще нет запущенных карточек развития

• Для пользователя запущено сразу несколько карточек развития

Управление целямиУправление целями

Виджет данного модуля называется «Мои цели». На виджете выводится информация о целях сотрудника и прогрессе по ним. При нажатии на стрелку в шапке виджета (→) пользователь попадет на страницу списка целей. При нажатии на стрелку «Моя карточка целей» (→) пользователь откроет слайдер с его карточкой целей. При нажатии на блок «Оценка прогресса» пользователь попадет в свою последнюю карточку оценки.

Список целей

Карточка целей

Карточка оценки

Подробнее о решении

Виджет может выглядеть по-разному в зависимости от следующих условий:

1. Модуль «Управление целями. Каскад» не установлен.

2. Модуль установлен, но пользователь не участвует в процессе постановки целей, поэтому у него нет карточек целей и оценок.

3. Карточка целей пользователя находится на согласовании.

Оценка 360Оценка 360

На виджете выводится информация о текущей и завершенной оценке сотрудника, а также о его итоговых оценках по компетенциям. При нажатии на стрелку в шапке виджета (→) пользователь попадет на страницу со списком отчетов об оценке. При нажатии на стрелку «Моя последняя оценка» (→) пользователь попадет в свой самый последний отчет о проведенной оценке.

Список оценок

Отчет об оценке

Подробнее о решении

В блоке виджета «Мои компетенции» выводятся наиболее и наименее развитые компетенции по результатам последней проведенной оценки. Они берутся из отчета об оценке — там есть аналогичный блок. Если навести курсор на компетенцию, появится детальная информация: итоговая оценка по данной компетенции. Если данная компетенция оценивалась не первый раз, то при наведении здесь также отобразится динамика итоговой оценки: на сколько баллов она выросла или упала по сравнению с прошлым разом.

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

Виджет может выглядеть по-разному в зависимости от следующих условий:

1. Модуль «Оценка 360» не установлен».

2. Модуль установлен, но по сотруднику еще не производилось ни одной оценки.

3. У пользователя есть запущенная оценка и нет завершенных оценок.

4. У пользователя есть одна завершенная оценка.

5. Оценка пользователя завершена и в процессе этой оценки пользователь воздержался от самооценки. В этом случае блока «Я себя» на виджете не будет.

6. У пользователя уже есть завершенная оценка и в данный момент для него запущена новая оценка.

7. Помимо Оценки 360 на портале установлен модуль «Корпоративный университет». В этом случае вместо названий компетенций на виджете будут отображаться их иконки, выбранные в Корпоративном Университете.

ГеймификацияГеймификация

Виджет данного модуля называется «Бонусная программа». Виджет отображает текущий уровень (ранг) сотрудника, его количество баллов на счету и сумму баллов «Спасибо», которые сотрудник может передавать коллегам. При нажатии на стрелку (→) открывается Лента событий — это стартовая страница модуля «Геймификация».

При нажатии на «Спасибо» открывается слайдер для передачи баллов «Спасибо» другим сотрудникам. А нажатие на кнопку «Магазин бонусов» открывает страницу магазина Геймификации, где сотрудники могут приобретать товары за накопленные баллы.

Инструкция к модулю

Подробнее о решении

Если модуль «Геймификация» не установлен, то виджет будет выглядеть следующим образом:

HelpDeskHelpDesk

Виджет отображает статусы обращений в техподдержку через модуль HelpDesk. Обычные пользователи (клиенты техподдержки) видят на виджете статусы только своих обращений. Администраторы портала, администраторы техподдержки и сотрудники техподдержки видят на виджете статусы всех созданных обращений.

Инструкция к модулю

Подробнее о решении

При нажатии на плюс (+) открывается слайдер для создания нового обращения.

Если модуль «HelpDesk» не установлен, то виджет будет выглядеть следующим образом:

Карта офиса + Бронирование рабочих местКарта офиса + Бронирование рабочих мест

Виджет данного модуля называется «Мои бронирования». На виджете каждый сотрудник видит свои брони рабочих мест, а также рабочие места, которые за ним закреплены.

Инструкция к модулю

Подробнее о решении

По нажатию на плюс (+) сотрудник попадает на страницу бронирования рабочих мест.

Виджет может выглядеть по-разному в зависимости от следующих условий:

1. Модуль «Карта офиса + Бронирование рабочих мест» не установлен»

2. Модуль установлен, но у сотрудника еще нет бронирований

ОпросыОпросы

Когда на портале установлен модуль «Улей: Опросы», на Главной странице можно вывести сразу два виджета с опросами: Опросы и Пульс-опросы.

Виджет «Опросы». Виджет показывает активные и завершенные исследования, добавленные в модуль «Опросы». В том числе в модуль попадают опросы, добавленные через Ленту событий.

По клику на виджет пользователь попадает на главную страницу Опросов.

Виджет «Пульс-опросы». Пульс-опросы — это короткие и регулярные исследования, которые нужны, чтобы оперативно получать обратную связь от сотрудников. Такие опросы включают не больше 1-3 вопросов и позволяют узнать о климате в коллективе, об удобстве рабочих процессов и так далее.

На виджете сотрудники могут быстро проголосовать во всех активных пульс-опросах. Числовой индикатор показывает, сколько всего опросов доступно для участия, а стрелки позволяют переключаться между ними. При необходимости по нажатии на стрелку (→) можно перейти на главную страницу модуля «Опросы».

Виджет может выглядеть по-разному в зависимости от следующих условий:

1. Опрос не содержит вопросов.

2. Текущий пользователь является администратором или редактором опросов. В этом случае на виджете будет кнопка шестеренки (⚙️), которая открывает меню управления опросом.

Инструкция к модулю

Подробнее о решении

Настройка виджетовНастройка виджетов

Некоторые виджеты на Главной можно редактировать, если у пользователя включен режим правки. Права на редактирование есть только у администраторов портала. Для редактирования доступны следующие виджеты:

• Мои задачи

• Дни рождения

• Ссылки

• Социальные сервисы

• Ближайшие события

Для редактирования вышеперечисленных виджетов у вас должна быть активна административная панель. На административной панели нажмите кнопку «Компоненты» чтобы открыть список элементов для редактирования.

Мои задачиМои задачи

Для редактирования этого виджета выберите в списке компонент bitrix:tasks.widget.rolesfilter.

В результате откроется окно с настройками виджета. Здесь обратите внимание на опцию «Отображать ссылку на раздел». Если стоит значение «Да», то заголовок виджета будет являться ссылкой на страницу со списком задач пользователя. Значение по умолчанию — «Нет».

Дни рожденияДни рождения

Для редактирования этого виджета выберите в списке компонент «Дни рождения».

В результате откроется окно с настройками виджета. Здесь доступны следующие настройки:

1. Шаблон компонента. Эта опция позволяет настроить внешний вид виджета. Здесь доступно два шаблона: include_area и sparkle.

Шаблон include_area (выбран по умолчанию) представляет собой список дней рождения, а шаблон sparkle представляет собой слайдер со стрелками для переключения слайдов. В шаблоне include_area фотография пользователя имеет размеры 50x50px, а в шаблоне sparkle — 38x38px.

2. Количество выводимых пользователей. Параметр отвечает за количество отображаемых пользователей на виджете. Значение по умолчанию — 4.

3. Отображать ссылку на раздел. Если задано значение «да», то в шаблоне include_area отображается ссылка «Еще», по клику на которую осуществляется переход на страницу дней рождения адрес_портала/company/birthdays.php. Если используется шаблон sparkle, то ссылкой становится заголовок виджета. Значение по умолчанию — нет.

СсылкиСсылки

Для редактирования этого виджета найдите в списке компонент «Список новостей», в котором выбран шаблон urls. В списке есть несколько разных компонентов «Список новостей», для редактирования виджета нужен тот, который находится сразу под компонентом «Дни рождения» в нижней части списка.

В результате откроется окно с настройками виджета. Здесь доступны следующие настройки:

1. Количество новостей на странице. Параметр устанавливает максимальное количество ссылок, отображаемых в виджете. Значение по умолчанию — 20.

2. Поле для первой сортировки новостей. В этом поле можно выбрать признак, по которому будет выполняться сортировка ссылок:

• ID. Порядок ссылок на виджете будет определяться с учетом их ID. Например, ссылка с наименьшим ID будет первой, а с наибольшим — последней.

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

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

• Сортировка. Порядок ссылок на виджете будет определяться с учетом заданных индексов сортировки. Например, ссылка с индексом 10 будет первой, а с индексом 50 — последней.

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

3. Направление для первой сортировки новостей. В этом поле можно выбрать порядок сортировки: по возрастанию или по убыванию. Например, от 1 до 10, от А до Я, от более ранней даты к более поздней, или наоборот — от 10 до 1, от Я до А, от поздней даты к ранней.

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

5. Направление для второй сортировки новостей. В этом поле можно выбрать порядок дополнительной сортировки: по возрастанию или по убыванию.

Социальные сервисыСоциальные сервисы

Для редактирования этого виджета найдите в списке компонент «Список новостей», в котором выбран шаблон socials. В списке есть несколько разных компонентов «Список новостей», для редактирования виджета нужен тот, который находится под компонентом «Дни рождения» в нижней части списка.

В результате откроется окно с настройками виджета. Здесь доступны следующие настройки:

1. Количество новостей на странице. Параметр устанавливает максимальное количество сервисов, отображаемых в виджете. Значение по умолчанию — 20.

2. Поле для первой сортировки новостей. В этом поле можно выбрать признак, по которому будет выполняться сортировка сервисов:

• ID. Порядок сервисов на виджете будет определяться с учетом их ID. Например, сервис с наименьшим ID будет первым, а с наибольшим — последним.

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

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

• Сортировка. Порядок сервисов на виджете будет определяться с учетом заданных индексов сортировки. Например, сервис с индексом 10 будет первым, а с индексом 50 — последним.

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

3. Направление для первой сортировки новостей. В этом поле можно выбрать порядок сортировки: по возрастанию или по убыванию. Например, от 1 до 10, от А до Я, от более ранней даты к более поздней, или наоборот — от 10 до 1, от Я до А, от поздней даты к ранней.

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

5. Направление для второй сортировки новостей. В этом поле можно выбрать порядок дополнительной сортировки: по возрастанию или по убыванию.

Ближайшие событияБлижайшие события

Для редактирования этого виджета выберите в списке компонент «Список событий календаря 2.0».

В результате откроется окно с настройками виджета. Здесь доступны следующие настройки:

1. Шаблон компонента. Эта опция позволяет настроить внешний вид виджета. Здесь доступно два шаблона: mainpage и sparkle.

Шаблон mainpage (выбран по умолчанию) представляет собой обычный список событий, а шаблон sparkle представляет собой слайдер со стрелками для переключения слайдов.

2. Количество событий в списке. Опция позволяет указать максимальное количество отображаемых событий на виджете. Значение по умолчанию — 3.

3. Отображать ссылку на раздел. Если стоит значение «Да», то заголовок виджета будет являться ссылкой на раздел «Календарь» текущего пользователя. Значение по умолчанию — «Нет».

Управление блоком с виджетамиУправление блоком с виджетами

При необходимости виджеты можно редактировать, а также полностью или частично убрать с Главной страницы. Обратите внимание, что права на это есть только у администраторов портала.

Перейдите в административную часть портала по пути: адрес_портала/bitrix/admin/. В шапке портала нажмите «Настройки» > «Улей: Главная страница». Также вместо этих шагов вы можете сразу же перейти по ссылке: адрес_портала/bitrix/admin/settings.php?lang=ru&mid=ithive.homepage.

Во вкладке «Компоненты» обратите внимание на таблицу «Правый блок». Чтобы полностью скрыть блок с виджетами уберите галочку рядом с заголовком «Правый блок» и сохраните изменения.

В результате блок с виджетами больше не будет отображаться на Главной. При этом все виджеты и их настройки будут сохранены. Чтобы вернуть виджеты на Главную активируйте соответствующую галочку в настройках модуля.

Вид главной страницы без блока с виджетами

Для того чтобы скрыть конкретный виджет, уберите галочку «Активность» только у него и сохраните изменения.

На этой же вкладке настроек виджеты можно редактировать. Здесь обратите внимание на следующие поля:

• Активность. Опция, которая влияет на отображение виджета на Главной. Если галочка не стоит, виджет не виден в публичной части портала.

• Сортировка. Опция влияет на очередность виджетов на Главной. Чем меньше значение, тем выше будет расположен виджет.

• Название. Обязательное поле с названием виджета. Название любого виджета можно скорректировать, в том числе стандартных. Обратите внимание, что при изменении названий стандартных виджетов Битрикс24, новое название будет отображаться только на Главной. В разделе «Лента» названия стандартных виджетов не изменятся.

Как создать свой виджетКак создать свой виджет

Также в настройках модуля предусмотрена возможность добавлять свои виджеты. Права на это есть только у администраторов портала. Для создания нового виджета нажмите на кнопку «Добавить виджет» внизу таблицы.

В добавленной строке укажите код виджета. Код виджета — это html-код, в том числе и тег <script></script>. Готовые виджеты с кодом для копирования можно искать в специальных сервисах, например по запросу «Виджет на сайт» и тому подобное. В рамках данного примера мы добавим на Главную страницу виджет курса валют.

Важно настроить ширину виджета, чтобы она соответствовала размерам виджетов в Битрикс24 — 280px. Как правило, настройка размеров уже предусмотрена в сервисах по выбору виджетов. В ином случае ширину можно задать непосредственно в html-коде виджета. Для этого нужно указать 280 напротив параметра «width». При необходимости вы также можете настроить высоту виджета (height).

Далее укажите название виджета и сортировку. Сохраните изменения.

После сохранения поставьте напротив виджета галочку «Активность» и сохраните изменения еще раз.

В результате на Главной странице отобразится новый виджет:

При наличии знаний html, css, js и bitrix framework вы также создавать свои виджеты с нуля, например, добавить виджет с формой обратной связи: