Woolf Widget
The Woolf Widget is a key component of SDK-based integrations. It provides students with permanent, visible access to their dashboard, onboarding status, application flow, and compliance alerts. It must remain accessible to all enrolled students and verified teachers at all times.
JS Customization
The Widget renders automatically after a user is authenticated via the SDK. However, in advanced cases, you can control its visibility programmatically.
To suppress automatic rendering, pass { widget: { renderOnInit: false } }
as a second argument during SDK initialization:
import { Woolf } from "@woolfuniversity/sdk";
const woolf = await Woolf.create('userToken', { widget: { renderOnInit: false } });
woolf.widget.show(); // Show the Widget
woolf.widget.hide(); // Hide the Widget
console.log(woolf.widget.isVisible); // Check if visible
When using the SDK via CDN, you can pass widget options globally through window.woolfOptions
:
window.woolfOptions = {
widget: { renderOnInit: false }
};
You can also programmatically open or close the dashboard panel:
woolf.widget.openDashboard();
woolf.widget.closeDashboard();
Degree Application Flow
The Widget can control when and how the student sees their degree application process. To customize onboarding flow per student, use the woolf.user
object, which contains the student's degreeApplications
and educations
.
To trigger a specific application flow manually:
const { id } = woolf.user.degreeApplications.find(app = {
return app.degreeId === 'degreeId';
});
woolf.widget.openApplication(id);
woolf.widget.closeApplication();
The SDK dispatches a custom event once onboarding is complete:
document.addEventListener('woolf:degreeApplicationSubmitted', () = {
woolf.widget.closeApplication();
woolf.widget.show();
});
CSS Customization
You can customize the visual appearance of the Widget’s components using CSS. All UI elements are scoped under the .woolf-widget
class.
.woolf-widget .woolf-widget-button {
background-color: rebeccapurple;
}
.woolf-widget .woolf-widget-modal {
max-width: 960px;
}
.woolf-widget .woolf-widget-indicator {
height: 60px;
width: 60px;
}