How to integrate VR content in Teachable e-learning courses

There are a couple of things to do next while you're getting set up: making your site private and inviting your team.
"I recently got asked by one of our clients to help deploy a Virtual Reality experience into his online Teachable e-course. WebVR is extremely versatile and by being 100% cloud based, also fairly easy to integrate in other non-VR e-learning platforms."

How to integrate WebVR in a Teachable course

1. In the Courses area of the admin sidebar, navigate to the specific course lecture where you’d like to embed the Virtual Reality experience (click View All if you can’t see your course).

Virtual Reality (VR) for online e-learning courses

2. Select the Curriculum submenu in the admin sidebar.

3. Select the lecture where you want to embed the VR experience.

Virtual Reality (VR) for online e-learning courses

4. When inside the lecture editor, select the Add Text tab

5. To activate HTML mode, click the bracket icon in the top left corner of the text editor. The background of the editor will turn black once the HTML editor is active

Virtual Reality (VR) for online e-learning courses

6. Paste your HTML snippet in the editor as seen in the image below. The link to your VR experience should be within the brackets of the src attribute, as seen in the image.

7. Adjust “width and “height” attributes to match desired display size and aspect ratio (the unit for the values is pixels.)

Virtual Reality (VR) for online e-learning courses

If you don’t have your HTML snippet, you can copy and paste the one beneath, replacing the URL link with your VR experience.

<iframe src="https://g3d.in" embedded="true" width="800" height="400" frameborder="0" marginwidth="0" marginheight="0"></iframe>

8. When your’e done, hit Save. Your VR experience will now show embedded in your online course.

Unfortunately, Teachable does not allow displaying the iframe in fullscreen mode, but as a workaround you can simply link you VR experience to an external window. Keep reading to see how.

Integrate WebVR as link to new tab

  1. Create new lecture
  2. With the “Add Text” tab open, select the link icon
Virtual Reality (VR) for online e-learning courses

3. Paste the link to your WebVR experience in the URL box, and the text that you want displayed in the Text box .

4. Check the box named Open link in new tab and hit Insert.

Virtual Reality (VR) for online e-learning courses

5. After saving the lecture, the link will display in the lecture.

Virtual Reality (VR) for online e-learning courses

Clicking the link will open the Virtual Reality experience in full screen mode in a new tab, as seen below.

GMetri is an easy-to-use no-code XR platform to create, share and track training modules, online stores, product showcases, immersive tours, stories and more.

You've successfully subscribed to Just About Real: The XR Blog By GMetri
Great! Next, complete checkout to get full access to all premium content.
Error! Could not sign up. invalid link.
Welcome back! You've successfully signed in.
Error! Could not sign in. Please try again.
Success! Your account is fully activated, you now have access to all content.
Error! Stripe checkout failed.
Success! Your billing info is updated.
Error! Billing info update failed.