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 } });
// Show the Widget
woolf.widget.show();
// Hide the Widget
woolf.widget.hide();
 // Check if visible
console.log(woolf.widget.isVisible); 

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 degreeStudents and educations.

To trigger a specific application flow manually:

const { id } = woolf.user.degreeStudents.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;
}

/* Overlay element for dim background */
.woolf-widget-overlay[active='true'] {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}

Modal Events

The SDK contains modal event callbacks and an enum for better tracking and usability.

enum WoolfModal {
  Application = 'woolf-application',
  Dashboard = 'woolf-dashboard'
}
const woolf = await Woolf.create('userToken', {
  widget: {
    modal: {
      onClose: (modal) = {
        if (modal === WoolfModal.Dashboard) console.log('Close dashboard modal');
      },
      onOpen: (modal) = {
        if (modal === WoolfModal.Application) console.log('Open application modal');
      },
      onClickAway: (modal, { close }) = {
        // Allow closing modal by clicking outside
        close();
      }
    }
  }
});

Explore More