Creating and managing widget pages

Disclaimer: Some content in this article outlines how to use functionalities that may not be available on all plans. Get in touch with your account manager (if your plan includes this option) or reach out to Docebo using your platform's Help center if you wish to upgrade your plan.

Introduction

Widget custom pages are fully configurable pages used to create a page layout either from scratch (starting from a blank page) or by using predefined templates ready to use but also customizable.

Every page you create is automatically available both for desktop and mobile. You can create up to 1,000 pages and 250 menus, including built-in pages and the default menu. 

This article covers how to create and configure a custom widget page. Once your page is configured, you also need to add it to the appropriate menus so that your users can access it. For how to do this see the article Making pages and menus visible to users > Make a page visible to your users. 

Creating widget custom pages

To create a widget page: 

1. Select Navigation menu > Customization (shapes icon) > Pages. Then click the plus button in the top right corner.
2. In the New custom page panel, select the Widget custom page option and click Next.
3. In the Details tab, enter the Page name. You can also optionally add a Description of the page, and Code that can serve as a unique identifier for your page.
   → Do not use codes beginning with DOC_ or doc_ as these prefixes are reserved for use by the platform. 

Press Next to proceed to the page configuration.

In the Template tab, either select a template from the list to use a predefined page layout or select the Blank option to design your page from scratch. Then, press Create and edit. You will be redirected to the page Properties tab.

Use the bottom bar to set the status of your page. By default, new pages are published. If you unpublish them, users will not be able to see them in their platform and mobile user menus, even if they have visibility on them. The page will be hidden from the user’s menu until it is Published again. The publishing bottom bar is always visible as you move through the tabs of the Manage Pages area.

While in the Properties tab, open the General settings menu to check and edit the details that you configured in the slideout menu when creating the page. Select an icon to identify your page by clicking on the existing icon and selecting another one in the right panel. You can optionally look for the icon name, but remember that the search only works in English. The icon will be shown before the page name in the menu. Choose the icon from the slideout panel and press Confirm.

In the Additional Page Buttons section, flag whether you want to display the Share content button and the Ask the expert button in the top right corner of your page. When these buttons are displayed, users will be able to upload assets and/or ask experts questions directly from this page using the corresponding buttons. Please note that these options are available only when the Discover, Coach & Share module is active in your platform.

If your page includes a Catalog Widget, define whether to enable the Share this View button so that users can use it to copy the page link on their clipboard in order to share the filtered results of their search within the catalog with other users. Learn more on sharing filtered page deeplinks and on configuring the Catalogs widget.

Note: The option to show the Share this view button available in the Additional Page Buttons section is for desktop pages only, and is not supported on mobile pages. This means that on the mobile app the button to share the view is not available, but please note that the link shared via this button can be opened and the page linked can be viewed from the app too.

Once you’ve finished, press the Save changes button and move to the Composer tab to see the page layout schema.

Pages are always created in the Composer tab, and then automatically made available for mobile in the Mobile Layout tab, but only if at least one of the widgets composing the page is available for mobile too.

Defining the layout of your page

The Composer tab shows the layout schema of your widget page, reflecting the layout of the template you selected or it is blank if you selected the Blank page type when creating the page.

Each page is composed of one or many horizontal rows. A row is an area of the page divided into columns, from one to three. Columns are containers for widgets. When working with templates, rows are automatically configured with the necessary widgets for the template’s purpose, but you can edit them or add extra rows to the page. 

Press the round solid plus button to add a row in the page. Select the widget layout that you want to give to the row from the slideout panel, then press Create. You can edit the row layout at any time by pressing the menu icon at the end of the row and selecting the Change row layout option to define the row layout. Select the layout option that suits you best from the slideout panel, then press the Change layout button for confirmation.

If you change the layout to a smaller size (for example, you switch from a 1/3 - Three columns row layout to a 1/2 - Half-width row layout), the widgets in the removed column are moved to the rightmost of the remaining columns. To move rows in the page, hover your mouse on the row header until a cross icon is displayed. Now click and drag the row and drop it to where you would like to place it.

Widget widths

The following schema represents the width of the columns expressed in pixels on a 100% zoom window in a browser. Please consider that for smaller screens (less than 1400 pixels wide), the column sizes will be reduced accordingly.

Recommended image sizes for page widgets

To ensure images look sharp on all displays, the recommended image widths should be double the widget width (2x rule).

Standard widget widths at 100% zoom (on screens 1400px or wider):

• Full-width widget: 1320px → Image width should be 2640px
• 2/3 widget: 888px → Image width should be 1776px
• 1/2 widget: 660px → Image width should be 1320px
• 1/3 widget: 444px → Image width should be 888px

Supported file formats for images are PNG and JPG, and the maximum file size is 4MB. If you're unsure about the size of your image, check the file properties on your device or contact your system's support team.

Number of widgets per page

The maximum number of widgets allowed for a page (both desktop and mobile) depends on the type of widget you want to insert in the page. Some widgets, called dynamic widgets, have a high impact on page loading since their content is continuously updated. Having many dynamic widgets on a single page may impact the loading performance of the page itself. Other widgets, called static widgets, have a low impact on the page loading, since their content never changes, and it is thus possible to add more widgets of this type on a page.

Here is the list of widgets, divided into dynamic and static widgets:

The maximum number of widgets allowed per page is 20, but the number of dynamic widgets cannot exceed 10. As an example, a page can include 10 dynamic widgets and 10 static widgets, or 5 dynamic widgets and 15 static widgets, or 20 static widgets.

For mobile, dynamic widgets are only allowed among the first 10 widgets of the page, then, starting from the 11th widget, the type of widget must be static. Also note that, for mobile, the HTML/WYSIWYG widget is considered to be a dynamic widget.

When the maximum number of dynamic widgets is reached for a page, upon adding another widget, the right panel for the widget creation will only list static widgets.

Duplicating a row

The row layout can be duplicated to speed up the widget page configuration. In order to duplicate a row layout, press the menu icon at the end of the row, then select the Duplicate row layout option. The new row will be designed below the selected row with the same layout as the original one, but with no widgets inside.

Deleting a row

To delete a row, press the menu icon at the end of the row and select Delete row. Press Confirm and delete from the dialog box to complete the operation. Please note that all the widgets included in the row will also be deleted and that at least one row must be present in the page. You are not allowed to delete a row if it is the only one left. 

Adding widgets to rows

To add a widget to a row, press the plus button and select the widget from Add new widget slideout panel. Configure the widget, then press Add widget to insert it into the selected column. Widgets may have different layouts, depending on the size of the area where they are placed.

When a widget is selected from the list, its preview is displayed in the right panel so that you can get an idea of what it will look like in the page. Remember that some widgets available for desktop are not available for mobile, the mobile icon in the widget area will help you understand which widgets are available for mobile.

To change the settings of a widget, press the menu item in the top right corner of the widget area, then select Edit. Widget settings change depending on the widget, refer to the complete widget list for further information.

Moving widgets and defining widget size

To move widgets on the page, hover your mouse on the widget area until a cross icon is displayed. Drag the widget and drop it into another column of the same row, or to any other row of the page. Please note that widgets with infinite scroll should be placed in the bottom row of the page, with no widget below them since what is placed below an infinite scroll widget may become not visible. Press Save changes when you’re finished. 

Using the mobile layout composer

As you build the layout of your desktop page from the Composer, the layout of the corresponding mobile page is automatically designed in the Mobile layout tab if at least one of the widgets that you added in the composer is available for the mobile app. Since some widgets available for desktop are not available for mobile, mobile pages will not include unsupported desktop widgets.

The widgets currently available for mobile are:

• Activity overview
• Activity stream
• Catalogs
• Channels
• Custom content box (when rendering the widget on the Go.Learn mobile app, width is adapted to screen width, and height is applied filling the box with the image, cropping it if necessary)
• Embed video
• Gamification
• HTML/WYSIWYG (we suggest using the WYSIWYG editor for mobile pages, as we cannot guarantee the widget output when the HTML editor is used)
• Image
• My calendar
• Courses and learning plans
• My profile
• Questions and answers
• Task list

The widgets available for mobile are identified by a mobile icon in the widget area of the composer. Once your desktop page is ready, move to the Mobile layout area to see how the page will look like on a mobile screen. Mobile pages have a single column, and widgets are sorted according to the order they have in the page layout, starting from the first column on the left, from top to bottom, then moving to the other columns.

The order of widgets in mobile pages cannot be changed, but you can hide those you do not need on the mobile page by clicking on the eye icon. Click again on the eye icon to make them visible again. 

Using templates for widget pages

When selecting one of the available templates to build a widget page, the Composer and the Mobile Layout will load the set of widgets in line with the template purpose:

• Informal training dashboard. This template includes the activity stream, courses and learning plan and my calendar.
• Formal training dashboard. This template includes the catalogs, my profile, courses and learning plans and calendar widgets.
• Formal training stream. This template includes the channels widget.
• Courses offering dashboard. This template includes the calendar, user profile, courses and learning plans and catalogs widgets.

Widgets in templates are configured with default settings, such as the widget title, options and timeframe. Options are shown in the widget area in the template.

However, please note that templates are not locked. You can modify the widget settings, as well as their size and position in the page. Also, you can add other widgets in the page or remove existing ones by following the steps described in the other sections of this article.

Configuring widgets via CSS

If you have basic knowledge of CSS, you can customize the widgets composing desktop pages according to your needs via CSS. Any widget available in widget pages is identified by a unique ID in the CSS HTML, automatically assigned by the platform when the widget is created, with the following format:

#doc-widget-{widget_id}

The {widget_id} value is a numeric shortcode. Similarly, you can customize the pages of your desktop platform via CSS. Further information on how to customize the layout of your platform via CSS.

Page preview

The page preview feature allows you to see what your desktop pages will look like for users. Access the page preview by clicking on the Desktop preview tab, after configuring your page with the Composer. In order to make your page look more realistic, widgets in the Preview tab are populated with sample data.

Please note that the page preview is available for desktop pages only. When configuring mobile pages, they are updated in real-time as you press Save changes in the publishing bar. We strongly suggest testing your mobile pages before deploying them, by creating a test menu assigned to a test user. 

Tips and tricks

You can link other pages into widget buttons with their specific URL. If the page you want to link is not present in the loaded menu, you can still link it if you place it in a different menu with the same visibility of the user menu (or full visibility) and placed it at the bottom of the list so that it's not loaded before any other menu.