User subscription/registration to have access to a particular page.

SOLVE
dobradovic
Contributor

Hi, I'm new to the hubspot. I would need one suggestion and whether it is possible to do that in a HubSpot.

 

I would like to implement a subscription model for specific pages. Means when a user subscribes to be able to access that page.

 

On that page, user would have to choose corses, video material for each course.

 

Can I somehow follow the progress of the user, whether user filled in all the fieds for a certain course or whether user completed video for certain course so he can get certificate?

 

In short, I would like to know which user has completed which course.

 

Thank you for your time 

0 Upvotes
2 Accepted solutions

Accepted Solutions
piersg
Solution
Key Advisor

You could set up the basic structure and log in logic of an LMS with Hubspot Memberships as @amwilie mentions in her post. If you want it as a single-page application you could use like Vue and HubDB to create courses in steps and then potentially create custom contact properties to track progress for the courses (e.g. course_x_progress that is either "Not started", "In progess" and "Completed") and use the Contacts API to update them to "Completed" when they click the last "Next step". If it was not a SPA you could do the same when they reach the last page in your course flow.

View solution in original post

tjoyce
Solution
Recognized Expert | Platinum Partner
16 Replies 16
dennisedson
Community Manager

Hi @dobradovic 

This seems like a big project.  A lot of the answers are going to depend on how comfortable you are at development. 

You could build out a pretty cool vue.js site for this.  Tricky part would be the subscription part.  As @amwilie pointed out to you in this post.  Not to say it isn't doable!  You will just be building a lot of this from scratch

 

@Kevin-C , @piersg , walk me off the edge here if you disagree 😅

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
Kevin-C
Recognized Expert | Partner

Hey @dobradovic  and thanks @dennisedson 

 

Building a LMS is a rather large task, and building one inside of Hubspot complicates that process even further.

 

But to be brief I would suggest building a stand alone app that uses the different HS APIs to essentially use HS as a headless CMS.

dobradovic
Contributor

Can you tell me a little bit more about how to connect stand alone app that uses the different HS APIs? This is interesting!

 

 

0 Upvotes
piersg
Solution
Key Advisor

You could set up the basic structure and log in logic of an LMS with Hubspot Memberships as @amwilie mentions in her post. If you want it as a single-page application you could use like Vue and HubDB to create courses in steps and then potentially create custom contact properties to track progress for the courses (e.g. course_x_progress that is either "Not started", "In progess" and "Completed") and use the Contacts API to update them to "Completed" when they click the last "Next step". If it was not a SPA you could do the same when they reach the last page in your course flow.

View solution in original post

dobradovic
Contributor

@piersg Hey, thanks for response. I will check documentation to see how can I use some of frontend frameworks with HubSpot, also I can use reactJS with HubSpot as I saw in documentation? So for the backend integration Im using HubSpot and HubDB? 

 

 

0 Upvotes
piersg
Key Advisor

Hi @dobradovic, yeah you can use React in Hubspot. They have a boilerplate for it here. @tjoyce is the master when it comes to JS frameworks and Hubspot.

dobradovic
Contributor

This is very helpful, thanks!

 

So when I download and setup my React app with this prepared boilerplate, how do I connect my React app with existing HubSpot project? How can I import it so that can be a landing page with functionality done in React Framework? 🙂 

 

Any advice would be helpful! Tnx @tjoyce 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@dobradovic - I tend to use VUE because it has a bit more modular feeling to it, and if you use the following approach, you can avoid transpiling the javascript locally and pushing through the CLI
Here's a quick approach to get started

Module HTML

{{ require_js("https://cdn.jsdelivr.net/npm/vue@2") }}
{{ require_js("./path-to-my-local-vue-logic.js") }}

<div id="MY_VUE_APP">
  <div>
    <h1>{!! header_text !!}</h1>
  </div>
</div>

 

Create a javascript file

path-to-my-local-vue-logic.js

new Vue({
  delimiters: ['{!!', '!!}'],
  el: '#MY_VUE_APP',
  data: {
    header_text: "Hello World",
  }
});

 

dobradovic
Contributor

Hey tnx for anwser!

 

Can you give me hint about database in HubSpot? 

 

How can I use database with Vue.js? I also need regstration of useres before starting "course". So I need database with my registered users, courses that I will display to users, and which user attended to which course, did user completed course and so on. Do I need some backend integraton or all of these needs can be achive with only HubSpot and VueJS? 

 

Thanks! Every advice would be helpful 🙂

 

 

0 Upvotes
tjoyce
Recognized Expert | Platinum Partner

@dobradovic - I, personally would build a middleware in Laravel (because I'm comfortable with it... it could be any server language / framework you choose) And I would use the middleware to handle all of the API calls as well as the user login and management. 

In your middleware, you can also sanitize data from your server as well as the HS api and then expose some rest endpoints that your VUE code can then call and interact with. 

 

You can use axios in vue to interact with your middleware... 

https://codepen.io/bryanlewis/pen/aWvdGz

 

The middleware should be doing all of the heavy lifting... hope this helps

dennisedson
Community Manager

@piersg 

Careful, don't want @tjoyce 's head to inflate too much 😜

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
piersg
Key Advisor

Not possible 😉

tjoyce
Solution
Recognized Expert | Platinum Partner
Kevin-C
Recognized Expert | Partner
dobradovic
Contributor

Tnx for response, will check this option!

0 Upvotes
dobradovic
Contributor

Thank you everyone for response! This is very useful hints. I will check all of these options that you mention. Big thanks!