Embedded app quickstart

Embedding a Superblocks application on a web page is straight-forward and only involves a few steps.

Step 1. Create an application

Before you start embedding a Superblocks app in your website, you’ll need an application to embed. Learn how to build a Superblocks application in Building with Clark. Once you have an initial version of your app ready, commit & deploy your app.

Step 2. Install the SDK

Install either Superblocks’ React or Javascript SDK into your web application’s client-side code.

React
JavaScript

npm install --save @superblocksteam/embed-react

npm install --save @superblocksteam/embed

Alternatively, add the following <script> into the <head> of your web page.

<script src="https://prod-cdn.superblocks.com/packages/@superblocksteam/embed@latest/embed.bundle.js"></script>

Step 3. Add the embed component

Add the embed component to your HTML on the page you want the app to appear on.

React
JavaScript

import React from 'react';
import { SuperblocksEmbed } from '@superblocksteam/embed-react';

const AppWithEmbed = () => {

    return <>
        <SuperblocksEmbed
            src='https://app.superblocks.com/code-mode/embed/applications/<APP_ID>'
        />
    </>;
}

const sbApp = Superblocks.createSuperblocksEmbed({
    id: "sb-app",
    src: "https://app.superblocks.com/code-mode/embed/applications/<APP_ID>"
});

document.body.appendChild(sbApp);

Step 4. View your embedded app

Run your web app in development mode to view and test the embedded app on your site.

What’s next?

With a basic embedded app on your website, you’re ready to authenticate external users with your Superblocks app.

Getting started

Building with Clark AI

Development lifecycle

Backend logic

Hosting

Step 1. Create an application

Step 2. Install the SDK

Step 3. Add the embed component

Step 4. View your embedded app

What’s next?

Getting started

Building with Clark AI

Development lifecycle

Backend logic

Hosting

​Step 1. Create an application

​Step 2. Install the SDK

​Step 3. Add the embed component

​Step 4. View your embedded app

​What’s next?

Step 1. Create an application

Step 2. Install the SDK

Step 3. Add the embed component

Step 4. View your embedded app

What’s next?