Custom Widgets gives you a widget library of pre-built content blocks to use on your Learner Home page and custom navigation pages, plus the ability to build and upload your own widgets using HTML, CSS, and JavaScript.
Applies to:
- Plan: Plus
- Role: Site Owner, Site Admin
- Platform: Web
What's New with Custom Widgets in the Learner Hub
- Build up to 10 of your own custom widgets using HTML, CSS, and JavaScript
- Place your custom widget anywhere: on the Learner Home or on custom pages — create, view, edit, save placements, drag and reorder.
- Edit the widget once and changes will apply to all placements.
How Custom Widgets Work in the Learner Hub
Widgets are individual content blocks you place on Learner Hub pages using the layout editor. By default, the Learner Hub widget library contains a number of prebuilt widgets that you can use on your Learner Hub and custom pages. Custom widget functionality allows you to create additional widgets using HTML, CSS, and JavaScript. Once a widget is uploaded to your library, it's available to add to the home page or any custom navigation page.
Custom widgets allow you to expand the standard Learner Hub functionality and build exactly what you need to create a unique learning experience for your learners! Add leaderboards, habit trackers, specialized calls-to-action, all in the Learner Hub!
Getting Started with Custom Widgets in the Learner Hub
How to Build and Add a Custom Widget
To get started with the custom widget:
- From your Admin Dashboard, select Learner Hub
- On the Home Page or your custom page, select Edit layout
- Select Custom
- Select + Create widget
- Enter a name for your widget
- Paste your HTML, CSS, or Javascript - you will see a preview as you add code
- Select Create widget
- Click Save
- Drag and drop the newly created widget to your Home page or a custom page by following these steps: How to Customize Your Learner Hub
How to Update a Custom Widget
When you update a custom widget, changes are automatically reflected on all pages where a widget is used. To update the widget that is already in use:
- From your Admin Dashboard, select Learner Hub
- On the Home Page or your custom page, find the widget you want to update
- Click on the cog icon next to the widget's name
- Make any necessary changes
- Select Update widget
- Review the pop-up notifying you that the widget will be updated in all pages where it is used
- Celect Confirm update
To update the widget that is not yet in use:
- From your Admin Dashboard, select Learner Hub
- On the Home Page or your custom page, select Edit layout
- Select Custom
- Find the widget you want to edit
- Click on the cog icon
- Make any necessary changes
- Select Update widget
- Review the pop-up notifying you that the widget will be updated in all pages where it is used
- Celect Confirm update
When updates are confirmed, changes will take effect right away, and your learners will see the updated widget.
How to Delete a Custom Widget
When you delete a custom widget, changes are automatically reflected on all pages where a widget is used. To delete the widget that is already in use:
- From your Admin Dashboard, select Learner Hub
- On the Home Page or your custom page, find the widget you want to update
- Click on the cog icon next to the widget's name
- Go to Settings
- Select Delete widget
- Review the pop-up notifying you that the widget will be deleted in all pages where it is used
- Celect Confirm delete
When the action is confirmed, changes will take effect right away, and your learners will not see the widget anymore.
Important Considerations
- You can create up to 10 custom widgets.
- Custom widgets are available on the Learner Home page and any custom navigation pages. They are not available on the default Learner Hub pages.
- Custom Widgets cannot interact with other elements of the Learner Hub.
Frequently Asked Questions
Can I use a custom widget on more than one page?
Related Articles
- Prerequisites: Custom Navigation Pages: Build a Personalized Learner Hub Navigation
- Prerequisites: How to Customize Your Learner Hub
- Learn more: The Learner Hub