Embedding Apps

Basic Iframe Embed

Every SGApps web application is available at:

https://sgapps.io/online/webapp/{app-name}

Embed with a standard <iframe>:

<iframe
    id="sgapps-editor"
    src="https://sgapps.io/online/webapp/photo-editor"
    width="100%"
    height="600"
    frameborder="0"
    allow="camera; microphone; clipboard-write"
></iframe>

Recommended allow Attributes

URL Patterns

Default (Demo Mode)

/online/webapp/{app-name}

Opens the app with its default demo arguments (if configured). For Photo Editor this loads a sample image.

Open a Remote URL

/online/webapp/{app-name}/url/{base64-encoded-url}

The third segment is the URL base64-encoded with btoa():

var url = "https://example.com/image.jpg";
var src = "https://sgapps.io/online/webapp/photo-editor/url/" + btoa(url);

Open a File by Path

/online/webapp/{app-name}/file/{base64-encoded-path}

For authenticated users, opens a file from their GridFS storage.

Embed Mode

By default, the app renders with window chrome (title bar, controls). For a cleaner embed, enable embed mode via the WindowSocket API:

socket.fire("webapp::instance::embed-mode", true, function (err, isEmbedded) {
    // App is now maximized with no title bar
});

This:

• Hides the window header (title bar, close/minimize/maximize buttons)
• Maximizes the app to fill the entire iframe
• Adds webapp-instance--embed-mode class to the body

Disable embed mode:

socket.fire("webapp::instance::embed-mode", false, function (err, isEmbedded) {
    // Window chrome is restored
});

Responsive Sizing

The webapp container auto-resizes to fill the iframe viewport. A polling loop (500ms) adjusts the container height to account for the top bar and footer. For best results, set the iframe to fill its parent:

iframe {
    width: 100%;
    height: 100vh;
    border: none;
}

Cross-Origin Considerations

The apps are hosted on sgapps.io. When embedding from a different domain, the WindowSocket API uses postMessage which works cross-origin. No special CORS headers are needed for the iframe itself, but if you need to load files from your domain into the app, they must be accessible via a public URL.

App Name Reference