No-code option
Embed the student experience
Prefer not to build against the API? Drop the full student experience — exam list, answer-sheet upload, AI-marked results, and petitions — into your own site with a single <iframe>. There’s no API key and no server-side integration: students sign in with their existing Learning Mate account inside the iframe.
<iframe
src="https://thelearningmate.com/embed/iframe/student?primaryColor=10b981&hideLogo=1"
width="100%"
height="700"
style="border: 0"
></iframe>
Customization
Customize the embed with query parameters on the iframe URL. Invalid values are ignored — they never break the embed.
| Parameter | Example | Effect |
|---|
examId | examId=abc123 | Auto-opens this exam's details dialog after sign-in. |
courseId | courseId=xyz | Shows only this course; falls back to all courses if the student isn't enrolled in it. |
primaryColor | primaryColor=7c3aed | Accent color for buttons, focus rings, and charts as a 6-digit hex, with or without a leading #. Text contrast is chosen automatically. |
hideLogo | hideLogo=1 | Hides the Learning Mate logo on the sign-in card. |
theme | theme=dark | light (the default) or dark. |
The visual parameters are captured at sign-in and persist for the whole embedded session, so in-iframe navigation and reloads keep your look.
Sign-in
Students sign in with their email or mobile number and password — the same Learning Mate student credentials — entered directly in the iframe. Only student accounts can sign in through an embed. Embedded sessions last 12 hours and re-authenticate inside the iframe when they expire.
Auto sign-in optional
If your site already holds the student’s credentials, you can sign them in automatically. Because the session cookie must be created from inside the iframe (so it lands in your site’s cookie partition), you hand the credentials to the iframe via postMessage rather than calling the API yourself. The iframe posts a ready message once it is loaded and signed-out; reply with the credentials:
<iframe id="lm" src="https://thelearningmate.com/embed/iframe/student"></iframe>
<script>
const TARGET = 'https://thelearningmate.com';
window.addEventListener('message', (e) => {
if (e.origin !== TARGET) return;
const msg = e.data;
if (msg?.source !== 'pedai-embed') return;
// The iframe announces it is loaded and signed-out; reply with credentials.
if (msg.type === 'ready') {
document.getElementById('lm').contentWindow.postMessage(
{
source: 'pedai-embed-host',
type: 'signin',
email: 'student@example.com', // or: mobileNumber: '+201234567890'
password: 'the-student-password'
},
TARGET
);
}
if (msg.type === 'signin-error') {
console.warn('Auto sign-in failed:', msg.code);
// INVALID_CREDENTIALS | STUDENT_ONLY | RATE_LIMITED | INTERNAL_ERROR
}
});
</script>
On success the iframe navigates itself to the student area; on failure it posts { source: 'pedai-embed', type: 'signin-error', code } (INVALID_CREDENTIALS, STUDENT_ONLY, RATE_LIMITED, INTERNAL_ERROR) and shows the manual form as a fallback. Only send credentials your site legitimately holds, and always target the exact Learning Mate origin — never '*'.
Browsers & cookies
Inside an iframe the session cookie is set with SameSite=None; Secure; Partitioned (CHIPS), supported by current Chrome, Edge, Firefox, and Safari 18.4+. The cookie is partitioned to your site — it never leaks into a first-party Learning Mate session. HTTPS is required. On browsers that reject partitioned cookies, sign-in appears to succeed but the next page load returns to the embedded sign-in form; offer an “open in a new tab” link to the same URL as a fallback:
<a href="https://thelearningmate.com/embed/iframe/student?examId=abc123" target="_blank">
Open in a new tab
</a>