Embedding a 3rd party widget in the customer area

Embedding a 3rd party Widget in your User Dashboard

The easiest way to demonstrate populating your user dashboard is to embed a nocode application. Let's take an Airtable view as an example.

Once you are inside an Airtable workspace, if you click on "Share View" option in the navbar, you would see an embed code as follows:

The next step is to copy this embed code and paste it inside the main dashboard page. For this go under "Page Templates" > "Default Template > Edit.

Open up the "app" folder, and "main" page under your "Default" template by clicking Edit:

You will see the following Pug template code, that gets rendered to HTML when it is visited as a page.

Paste the iframe embed code as below. The final code will look like this:

extends common/app-sidebar.pug
block head
  include common/app-head.pug
  +head("Welcome to your Application")
block page_content
  //  Replace with your content 
  .max-w-7xl.mx-auto.px-4.sm_px-6.md_px-8
    h1.text-2xl.font-semibold.text-gray-900 Welcome to your Application!
    iframe.airtable-embed(src="https://airtable.com/embed/shr5QpOYHSZDOdKbY?backgroundColor=red&layout=card&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;")
    h4.text-gray-600 Let's get you set up.
block footer
  include common/app-footer.pug
  +footer()

A quick primer on converting an iframe html tag into Pug syntax:

<iframe class="someClass", attribute1=value1 attr2=val2 ></iframe>

becomes:

iframe(attribute1=value1, attribute2=value2).someClass

Save the page, and click on the "Go to App" button on the left panel of your admin dashboard. You will see the following result:

Serving the Dashboard Page Based on User and Plan

Typically you would wish to deliver an application logic or data based on the user and his/her paid plan. For this the dashboard page embeds a JWT token with this information that would get decoded on your application server before sending the data/application logic. Please check out our more advanced examples for this use case.