📅 Office Hours Engagement Prototypes

5 embeddable designs for Canvas LMS to increase student visits

⓵ PROTOTYPE 1

Weekly Calendar Card

A visual weekly view showing exactly when and where office hours are held. Color-coded for in-person vs. virtual sessions.

JS

Dr. Jane Smith — Office Hours

Computer Science 101 · Spring 2026

Mon
2:00 – 4:00 PM
In-person
Tue
—
Wed
2:00 – 4:00 PM
In-person
Thu
—
Fri
10:00 – 12:00 PM
Virtual
In-person
Virtual (Teams)
Room 312, Science Building
⓶ PROTOTYPE 2

Add-to-Calendar Widget

One-click buttons to add each office hours session to Google Calendar, Outlook, or download an .ics file. Reduces friction by putting it directly on the student's calendar.

Never Miss Office Hours

Add recurring sessions to your personal calendar with one click

MON

Monday Office Hours

2:00 – 4:00 PM · Room 312 · In-person

Google .ics
WED

Wednesday Office Hours

2:00 – 4:00 PM · Room 312 · In-person

Google .ics
FRI

Friday Virtual Office Hours

10:00 AM – 12:00 PM · Microsoft Teams · Virtual

Google .ics
⓷ PROTOTYPE 3

Microsoft Bookings Embed

Embed your Microsoft Bookings page directly inside Canvas so students can self-schedule appointments without leaving the LMS.

B

Schedule an Appointment

Book a one-on-one session with Dr. Jane Smith

Microsoft Bookings Integration

Replace this placeholder with your Microsoft Bookings iframe. Your Bookings URL will look like:

https://outlook.office365.com/owa/calendar/YourPage@university.edu/bookings/ Open Bookings Page
Appointments are typically 15 or 30 minutes. You'll receive a confirmation email after booking.
⓸ PROTOTYPE 4

Countdown + Encouragement Banner

A live countdown to the next office hours session with rotating motivational messages and social proof to normalize visiting. Creates urgency and reduces anxiety.

Next session coming up
Next office hours start in:
0 Days
2 Hours
15 Minutes
42 Seconds
Wednesday, 2:00 PM
Room 312, Science Building
"Students who visit office hours at least once are 3x more likely to earn an A in the course. You don't need a specific question — just come say hi!"
💡 Did you know?
Book a Slot Drop In (No Appointment Needed)
⓹ PROTOTYPE 5

All-in-One Office Hours Dashboard

The complete package: weekly schedule, live countdown, quick-action buttons, and motivational tips — all in one compact, embeddable panel.

JS

Dr. Jane Smith

CS 101 · Office Hours Hub

Open for visits
This Week's Schedule
Mon
2–4p
Tue
—
Wed
2–4p
Thu
—
Fri
10–12
Next Session
02:15:42
until office hours
Wed 2:00 PM · Room 312
Quick Actions
📅 Book an Appointment 📧 Email Dr. Smith 🗓️ Add to My Calendar
Why Visit?
💡 Tip of the Week
You don't need a specific question to visit office hours! Many students come just to review concepts, get study tips, or chat about career paths. Dr. Smith loves meeting students.
Visit Office Hours — Everyone is Welcome!
©