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.
-
Build up to 25 of your own custom widgets using HTML, CSS, and JavaScript. Or skip the code altogether and create your custom widget using a conversational AI agent.
-
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.
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 or simply by chatting with an AI agent that generates the code and creates a widget. 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!
For more, see: The Learner Hub
To get started with the custom widget:
-
From the Admin Dashboard, go to Learner hub
-
On the Home Page or your custom page, select Edit layout
-
Select Custom
-
Select + Create widget
-
Enter a name for your widget
-
Use the conversational agent to generate the widget with AI or 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
For more, see: How to Customize Your Learner Hub
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 the Admin Dashboard, go to 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 by using the conversational agent or by editing the code
-
Select Update widget
-
Review the pop-up notifying you that the widget will be updated in all pages where it is used
-
Select Confirm update
To update the widget that is not yet in use:
-
From the Admin Dashboard, go to 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 by using the conversational agent or by editing the code
-
Select Update widget
-
Review the pop-up notifying you that the widget will be updated in all pages where it is used
-
Select Confirm update
Note
When updates are confirmed, changes will take effect right away, and your learners will see the updated 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 the Admin Dashboard, go to 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
-
Select Confirm delete
Note
When the action is confirmed, changes will take effect right away, and your learners will not see the widget anymore.
-
You can create up to 25 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.
Yes. Once uploaded to the widget library, a custom widget is available to add to any Learner Hub page — the home page or any custom navigation page.
Yes! Update your app to version 2.14 to access custom widgets in the Thinkific Mobile or Branded Mobile apps.
Every widget can query Thinkific's GraphQL API to dynamically pull in data from your site. There are no API keys to manage and no setup required. Use the Thinkific.query JavaScript object to fire queries as the currently-logged-in user. Learn more by clicking on the Help tab in the widget creation screen. Explore the GraphQL query here: Thinkific GraphQL.
No, a custom widget cannot interact with other elements of the Learner Hub.