Skip to main content
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. 
npm install --save @superblocksteam/embed-react

​
Step 3. Add the embed component

Add the embed component to your HTML on the page you want the app to appear on.
Get your app’s <SuperblocksEmbed> component by clicking the Share application icon in the app editor’s header, followed by Setup embed in the share modal.
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>'
        />
    </>;
}

​
Step 4. View your embedded app

Run your web app in development mode to view and test the embedded app on your site.
You’ve now successfully embedded your application! Customize and extend your embed’s behavior by exploring the docs below.

​
What’s next?

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