Quick Start
Integrate your web app or dApp with NG Desktop in under 5 minutes. You only need a publicly accessible HTTPS URL — no backend changes required.
Prerequisites
- A web app or dApp served over HTTPS
- A NG Desktop account (free, login with Google)
- Basic knowledge of HTML + JavaScript
postMessage between your app's iframe and NG Desktop.Include the SDK
Add the NG Connect SDK script tag to the <head> of your HTML file.
The SDK is hosted on the NG CDN and loads asynchronously — it won't block your page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My App</title>
<!-- NG Connect SDK — always load from NG CDN -->
<script src="https://ng.net/sdk/ng-connect.js"></script>
</head>
<body>
<!-- Your app content -->
</body>
</html>After loading, the SDK exposes a global NG object. You can verify it's loaded
by opening the browser console inside NG Desktop and running typeof NG —
it should return "object".
Connect to NG Desktop
Call NG.ready() to verify that your app is running inside NG Desktop.
Then call NG.auth.login() to authenticate the user with their NG account.
This shows a one-time authorization dialog; subsequent calls resolve silently.
// In your JavaScript (app.js or inline <script>)
(async () => {
// Step 1: Check we're inside NG Desktop
try {
await NG.ready();
} catch (e) {
// [NG Connect E001]: Not running inside NG Desktop
// Graceful fallback — show a link to the App Store
document.getElementById('status').textContent =
'Open this app from NG App Store for the full experience.';
return;
}
// Step 2: Authenticate the user (one-click, no password)
const user = await NG.auth.login();
// user.id — unique NG user ID
// user.display_name — full name
// user.email — email address
// user.avatar_url — profile picture URL
document.getElementById('greeting').textContent =
`Hello, ${user.display_name}!`;
})();NG.ready() resolves, NG.auth.login() shows a one-click authorization dialog.
After approval, user contains the user's id, display_name, email, and avatar_url.NG.ready() rejects with [NG Connect E001].
Catch this and show a message: "Install this app from NG App Store for the full experience."Submit Your App to NG App Store
NG App Store uses an open listing model — your app is automatically published the moment you submit it. No waiting, no manual approval. Great apps get platform-featured; harmful content is removed by community reports.
Option A — Via the Developer Dashboard (recommended)
- Open ng.net → App Store → Developer tab
- Click "Submit New App"
- Fill in your app's URL, name, category, and type
- Click Submit — your app goes live immediately (
status: "approved")
Option B — Via REST API
Use the API to submit programmatically. First, get an API key from the Developer Dashboard.
curl -X POST https://ng.net/api/v1/apps \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"slug": "my-app",
"name": "My App",
"url": "https://myapp.com",
"description": "A great productivity tool for NG Desktop users",
"category": "productivity",
"app_type": "web"
}'
# Response (201 Created) — app is live immediately
# { "id": "abc123", "slug": "my-app", "status": "approved" }status: "blocked").Complete Integration Example
Here's a full standalone HTML file showing all NG Connect features working together: environment detection, login, cloud storage, theme detection, and notifications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My NG App</title>
<script src="https://ng.net/sdk/ng-connect.js"></script>
<style>
body { font-family: system-ui; padding: 32px; transition: background 0.3s; }
body.dark { background: #0a0a0a; color: white; }
#status { color: orange; }
#app { display: none; }
#app.visible { display: block; }
.avatar { border-radius: 50%; width: 48px; height: 48px; }
button { padding: 8px 16px; cursor: pointer; }
</style>
</head>
<body>
<p id="status">Connecting to NG Desktop...</p>
<div id="app">
<img id="avatar" class="avatar" src="" alt="User avatar" />
<h2 id="greeting">Hello!</h2>
<p id="visit-count"></p>
<button id="notify-btn">Send Notification</button>
</div>
<script>
(async () => {
const $status = document.getElementById('status');
// 1. Verify running inside NG Desktop
try {
await NG.ready();
} catch (e) {
$status.textContent = e.message;
return;
}
// 2. Adapt to system theme
const theme = await NG.theme.get();
document.body.classList.toggle('dark', theme === 'dark');
// 3. Login user
const user = await NG.auth.login();
document.getElementById('avatar').src = user.avatar_url;
document.getElementById('greeting').textContent = `Welcome, ${user.display_name}!`;
// 4. Cloud storage: track visit count
const raw = await NG.storage.get('visits');
const visits = (parseInt(raw || '0') + 1);
await NG.storage.set('visits', String(visits));
document.getElementById('visit-count').textContent =
`You've visited ${visits} time(s).`;
// 5. Show the app
$status.style.display = 'none';
document.getElementById('app').classList.add('visible');
// 6. Notification button
document.getElementById('notify-btn').addEventListener('click', async () => {
await NG.notify.send({
title: 'Hello from My App!',
body: `Hi ${user.display_name}, this is a test notification.`
});
});
})();
</script>
</body>
</html>