Section 10: Shortcodes & Widgets (No-Code Tools)

10.1 Embedding Course Info Widgets

Widgets are small, reusable tools you can add to your VirtualX course pages to display important information, boost engagement, or help learners find what they need. With Course Info Widgets, you can share live updates, learner stats, or quick links—without writing a single line of code.

These widgets work using drag-and-drop builders (like Elementor) or shortcodes (special codes that pull live data from the course).

🧩 What is a Course Info Widget?

A Course Info Widget shows dynamic course information like:

• Course title
• Progress bar
• Instructor profile
• Start date, duration, and time left
• Number of students enrolled
• Course rating or reviews
• Button to start/continue course

📌 Widgets help learners quickly see where they are and what to do next.

🛠️ How to Add a Course Info Widget (Using Elementor)

⚠️ This requires your course page or landing page to be built in Elementor. Ask your school admin if unsure.

1. Login to your VirtualX dashboard.
2. Go to Dashboard > Pages or Edit Course Page (front-end).
3. Click “Edit with Elementor”.
4. In the left panel, search for “Course Info” or “VirtualX Widgets”.
5. Drag the desired widget into your page.
   • Examples:
     • 🧑‍🏫 Instructor Widget
     • 📘 Course Title
     • ⏱️ Course Duration
     • 📊 Course Progress
     • 🔘 Start/Continue Button
6. Adjust settings (like alignment, visibility, styling) as needed.
7. Click Update to save the changes.

✅ The widget will now appear for learners when they view the course.

🧾 Widget Use Example

Mr. Jansen adds a “Course Progress” widget and “Instructor Profile” to the top of his Term 2 Maths course. Learners see their percentage completed and know exactly who their teacher is—right from the start.

🧑🏽‍🏫 Common Course Info Widgets You Can Use

Widget Name	What It Shows
📘 Course Title	Displays your full course name
🧑‍🏫 Instructor Info	Teacher profile picture + bio
📊 Progress Bar	Learner’s personal course completion percentage
⏳ Time Remaining	Days left to complete the course
💬 Course Reviews	Star rating + learner feedback
👥 Enrolled Students Count	Total number of active learners
🔘 Start / Resume Button	Direct link to resume the course

🧪 Alternative: Using Shortcodes (for Classic Editor or Widget Areas)

If Elementor is not available, you can use shortcodes inside a text box or widget area.

Example shortcodes:

• [course_title] – shows the course name
• [course_instructor] – shows the teacher’s name
• [course_progress_bar] – shows progress
• [course_students] – shows number of enrolled learners
• [course_button] – start/continue button

🔧 Paste these into a “Text” block or “Shortcode” widget in your page builder.

💡 Tips for Using Widgets Wisely

Tip	Why It Helps
Place widgets at the top of the course page	Learners see key info instantly
Don’t overcrowd the page	Use only 2–4 widgets per view
Use the progress bar or countdown timer	Motivates learners to finish
Show your profile	Builds trust and recognisability
Match widget design with your school theme	Keeps the look consistent and professional

✅ Summary

Course Info Widgets help you build a clear, interactive, and professional-looking course page—all without any coding. Whether through Elementor or shortcodes, you can keep learners informed, motivated, and fully engaged.

10.2 Embedding Certificates

On VirtualX, once learners complete a course and meet the set requirements, they can earn a certificate automatically or manually. But what if you want to show that certificate directly on the course page or let learners download it easily from the course dashboard?

That’s where Certificate Widgets and Shortcodes come in. These allow you to embed certificate blocks onto the front-end of your course—without touching any backend settings or code.

🎓 Why Embed a Certificate Block?

• ✅ Learners can download their certificate quickly
• 👀 It reminds learners of their achievement
• 🎯 It motivates those who haven’t finished yet
• 📋 Teachers and parents can confirm completion at a glance

🛠️ How to Embed a Certificate Widget (Using Elementor)

⚠️ Only available if your school uses Elementor or page builder widgets for course pages.

1. Log into your VirtualX account.
2. Go to Dashboard > Pages or Edit Course Page.
3. Click “Edit with Elementor”.
4. Search for “Certificate” or “VirtualX Certificate Widget”.
5. Drag the Certificate Block widget into your desired position:
   • Usually just below the progress bar or near the course completion section
6. Set the options:
   • Show certificate only when completed
   • Link to auto-generated PDF
   • Display a “Download Certificate” button
7. Click Update to save.

✅ Now, when a learner completes the course and qualifies, they’ll see the button appear automatically.

🧾 What the Widget Can Show

Element	Description
🧍‍♂️ Learner Name	Pulled from learner profile
📘 Course Title	Dynamic, based on current course
📅 Completion Date	Date certificate was issued
🖨️ Download Button	PDF certificate download (1-click)
🏆 Certificate Preview (optional)	A thumbnail showing what the certificate looks like

🧑🏽‍🏫 Example in Action:

Mrs. Ntuli, teaching Grade 9 English, adds a Certificate Block at the end of her course. Once a learner completes the course and scores 60%+, they see a “🎓 Download Your Certificate” button right below the last unit. It’s clean, simple, and automatic.

🧪 Alternative: Use Certificate Shortcodes (Classic Editor or Basic Widget Area)

If Elementor is not used, paste the following shortcode into your unit, page, or widget area:

plaintext

CopyEdit

[certificate_download_button]

This will generate a button that learners can click to get their certificate—only if they’ve earned it.

Other helpful shortcodes:

• [certificate_student_name] – Shows learner’s name
• [certificate_course] – Displays course title
• [course_completion_date] – Displays date of completion

📌 Best Practices for Certificate Embeds

Tip	Why It Helps
Place at the end of the course	Keeps flow logical and avoids confusion
Use only for auto-awarded certificates	Avoids errors or access by unqualified learners
Style it using your school’s colours (Elementor)	Keeps a consistent brand look
Test it using a test learner account	Make sure it appears only after course completion

✅ Summary

Embedding certificates on your course page gives learners a visible, instant reward for completing their work. It’s a simple no-code solution that enhances motivation and makes your course feel complete and professional.

10.3 Login/Profile Shortcodes

On VirtualX, shortcodes allow you to display login forms, profile boxes, or logout buttons directly on pages—without doing any coding. This is especially useful if you want to create a custom landing page, profile hub, or redirect area for your learners or parents.

These shortcodes are simple to copy and paste and work well with Elementor, Classic Editor, or Widget areas.

🔐 Why Use Login/Profile Shortcodes?

• 🎯 Create a quick access page for learners and parents
• 🧑‍💻 Let users log in or out without using the top menu
• 👤 Show profile details without backend access
• ✅ Useful for custom dashboards or support pages

🛠️ Where to Paste Shortcodes

You can paste them into:

• A text block in Elementor
• A Classic Editor page/post
• A Shortcode widget (in sidebar/footer areas)
• A custom course dashboard (if your admin allows)

📋 Common Login/Profile Shortcodes on VirtualX

Shortcode	What It Does
[vibebp_login]	Shows a clean login form (username/password)
[vibebp_profile]	Displays the user’s profile panel
[vibebp_logout]	Adds a logout button
[student_course_list]	Displays a list of student’s enrolled courses
[student_dashboard]	Shortcut to full student dashboard (if using front-end dashboard features)

💡 These shortcodes are safe to use on any front-end page. They will only show content to logged-in users.

👨‍🏫 Example Use Case:

Mr. Naidoo creates a “Learner Login” page for his Grade 8 EMS learners.
He adds [vibebp_login] to the page so learners can log in without going to the main site menu.
Once logged in, they are automatically redirected to their dashboard or course page.

✏️ How to Create a Simple Login Page (Step-by-Step)

1. Go to Dashboard > Pages > Add New Page.
2. Title the page “Login” or “Learner Access”.
3. In the content box, paste:

plaintext

CopyEdit

[vibebp_login]

1. Click Publish.
2. (Optional) Ask your admin to link this page in the main menu or as a redirect page for unregistered users.

🎯 Tips for Using Login/Profile Shortcodes

Tip	Why It Helps
Use on custom homepages or dashboards	Keeps things simple for students
Pair with logout shortcode on the same page	Creates full login/logout control
Only add one shortcode per section	Prevents conflicts or layout breaks
Use profile shortcode on “My Account” pages	Easy access for viewing enrolled courses

✅ Summary

Login and profile shortcodes give you easy tools to control learner access and profile visibility—without needing a developer. Whether it’s for custom dashboards, login pages, or class-specific hubs, these shortcodes make VirtualX more flexible and user-friendly.

10.4 Dynamic Instructor/Student Badges

Badges are a fun and effective way to reward learners and motivate progress. On VirtualX, you can display dynamic badges for both learners and instructors using simple shortcodes or front-end widgets—no coding needed.

These badges can appear:

• On learner profiles
• Inside courses
• On dashboards or certificates
• Publicly (as part of gamification)

🏅 What Are Dynamic Badges?

Dynamic badges are digital icons that:

• Are earned based on real activity (like course completion or quiz scores)
• Automatically display once conditions are met
• Update live—no need to reassign manually

For teachers, they can also reflect:

• Instructor experience
• Number of courses delivered
• Ratings or reviews from students

🎯 They’re like “gold stars” or “achievement stamps” in digital form—adding a fun and motivational layer to the learning journey.

🛠️ How to Display Badges (Using Shortcodes)

Paste any of the following shortcodes into a page, course unit, Elementor block, or profile area.

Shortcode	Purpose
[student_badges]	Displays all badges earned by the logged-in learner
[instructor_badges]	Displays all badges earned by the logged-in teacher
[badge_list]	Shows all available badges for that course
[student_earned_badges course_id=”1234″]	Lists only the badges earned in a specific course

📌 Replace “1234” with your actual course ID when using course-specific shortcodes.

🎨 How to Display Badges Using Widgets (Elementor)

If your school uses Elementor, you can show badge blocks visually.

1. Open the page in Elementor (e.g. learner dashboard or course page).
2. Search for “Badge” in the widget list.
3. Drag “Student Badge Display” or “Instructor Badge Block” into your layout.
4. Set style options:
   • Grid or list layout
   • Show only earned badges or all available
   • Filter by course or role
5. Click Update.

✅ The badge area will now update live as learners earn new achievements.

🧑🏽‍🏫 Example in Action:

Ms. Baloyi adds a dynamic badge section at the end of her Grade 4 English course. Learners see empty badge slots at first. Once they complete all quizzes, the “Reading Star” badge automatically appears in colour. Learners proudly show it off on their profiles.

🔄 What Triggers a Badge?

Badges can be triggered by:

• Completing a unit
• Passing a quiz
• Uploading an assignment
• Earning a certificate
• Logging in regularly
• Getting a top score
• Finishing a course

🎖️ Your school admin may create badge rules—ask them to align with your course goals.

📌 Tips for Effective Badge Use

Tip	Why It Helps
Give badges names learners understand	“Quiz Master” is more fun than “Level 2”
Link badges to effort and consistency	Reward more than just marks
Use visual icons learners relate to	Stars, books, medals, thumbs-up
Display them on dashboards	Builds pride and motivation
Combine with certificates	Double the achievement, double the impact!

✅ Summary

Dynamic badges are a powerful, no-code way to reward learning and build excitement. Whether you’re teaching Grade R or Grade 12, learners love to see their progress recognised—and VirtualX makes it easy for you to show that, live and automatically.