Documentation Index
Fetch the complete documentation index at: https://docs.superblocks.com/llms.txt
Use this file to discover all available pages before exploring further.
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
npm install --save @superblocksteam/embed
<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.
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.
