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

[dobradovic]

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 

[piersg · Accepted solution]

You could set up the basic structure and log in logic of an LMS with Hubspot Memberships as @alyssamwilie 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.

[dobradovic]

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

[Kevin-C]

Hey @dobradovic 

Might this be an options?

[dobradovic]

Tnx for response, will check this option!

[piersg · Accepted solution]

You could set up the basic structure and log in logic of an LMS with Hubspot Memberships as @alyssamwilie 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.

[dobradovic]

@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? 

[piersg]

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.

[dennisedson]

@piersg 

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

[tjoyce · Accepted solution]

 

[piersg]

Not possible 😉

[dobradovic]

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 

[tjoyce]

@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]

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 🙂

[tjoyce]

@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

[Kevin-C]

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]

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

[dennisedson]

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 @alyssamwilie 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 😅