> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baselayer.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Playground
> Build a hosted enrollment journey in Console's builder, brand it, and go through it as an applicant.
export const EnrollmentPlayground = () => {
const frameRef = useRef(null);
useEffect(() => {
const frame = frameRef.current;
let observer = null;
const track = () => {
const page = frame.contentDocument;
if (!page) {
return;
}
const rect = frame.getBoundingClientRect();
const top = Math.max(0, -rect.top);
const bottom = Math.max(top, Math.min(rect.height, window.innerHeight - rect.top));
const style = page.documentElement.style;
style.setProperty("--playground-visible-top", `${top}px`);
style.setProperty("--playground-visible-height", `${bottom - top}px`);
style.setProperty("--playground-visible-bottom", `${rect.height - bottom}px`);
};
const fit = () => {
const page = frame.contentDocument;
observer?.disconnect();
observer = new ResizeObserver(() => {
frame.style.height = `${Math.ceil(page.body.getBoundingClientRect().height)}px`;
track();
});
observer.observe(page.body);
track();
};
document.addEventListener("scroll", track, {
capture: true,
passive: true
});
window.addEventListener("resize", track);
if (frame.contentDocument?.readyState === "complete") {
fit();
}
frame.addEventListener("load", fit);
return () => {
frame.removeEventListener("load", fit);
document.removeEventListener("scroll", track, {
capture: true
});
window.removeEventListener("resize", track);
observer?.disconnect();
};
}, []);
const page = `
The playground could not load. Reload the page; if this persists, contact support@baselayer.com.
`;
return ;
};
This is Console's journey builder, running entirely in your browser. Build a journey, brand it with your own colors, logo and font, save it, then use **Copy Test Link** to go through it as an applicant. Nothing is sent anywhere: journeys, logos and fonts stay in this tab, and the businesses and the applicant are made up. Uploaded logos and fonts stay in the editor, so test links and shared links show the default ones.
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.