📓

Widget

Widget

⚠️
Colleges must provide enrolled students and accredited course teachers with permanent access to the Woolf Widget on their platforms. It must be clearly visible and easily accessible throughout a student's educational path. Violation of this rule may result in loss of accreditation.
image

JS Customization

The widget will automatically appear after a user is successfully authorized. No additional configuration is required on your end. However, in rare cases, you may need more manual control. To prevent initial rendering, pass { widget: { renderOnInit: false } } as a second argument during SDK initialization. Then you can manually show or hide the widget and check its current state using the SDK. However, keep in mind the rule of permanent visibility and accessibility of the widget.

import { Woolf } from "@wooluniversity/sdk"

const woolf = await Woolf.create('userToken', { widget: { renderOnInit: false } })

woolf.widget.show()
woolf.widget.hide()
console.log(woolf.widget.isVisible)

You can use window.woolfOptions property to pass configuration when using CDN script.

window.woolfOptions = { widget: { renderOnInit: false } }

Additionally, you have the ability to manually open or close the Woolf dashboard using the methods woolf.widget.openDashboard and woolf.widget.closeDashboard.

woolf.widget.openDashboard()
woolf.widget.closeDashboard()

You can customise student onboarding flow for you case by using woolf.user property which contains degreeApplications and educations fields.

If you want to control when the degree application flow appears, you can choose one of a student's degrees in and pass its ID to woolf.widget.openApplication. This will open an application flow for a student.

const { id } = woolf.user.degreeApplications.find((degreeApplication) => {
	return degreeApplication.degreeId === 'degreeId'
})

woolf.widget.openApplication(id)
woolf.widget.closeApplication()

SDK will propagate woolf:degreeApplicationSubmitted event after student finishes onboarding.

document.addEventListener('woolf:degreeApplicationSubmitted', () => {
	woolf.widget.closeApplication()
	woolf.widget.show()
})

CSS Customization

There is plenty of room for customizing the appearance of the button and modal. You can add and customize related classes to your stylesheet, but keep in mind the rule of permanent visibility and accessibility of the widget.

.woolf-widget .woolf-widget-button {
	backgroud-color: rebeccapurple;
}

.woolf-widget .woolf-widget-modal {
	max-width: 960px;
}

.woolf-widget .woolf-widget-indicator {
	height: 60px;
	width: 60px;
}