Interactive Modules on Site?

New Contributor

Hi  All!

My company is looking into using a program similar to the training courses HubSpot has on their site, but I'm not sure how they have created the interactive modules. (We'd be creating courses on financial management.)

 

If anyone can point me in the direction of a software or program that'd be similar or knows how HubSpot has theirs set up that'd be great!  

Reply
0 Upvotes
4 Replies 4
Highlighted
Anonymous

Hey @AFSRetire I imagine that HubSpot's own learn center / training sites are built entirely using custom modules, javascript and CSS. Are you a web developer or are you working with one?

 

@Ty do you have any pointers here? Thanks!

Community Manager
Community Manager

Hi @AFSRetire, glad to see you're interested in Academy's framework! (For those who don't know, I am the sole Web Designer/Developer over on Academy). After taking a look at our site, app and learning experiences, this is how I would look at modeling your idea off of Academy.

 

The HubSpot Academy team has a few different ways in which we deliver/host our trainings online.
 
Website: 
First, is our website. academy.hubspot.com currently is a place in which we host training which we want to help bring to the world (and use to generate traffic), as well as be a place for which we can innovate and try new ideas. As far as content goes on here, you'll see a few:
Modular Training:
I was actually the only person who developed/coded on this interface so I can speak a lot on how it works and what it does. To start, Modular Training was built to be extremely lean, because we needed it to run a lot of custom javascript, so this is all the actual layout is.
Screen Shot 2017-06-01 at 12.57.38 PM.pngWe are utilizing the Flex Column module pretty heavily. What this module allows you to do is load prebuilt modules into the template from the edit page interface. This allows me to put up guardrails of design, so everything looks consistent, but still allows our professors to create a module according to their lesson plans. When the page loads, all of the modules are pushed into an array, so that we can access them as a group when we append it into the side tabs. Since the custom modules only hold the information that shows in the panel, we need to pull data like the name, icon, and content type from the module to print onto the navigation. The we utilized a custom tabber design that I created to allow us to tab through the module.
 
Learning Center:
Secondly, we have our own Academy app which we developed here in house. This currently is the place in which all of our certification courses live. There are benefits to developing this type of in-app system because you can better track users who sign up, their progress (course/class compeltion rates), and their likelihood of returning. And lastly, if you're also a software company, you can tie their behavior with educational content to their app usage, retention, and other metrics that matter to your company.
 
Hope this helps you out! Let me know if you have any other questions, or if you want any more explanations Smiley Happy
-- Ty
 
P.S. Thanks for the tag @Anonymous
New Contributor

Thank you so much @Anonymous and @Ty! I'm not a developer, but we did work with one last year when first setting up our site. I've been trying to educate myself more in javascript and CSS but there's so much to learn.

 

I appreciate you both taking the time to respond and I'd be interested in knowing more in how we can develop this within our website. Are there any templates that HubSpot offers we could utilize to create something of this nature?  

Reply
0 Upvotes
Occasional Contributor

Ty, thanks for your reply.

 

I have a somewhat similar question.  We have built a number of content pages and templates in HubSpot, so I am familiar with the environment.

 

I want to add some interactive pages, and I have used Adobe Captivate, which generates Flash content or HTML 5.  Using the Flash content I have built interactive content pages that work pretter well, but I have had no luck with HTML5.  Using HTML5 from Adobe Captivate generates well over 100 files in multiple nested folders.  I have done this on a server with no problem, but I have not been successful in HubSpot.  I tried replicating the file structure in the File Manager, but it did not work.

 

Any ideas?

 

Thanks.

 

Reply
0 Upvotes