App UI: Protected Content

Melvin Cruz

Created Oct 12, 2022

App UI: Protected Content

Dependency: https://go.booya.io/admin/signin
and
make sure you already setup the Booya code snippet in your portal.

Compatible Templates

  • Nexus Portal - App UI Client Portal

  • Nexus Portal - App UI Partner Portal

  • Nexus Portal - App UI Home Screens 1

  • Nexus Portal - App UI Demo

  • Nexus Portal - App UI Knowledge Base

  • Nexus Portal - App UI Onboarding

  • Nexus Portal - App UI Course Login

21
    h

Hubspot

2 Steps
1

Go to Edit Page

2

Paste "App UI: Protected Content" into input

Paste "App UI: Protected Content" into input
    4

Hubspotpreview-na1

3 Steps
3

Drag highlighted option

You can drop it anywhere in Drag and Drop Section

Drag highlighted option
4

Click on Content Protection

Click on Content Protection
5

Click on There are no comments on this website page…

Click on There are no comments on this website page…
    a

Hubspot

2 Steps
6

Go to Booya — User Authentication and Management for HubSpot

7

Click on Sign in with Hubspot

    b

Booya

4 Steps
8

Go to HubSpot OAuth

9

Choose Account

Choose Account
10

Go to Authentication — Booya

11

Configure your own Dashboard

The screenshot below is just a sample.

Configure your own Dashboard
    a

Hubspot

2 Steps
12

Click "Show Code Snippets"

Click "Show Code Snippets"
13

Click on highlight

Click on highlight
    g

Booya

4 Steps
14

Go to HubSpot Settings

Go to HubSpot Settings
15

Click on Pages

Click on Pages
16

Add custom code snippets in HubSpot

Add custom code snippets in HubSpot
17

Setup your own login page URL in HubSpot Website Pages/Landing Pages

The screenshot below is just a sample.

Setup your own login page URL in HubSpot Website Pages/Landing Pages
    d

Digikat

1 Step
18

Setup your own redirected URL in HubSpot Website Pages/Landing Pages after signing in

Setup your own redirected URL in HubSpot Website Pages/Landing Pages after signing in
    g

Booya

4 Steps
19

Click on highlight

Click on highlight
20

Go to Edit Page

21

Click on ba3bf634-1dde-41fb-8d9b-95b412a49f95

Click on ba3bf634-1dde-41fb-8d9b-95b412a49f95
22

Paste "ba3bf634-1dde-41fb-8d9b-95b412a49f95" into text area

Paste "ba3bf634-1dde-41fb-8d9b-95b412a49f95" into text area
    a

Hubspot

1 Step
23

Go to Login Page

    g

Booya

2 Steps
24

Click on email

Click on email
25

Type "email@..."

Type "email@..."
    h

Hubspot

3 Steps
26

Type password

Type password
27

Click on Sign In

Click on Sign In
28

Conditionally show the content if the user is logged in.

Conditionally show the content if the user is logged in.
Well done!
Create how-to guides like this in a snap. Get Tango now.