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 App in our 5-min Quickstart Guide.
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
Get your app's <SuperblocksEmbed> component by clicking Embedding → Get embed code in the editor.
import React from 'react';
import { SuperblocksEmbed } from '@superblocksteam/embed-react';
const AppWithEmbed = () => {
return <>
<SuperblocksEmbed
src='https://app.superblocks.com/embed/applications/<APP_ID>'
/>
</>;
}
Get your app's createSuperblocksEmbed snippet by clicking Embedding → Get embed code in the editor.
const sbApp = Superblocks.createSuperblocksEmbed({
id: "sb-app",
src: "https://app.superblocks.com/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.
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
- Interact with the embed by sending data to Superblocks and listen for events