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;
}

Explore More