> ## 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.

# Embedded applications

export const CardGrid = ({cards}) => {
  if (!cards || !Array.isArray(cards)) {
    return null;
  }
  return <div className="card-grid">
      {cards.map((card, index) => {
    const hasDescription = card.description;
    const hasImage = card.image;
    const isImageOnly = hasImage && !hasDescription;
    return <a key={index} href={card.href} className={`card-grid-item ${isImageOnly ? 'card-grid-item-centered' : ''}`}>
            {card.image && <img src={card.image} alt={card.title} className="card-grid-image" />}
            <h3 className="card-grid-title">{card.title}</h3>
            {card.description && <p className="card-grid-description">{card.description}</p>}
          </a>;
  })}
    </div>;
};

Bring your app to where your users are. Accelerate time-to-market for new features while delivering a cohesive user-experience that fits your app's look and feel perfectly.

<img src="https://mintcdn.com/superblocks/gv-69CnRrBMTuWPu/images/applications/embedding/cover.png?fit=max&auto=format&n=gv-69CnRrBMTuWPu&q=85&s=534e4f3c1c686fe8c478e8dcc6da2d75" alt="Square application with dashboard containing Superblocks embed" width="2240" height="1210" data-path="images/applications/embedding/cover.png" />

Empower stakeholders inside and outside your organization with Embedded Apps.

* **Business Leaders** get a fast way for their teams to deliver new applications to market
* **CTOs** & Engineering Leaders get a cost-effective low-code solution for enhancing existing tools and portals, without the maintenance burden of legacy
* **Developers** are empowered to build new features quickly for customers and internal teams without parsing through legacy code using a modern SDK
* **Business users & customers** enjoy a seamless white-labeled experience with access to new features and functionality, improving satisfaction and productivity

## Embed anywhere with Superblocks SDKs

Superblocks Embed SDKs make it quick and simple to embed Superblocks apps into any JavaScript enabled website. Match your app's framework with SDKs for [React](https://www.npmjs.com/package/@superblocksteam/embed-react) and [JavaScript](https://www.npmjs.com/package/@superblocksteam/embed). Simply install the SDK and copy/paste a short code snippet.

## Integrate with your existing authentication

Say goodbye to multiple logins. With Superblocks Embedded Apps, users enjoy a single sign-on experience that's integrated into your app's existing authentication flow.

[Learn how](/hosting/embedded-apps/authentication) to configure authentication.

<img src="https://mintcdn.com/superblocks/gv-69CnRrBMTuWPu/images/applications/embedding/authentication.png?fit=max&auto=format&n=gv-69CnRrBMTuWPu&q=85&s=c7e20e4e2af8fa0e6fb139627f7a084b" alt="Login screen for Acme Inc parent application" width="1072" height="480" data-path="images/applications/embedding/authentication.png" />

## Effortless 2-way communication

Build dynamic and responsive user experiences. With custom events and properties, apps respond instantly to user actions, creating engaging experiences every time.

[Learn how](/hosting/embedded-apps/interactivity) to use bidirectional communication.

<img src="https://mintcdn.com/superblocks/gv-69CnRrBMTuWPu/images/applications/embedding/communication.jpeg?fit=max&auto=format&n=gv-69CnRrBMTuWPu&q=85&s=ef4d5fdf7ba45648ead8ec90e1b843c3" alt="Illustration of bidirectional communication between parent app and Superblocks" width="1608" height="720" data-path="images/applications/embedding/communication.jpeg" />

## Securely manage permissions for any user

Manage access with ease while infinitely customizing to fit your needs. Control access to features and functionality in Superblocks with your app's existing permissions system.

[Learn how](/hosting/embedded-apps/authentication#manage-user-access) to manage user access.

<img src="https://mintcdn.com/superblocks/gv-69CnRrBMTuWPu/images/applications/embedding/embed-user-metadata.jpeg?fit=max&auto=format&n=gv-69CnRrBMTuWPu&q=85&s=1d3ef5b9f5400b7e7ae0a4082e798d28" alt="Code showing how to customize access with user metadata" width="1608" height="720" data-path="images/applications/embedding/embed-user-metadata.jpeg" />

## Get started

Get started with Embedded Apps with the following guides:

<CardGrid
  cards={[
{
  title: "Quickstart",
  description: "Embed Superblocks apps in any legacy internal app or external customer portal.",
  href: "/hosting/embedded-apps/quickstart"
},
{
  title: "Authentication",
  description: "Configure SSO and manage user access for embedded apps.",
  href: "/hosting/embedded-apps/authentication"
},
{
  title: "Interactivity",
  description: "Enable bidirectional communication between your app and embedded Superblocks apps.",
  href: "/hosting/embedded-apps/interactivity"
}
]}
/>