### Getting Started Link
Source: https://docs-v2.starti.app/explanation/typescript-support
A navigation link to the 'Getting Started' guide within the starti.app documentation.
```html
Getting Started
```
--------------------------------
### Complete HTML Example with starti.app SDK Integration
Source: https://docs-v2.starti.app/tutorials/getting-started
A full HTML page example demonstrating the integration of the starti.app SDK. It includes loading the SDK, initializing it, retrieving device information, and displaying it. This example is designed to be saved as an HTML file and tested on a real device.
```html
starti.app Getting Started
Device Info
Open this page inside the starti.app native container to see device info.
```
--------------------------------
### Complete HTML Example for Starti App LLM
Source: https://docs-v2.starti.app/tutorials/getting-started
This is a full HTML page example that integrates the Starti App LLM features. Save this as an HTML file, replace the placeholder '{BRAND_NAME}' with your specific brand name, and test it on a device.
```html
Starti App LLM Example
The script creates a global startiapp object on window - no import or npm install needed. The CSS file provides utility classes and CSS custom properties for safe-area insets (see below).
```
--------------------------------
### Initialize starti.app SDK
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet shows how to initialize the starti.app SDK. It includes a console log to confirm readiness and a catch block for error handling. The `initialize()` function can be configured with various options.
```javascript
starti.app.initialize();
console.log("starti.app is ready!");
} catch (error) {
console.log("Not running inside a starti.app container.");
}
```
--------------------------------
### Initialize Starti.app SDK
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates the basic initialization of the Starti.app SDK. It calls the `startiapp.initialize()` function and logs a confirmation message to the console. This is the primary method for setting up the SDK in your application.
```javascript
startiapp.initialize();
console.log("starti.app is ready!");
```
--------------------------------
### Set All Options at Initialization
Source: https://docs-v2.starti.app/how-to/control-app-ui
Configure all available options for the Startiapp LLM Text environment during the initial setup. This allows for a comprehensive configuration at the start.
```APIDOC
## Set All Options at Initialization
### Description
Set all options for the Startiapp LLM Text environment at the time of initialization.
### Method
POST
### Endpoint
/llmstxt/app/options
### Parameters
#### Request Body
- **options** (object) - Required - An object containing all the options to be set.
- **swipeNavigation** (boolean) - Optional - Whether to enable swipe navigation.
- **otherOption** (string) - Optional - Description of another option.
### Request Example
```json
{
"options": {
"swipeNavigation": true,
"theme": "dark"
}
}
```
### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating that options have been set.
#### Response Example
```json
{
"message": "All options set successfully at initialization."
}
```
```
--------------------------------
### Get Product Information Example (JavaScript)
Source: https://docs-v2.starti.app/reference/in-app-purchase
Retrieves metadata for a product, such as its name and localized price, without initiating a purchase. This example shows how to use the `getProduct` method and display product details or an error message. It requires the product ID and purchase type.
```javascript
const result = await startiapp.InAppPurchase.getProduct(
"com.example.premium",
"nonconsumable"
);
if (result.success) {
console.log(`${result.value.name} - ${result.value.localizedPrice}`);
} else {
console.error("Failed to load product:", result.errorMessage);
}
```
--------------------------------
### Initialize starti.app SDK
Source: https://docs-v2.starti.app/tutorials/getting-started
This code snippet shows the basic initialization of the starti.app SDK. It's a straightforward call to the initialize function, typically used at the beginning of an application's lifecycle.
```javascript
initialize()
```
--------------------------------
### Complete Working Example: Register User and Topics
Source: https://docs-v2.starti.app/tutorials/push-notifications
A comprehensive example demonstrating initialization, requesting notification permission, registering the user ID, and optionally loading and displaying topics. This example assumes you have functions like `getCurrentUserId()` and `renderTopicList()` defined elsewhere.
```javascript
async function main() {
if (!startiapp.isRunningInApp()) return;
await startiapp.initialize();
// Request permission
var granted = await startiapp.PushNotification.requestAccess();
if (!granted) {
console.log("User denied notifications.");
showOptInBanner();
return;
}
// Register the user — this handles FCM token management automatically
var userId = getCurrentUserId(); // your own function
if (userId) {
await startiapp.User.registerId(userId);
}
// Optionally, load and display topics
var topics = await startiapp.PushNotification.getTopics();
renderTopicList(topics);
}
main();
```
--------------------------------
### Initialize starti.app SDK using 'ready' event
Source: https://docs-v2.starti.app/tutorials/getting-started
This JavaScript snippet demonstrates how to initialize the starti.app SDK by listening for the 'ready' event. Once the event fires, it calls `startiapp.initialize()` and logs a confirmation message. This ensures the SDK is ready before attempting to use its features.
```javascript
startiapp.addEventListener("ready", async function () {
startiapp.initialize();
console.log("starti.app is ready!");
});
```
--------------------------------
### Full CSP Example for starti.app Integration
Source: https://docs-v2.starti.app/explanation/cdn-and-branding
This example demonstrates a comprehensive Content Security Policy configuration that includes directives for both the starti.app CDN and API. Ensure these directives are added to your CSP header or meta tag for full integration.
```html
```
--------------------------------
### Initialize Startiapp SDK in Frameworks (React, Vue, Svelte)
Source: https://docs-v2.starti.app/tutorials/getting-started
Demonstrates how to load and initialize the Startiapp SDK using a script tag in HTML and accessing the global `startiapp` object within framework components. It highlights calling `startiapp.initialize()` early in the app lifecycle and using the `ready` event for native feature calls.
```html
```
```javascript
// Example for React component
import React, { useEffect } from 'react';
function App() {
useEffect(() => {
if (window.startiapp) {
window.startiapp.initialize();
window.startiapp.on('ready', () => {
console.log('Startiapp SDK ready in React.');
});
}
}, []);
return (
My App
);
}
```
```javascript
// Example for Vue component
import { onMounted } from 'vue';
onMounted(() => {
if (window.startiapp) {
window.startiapp.initialize();
window.startiapp.on('ready', () => {
console.log('Startiapp SDK ready in Vue.');
});
}
});
```
--------------------------------
### App API Reference Link
Source: https://docs-v2.starti.app/tutorials/getting-started
Provides a link to the App API reference documentation. This is a navigational element within the documentation.
```html
App API reference
```
--------------------------------
### Initialize Starti.app SDK
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates how to initialize the Starti.app SDK. It listens for the 'ready' event, which indicates that the native bridge is available, and then calls the 'initialize' function. This is a common pattern for integrating SDKs that rely on asynchronous bridge availability.
```javascript
startiapp.addEventListener("ready", async function() {
// SDK is ready to use
});
```
--------------------------------
### Complete Share and Download Example with starti.app SDK
Source: https://docs-v2.starti.app/how-to/share-content
An example demonstrating how to initialize the starti.app SDK and set up event listeners for sharing text and downloading files using buttons. This covers both sharing and direct download functionalities.
```javascript
await startiapp.initialize();
// Share button
document.getElementById("share-btn").addEventListener("click", async () => {
await startiapp.Share.shareText("Join me on this app!");
});
// Download button
document.getElementById("download-btn").addEventListener("click", async () => {
await startiapp.Share.downloadFile(
"https://api.example.com/export/data.csv",
"export.csv",
);
});
```
--------------------------------
### Install starti.app npm Package
Source: https://docs-v2.starti.app/explanation/cdn-and-branding
This command installs the starti.app package as a development dependency. This package provides TypeScript types and is recommended for projects that require type safety.
```bash
npm install --save-dev starti.app
```
--------------------------------
### Complete Authentication Flow Example
Source: https://docs-v2.starti.app/tutorials/authentication
A comprehensive example demonstrating a full authentication flow, including checking for existing sessions, initiating sign-in with Google, exchanging authorization codes with a backend, and handling UI updates for login, app content, and errors.
```javascript
async function main() {
if (!startiapp.isRunningInApp()) {
console.log("Authentication requires the native app.");
return;
}
await startiapp.initialize();
// Check for existing session
const existingSession = await startiapp.Auth.getCurrentSession();
if (existingSession) {
console.log("Welcome back! Provider:", existingSession.providerName);
showApp();
return;
}
// No session -- sign in
console.log("No session found. Starting sign-in...");
const result = await startiapp.Auth.signIn("google");
if (result.isSuccess) {
console.log("Signed in successfully!");
console.log("Authorization code:", result.authorizationCode);
// Exchange the authorization code on your backend
await fetch("/api/auth/exchange", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
authorizationCode: result.authorizationCode,
codeVerifier: result.codeVerifier,
redirectUri: result.redirectUri,
provider: result.providerName,
}),
});
showApp();
} else {
console.error("Sign-in failed:", result.errorMessage);
showError(result.errorMessage);
}
}
function showApp() {
document.getElementById("login-screen").style.display = "none";
document.getElementById("app-content").style.display = "block";
}
function showError(message) {
document.getElementById("error-text").textContent = message;
}
// Wire up the sign-out button
document.getElementById("sign-out-btn").addEventListener("click", async function () {
const success = await startiapp.Auth.signOut();
if (success) {
window.location.reload();
}
});
main();
```
--------------------------------
### Code Block Example with Syntax Highlighting
Source: https://docs-v2.starti.app/how-to/handle-domains
This snippet demonstrates a code block with syntax highlighting, likely for a JavaScript or TypeScript example. It includes styling for different themes (light and dark) and highlights keywords like 'await'.
```javascript
await startiapp.App.
```
--------------------------------
### Complete Example for LLM Text Processing
Source: https://docs-v2.starti.app/how-to/sign-in-with-apple
This snippet provides a complete example of LLM text processing, likely demonstrating the integration of various components discussed in the documentation.
```javascript
self.__next_f.push([1,"3d:[\"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2\",\"id\":\"complete-example\",\"children\":[ [\"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#complete-example\",\"className\":\"peer\",\"children\":\"Complete example\"} ], [\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-link size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-hidden\":true,\"children\":[ [\"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"} ], [\"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"} ],\"$undefined\" ]} ] } ] )
```
--------------------------------
### Connection Event Example (HTML/Text)
Source: https://docs-v2.starti.app/reference/network
This section indicates that an example usage of the connection state functionality will be provided. It serves as a placeholder for demonstrating how to call and interpret the results of the `currentConnectionState` function.
```text
Example:
```
--------------------------------
### Initialize starti.app SDK with try/catch
Source: https://docs-v2.starti.app/tutorials/getting-started
This JavaScript code shows an alternative method for initializing the starti.app SDK using a try/catch block. It attempts to call `startiapp.initialize()` and logs success or failure messages. This approach allows the website to function normally in a standard browser while enabling native features only within the starti.app container.
```javascript
try {
await startiapp.initialize();
console.log("starti.app is ready!");
} catch (error) {
console.log("Not running inside a starti.app container.");
}
```
--------------------------------
### Listen for the Ready Event in Startiapp (JavaScript)
Source: https://docs-v2.starti.app/tutorials/getting-started
This JavaScript code demonstrates how to listen for the 'ready' event in the Startiapp environment. The event fires when the native bridge becomes available. Registering a listener ensures that callbacks are executed even if the event fires before the listener is attached, preventing missed events.
```javascript
startiapp.on('ready', () => {
console.log('Native bridge is ready!');
});
```
--------------------------------
### Use starti.app CSS Utility Classes for Environment-Specific Content
Source: https://docs-v2.starti.app/tutorials/getting-started
Illustrates the use of CSS utility classes provided by the starti.app SDK to control content visibility based on the environment. Classes like `startiapp-show-in-app` and `startiapp-show-in-browser` allow for conditional display of elements.
```html
You are using the native app!
You are in a regular browser!
```
--------------------------------
### HTML Structure for starti.app SDK Integration
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet shows the basic HTML structure required to load and initialize the starti.app SDK. It includes meta tags for character set and viewport, and a title tag. Ensure this structure is present in your HTML file before including the SDK script.
```html
starti.app Getting Started
```
--------------------------------
### File Path Examples
Source: https://docs-v2.starti.app/how-to/share-content
These examples show different ways file paths can be represented, including full URLs and relative filenames. The paths are enclosed in double quotes, suggesting string literals. These might be used for specifying input or output files for the LLM.
```text
"https://example.com/invoice.pdf"
```
```text
"invoice-2024.pdf"
```
--------------------------------
### React Framework Example for Starti.app LLM
Source: https://docs-v2.starti.app/explanation/typescript-support
This section provides examples of how to integrate and use the Starti.app LLM package within a React framework. The code snippets will demonstrate common use cases and patterns for leveraging the package's functionalities in a React application.
```jsx
// React framework example will be provided here.
```
--------------------------------
### QR Scanner Usage Example
Source: https://docs-v2.starti.app/how-to/scan-qr-codes
Example demonstrating how to use the QR Scanner component with specific options.
```APIDOC
## QR Scanner Usage Example
### Description
An example demonstrating the basic usage of the QR Scanner component, including setting camera facing and showing the switch button.
### Method
N/A (Usage Example)
### Endpoint
N/A
### Parameters
#### Path Parameters
N/A
#### Query Parameters
N/A
#### Request Body
N/A
### Request Example
```javascript
await startiapp.QrScanner.scan({
cameraFacing: "front",
showCameraSwitchButton: true
});
```
### Response
#### Success Response (200)
N/A (This is a usage example, not an API endpoint response)
#### Response Example
N/A
```
--------------------------------
### Purchase Product Example (JavaScript)
Source: https://docs-v2.starti.app/reference/in-app-purchase
Initiates a native purchase flow for a specified product. This example demonstrates how to call the `purchaseProduct` method and handle the success or failure of the transaction. It requires the product ID and purchase type (consumable or non-consumable).
```javascript
const result = await startiapp.InAppPurchase.purchaseProduct(
"com.example.premium",
"nonconsumable"
);
if (result.success) {
console.log("Transaction ID:", result.value.transactionIdentifier);
} else {
console.error("Purchase failed:", result.errorMessage);
}
```
--------------------------------
### Example Usage of TokensResponse
Source: https://docs-v2.starti.app/reference/external-purchase
Demonstrates how to use the TokensResponse object, typically obtained from a getTokens() function. This example is in JavaScript.
```javascript
const tokens: TokensResponse = getTokens();
console.log(tokens.acquisition_token);
console.log(tokens.services_token);
```
--------------------------------
### Complete In-App Purchase Example with starti.app SDK
Source: https://docs-v2.starti.app/how-to/setup-in-app-purchases
Demonstrates a full in-app purchase flow, including initializing the SDK, fetching product information, handling user clicks to buy, and sending transaction details to a backend for validation. Emphasizes the importance of backend validation.
```javascript
await startiapp.initialize();
const productId = "com.example.premium";
// Show product info
const product = await startiapp.InAppPurchase.getProduct(productId, "nonconsumable");
if (product.success) {
document.getElementById("price").textContent = product.value.localizedPrice;
}
// Handle purchase
document.getElementById("buy-btn").addEventListener("click", async () => {
const result = await startiapp.InAppPurchase.purchaseProduct(
productId,
"nonconsumable",
);
if (result.success) {
// Send transaction ID to your backend for validation
await fetch("/api/validate-purchase", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
transactionId: result.value.transactionIdentifier,
productId,
}),
});
}
});
```
--------------------------------
### Retrieve App Version using Startiapp
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet shows how to get the current application version using the Startiapp library. It asynchronously calls `startiapp.App.version()` and then logs the retrieved version to the console. This function is useful for debugging and version tracking.
```javascript
const version = await startiapp.App.version();
console.log("App version:", version);
```
--------------------------------
### Complete Google Sign-In and Backend Exchange Example
Source: https://docs-v2.starti.app/how-to/sign-in-with-google
Provides a full example of initializing the starti.app SDK, signing in with Google, handling the result, and sending the necessary credentials (authorization code, code verifier, redirect URI) to a backend API for token exchange. It also includes error handling and logging the authenticated user's email.
```javascript
await startiapp.initialize();
async function loginWithGoogle() {
const result = await startiapp.Auth.signIn("google");
if (!result.isSuccess) {
alert("Login failed: " + result.errorMessage);
return;
}
// Exchange with your backend
const response = await fetch("/api/auth/google", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
authorizationCode: result.authorizationCode,
codeVerifier: result.codeVerifier,
redirectUri: result.redirectUri,
}),
});
const session = await response.json();
console.log("Logged in as:", session.email);
}
```
--------------------------------
### HTML Structure for SDK Integration
Source: https://docs-v2.starti.app/
This example demonstrates how to include the Starti.app SDK script within the `` section of your HTML document. It also shows how to link to the SDK using a `` tag, though the primary method is via the script tag.
```html
```
--------------------------------
### Detect Platform and Log in JavaScript
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates how to access the platform information provided by Starti.app and log it to the console. It assumes that `startiapp.App.platform` is available in the global scope.
```javascript
const platform = startiapp.App.platform;
console.log("Platform:", platform); // "ios" or "android"
```
--------------------------------
### Get and Update DOM Element Content in JavaScript
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet shows how to select an HTML element using its ID and then dynamically update its content using the `innerHTML` property. It constructs an HTML string that includes platform, device ID, brand ID, and version information. This is useful for displaying dynamic data on a web page.
```javascript
const info = document.getElementById("info");
info.innerHTML = `
Platform: ${platform}
Device ID: ${deviceId}
Brand ID: ${brandId}
Version: ${version}`;
```
--------------------------------
### HTML Meta Tags
Source: https://docs-v2.starti.app/tutorials/getting-started
Includes standard HTML meta tags for character set, viewport, and SEO (Open Graph and Twitter). These are essential for proper rendering and search engine visibility.
```html
```
--------------------------------
### Complete Apple Sign-In Example - JavaScript
Source: https://docs-v2.starti.app/how-to/sign-in-with-apple
This comprehensive example illustrates the full flow of signing in with Apple, including SDK initialization, calling the signIn method, handling the result, and sending the user's identity information to a backend API. It emphasizes storing the user's name on the first sign-in.
```javascript
await startiapp.initialize();
async function loginWithApple() {
const result = await startiapp.Auth.signIn("apple");
if (!result.isSuccess) {
alert("Login failed: " + result.errorMessage);
return;
}
// Send the identity to your backend
await fetch("/api/auth/apple", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
userId: result.identity.userId,
email: result.identity.email,
name: result.identity.name,
idToken: result.identity.idToken,
authorizationCode: result.authorizationCode,
}),
});
}
```
--------------------------------
### Retrieve Device ID Asynchronously (JavaScript)
Source: https://docs-v2.starti.app/tutorials/getting-started
This code snippet shows how to asynchronously retrieve a device ID using the `startiapp.App.deviceId()` function. Device and Brand IDs are asynchronous because they interact with the native bridge.
```javascript
const deviceId = await startiapp.App.deviceId();
console.log("Device ID:", deviceId);
```
--------------------------------
### Check User-Agent Header for 'starti.app' (Server-Side)
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates how to check if the 'User-Agent' HTTP header contains the string 'starti.app' on the server-side. It's a common pattern for identifying specific client applications.
```javascript
if (request.headers['user-agent'].includes('starti.app')) {
// Handle starti.app request
}
```
--------------------------------
### Link to SDK Documentation
Source: https://docs-v2.starti.app/
This snippet shows an anchor tag linking to the Starti.app manager for website setup. It's part of the instructions on how to obtain your brand name and configure the SDK.
```html
here
```
--------------------------------
### Handle starti.app SDK Errors Globally
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet shows how to listen for global error events dispatched by the starti.app SDK. This is useful for logging and diagnostics, especially for errors originating from the native bridge.
```javascript
startiapp.addEventListener("error", function (event) {
console.error("starti.app error:", event.detail);
});
```
--------------------------------
### Initialize and Cache Device/Brand IDs
Source: https://docs-v2.starti.app/tutorials/getting-started
Demonstrates how to call `deviceId()` and `brandId()` functions. These functions cache their results after the first invocation, making subsequent calls efficient. No external dependencies are required for these specific calls.
```javascript
deviceId() and brandId() cache their results after the first call, so calling them multiple times is cheap.
```
--------------------------------
### Full CSP Example for Starti.app SDK
Source: https://docs-v2.starti.app/explanation/cdn-and-branding
This meta tag demonstrates a comprehensive Content Security Policy (CSP) configuration required for the Starti.app SDK. It specifies allowed sources for default, scripts, styles, connections, and images, including necessary directives like 'unsafe-inline' for styles.
```html
```
--------------------------------
### Check if Running in starti.app (JavaScript)
Source: https://docs-v2.starti.app/tutorials/getting-started
The `isRunningInApp()` helper function checks if the current environment is within the starti.app container. This is useful for conditionally enabling native features or UI elements. It returns a boolean value.
```javascript
if (startiapp.isRunningInApp()) {
console.log("Native features are available.");
} else {
console.log("Running in a normal browser - native features are disabled.");
}
```
--------------------------------
### Handle Initialization Error in starti.app SDK
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates how to handle an error that occurs when the starti.app SDK is not running within the expected application environment. It catches the specific error message and logs it for debugging purposes.
```javascript
try {
await starti.app.initialize();
} catch (error) {
console.error("Failed to initialize starti.app SDK - not running in app :(", error);
}
```
--------------------------------
### Retrieve Startiapp Device Information
Source: https://docs-v2.starti.app/tutorials/getting-started
Retrieves various device-specific information using Startiapp's App module. These asynchronous functions return the respective device details. Dependencies include the initialized Startiapp application.
```javascript
// Read device info
const platform = startiapp.App.platform;
const deviceId = await startiapp.App.deviceId();
const brandId = await startiapp.App.brandId();
const version = await startiapp.App.version();
```
--------------------------------
### Initialize starti.app SDK and Get Device Info (HTML/JavaScript)
Source: https://docs-v2.starti.app/
This snippet demonstrates how to load the starti.app SDK in an HTML file, initialize it, and check if the application is running within the starti.app environment. It also shows how to retrieve the device platform (iOS or Android).
```html
My starti.app
You are using the native app!
Download our app for the best experience.
```
--------------------------------
### Handling Errors with Startiapp SDK
Source: https://docs-v2.starti.app/tutorials/getting-started
Describes how the Startiapp SDK logs warnings to the console for issues like calling native APIs outside the container. It also mentions the ability to listen for error events globally.
```javascript
// Listen for global error events
window.startiapp.on('error', (error) => {
console.error('Startiapp SDK Error:', error);
});
// The SDK will also log warnings to the console for common issues.
```
--------------------------------
### Retrieve Brand ID using Startiapp
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates how to retrieve the brand ID from the Startiapp application. It uses an asynchronous call to `startiapp.App.brandId()` and logs the result to the console. Ensure the Startiapp library is correctly initialized before use.
```javascript
const brandId = await startiapp.App.brandId();
console.log("Brand ID:", brandId);
```
--------------------------------
### Fetch Product Details with starti.app SDK
Source: https://docs-v2.starti.app/how-to/setup-in-app-purchases
Retrieve product information such as name, description, and localized price using the starti.app SDK. This is essential for displaying product information to the user before initiating a purchase.
```javascript
import { starti } from "@starti/app-sdk";
async function getProductDetails(productIds) {
try {
const products = await starti.iap.getProducts(productIds);
console.log("Products:", products);
// Display product details to the user
return products;
} catch (error) {
console.error("Error fetching product details:", error);
// Handle error appropriately
return null;
}
}
// Example usage:
const productIds = ["com.example.consumable", "com.example.nonconsumable"];
getProductDetails(productIds);
```
--------------------------------
### Display Device Info with starti.app
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet shows how to use the 'startiapp-show-in-app' attribute on a div tag to display device information within the starti.app native container. This is typically used for debugging or providing context-specific information to the user.
```html
```
--------------------------------
### QR Scanner Initialization and Usage (JavaScript)
Source: https://docs-v2.starti.app/reference/qr-scanner
This snippet demonstrates how to initialize and use the QR Scanner. It includes setting up the scanner, providing a target element for the video feed, and handling the scanned result. The scanner remains active until a valid result is returned.
```javascript
const qrScanner = new QrScanner(
document.getElementById('my-qr-scanner'),
(result) => console.log('Scanned Result:', result),
{
// Options for QRScanner
}
);
qrScanner.start();
```
--------------------------------
### Display Web Content in Browser with starti.app
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates how to use the 'startiapp-show-in-browser' attribute on a paragraph tag to ensure a web page is opened in the native starti.app container. This is useful for displaying external web content or links.
```html
```
--------------------------------
### Purchase Product Example - JavaScript
Source: https://docs-v2.starti.app/reference/in-app-purchase
This JavaScript snippet demonstrates how to initiate a product purchase using the startiapp SDK. It handles the asynchronous nature of the purchase and logs the transaction ID upon success or logs an error message if the purchase fails. Ensure the 'startiapp' SDK is properly initialized and available in your environment.
```javascript
const result = await startiapp.InAppPurchase.purchaseProduct("com.example.premium", "nonconsumable");
if (result.success) {
console.log("Transaction ID: ", result.value.transactionIdentifier);
} else {
// Handle purchase failure
}
```
--------------------------------
### Startiapp SDK Initialization and Splash Screen Control
Source: https://docs-v2.starti.app/tutorials/getting-started
Explains that the app's splash screen remains visible until `startiapp.initialize()` is called. This allows for loading assets before transitioning to the main content. The splash screen automatically fades out after initialization.
```javascript
// Call this early in your application's lifecycle
// For example, in a React useEffect or Vue onMounted hook
if (window.startiapp) {
window.startiapp.initialize();
}
// The splash screen will automatically fade out after initialize() is called.
```
--------------------------------
### Read Device Information (JavaScript)
Source: https://docs-v2.starti.app/tutorials/getting-started
This code snippet shows how to retrieve device information after the application has been initialized. It accesses synchronous properties like 'Platform', 'Device ID', and 'Brand ID'. The 'Platform' property can return 'ios', 'android', or 'web'.
```javascript
const platform = SDK.Platform;
const deviceId = SDK.DeviceId;
const brandId = SDK.BrandId;
console.log(`Platform: ${platform}`);
console.log(`Device ID: ${deviceId}`);
console.log(`Brand ID: ${brandId}`);
```
--------------------------------
### Load Module Script in starti.app
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet illustrates how to include a JavaScript module within the starti.app environment. The 'type="module"' attribute on the script tag indicates that the script should be treated as a JavaScript module, allowing for the use of import/export statements.
```html
```
--------------------------------
### Initialize Application and Load Settings (JavaScript)
Source: https://docs-v2.starti.app/tutorials/storage-and-data
This JavaScript snippet demonstrates the asynchronous initialization of an application, including error handling for the initialization process. It also shows how to load application settings, with a fallback mechanism to localStorage if running in a browser environment.
```javascript
console.log("Running in browser -- AppStorage will use localStorage fallback.");
try {
await startiapp.initialize();
} catch (e) {
// Continue anyway -- AppStorage falls back to localStorage
}
// Load saved settings or use defaults
const settings = await loadSettings();
```
--------------------------------
### CSS Styling for Body Element
Source: https://docs-v2.starti.app/tutorials/getting-started
This CSS code targets the 'body' element to apply specific styles. It sets the 'font-family' to 'sans-serif' and adds a 'padding' of '1rem'. Additionally, it includes a 'padding-top' calculated using 'calc()' and a CSS variable '--startiapp-inset-top'.
```css
body {
font-family: sans-serif;
padding: 1rem;
padding-top: calc(1rem + var(--startiapp-inset-top));
/* Use safe-area insets provided by the SDK */
}
```
--------------------------------
### POST /llmstxt/docs-v2_starti_app_llms_txt
Source: https://docs-v2.starti.app/reference/app
Configures the navigation loading spinner with specified options.
```APIDOC
## POST /llmstxt/docs-v2_starti_app_llms_txt
### Description
Configures the navigation loading spinner with specified options.
### Method
POST
### Endpoint
/llmstxt/docs-v2_starti_app_llms_txt
### Parameters
#### Request Body
- **options** (object) - Required - Spinner configuration
### Request Example
```json
{
"show": true,
"color": "#3498db"
}
```
### Response
#### Success Response (200)
- **Promise** - Indicates the operation completed successfully.
#### Response Example
```json
// No response body for void return type
```
```
--------------------------------
### StartApp Inset Right CSS Variable Declaration
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet illustrates the CSS declaration for the `--startiapp-inset-right` variable. It controls the right padding, usually set to 0 pixels, to maintain uniform spacing. This is crucial for responsive design and predictable element positioning.
```css
padding-right: var(--startiapp-inset-right, 0px);
```
--------------------------------
### StartApp Inset Bottom CSS Variable Declaration
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet demonstrates the CSS declaration for the `--startiapp-inset-bottom` variable. It sets the bottom padding to 0 pixels, ensuring no extra space is added to the bottom of the element. This is a common pattern for controlling layout spacing.
```css
padding-bottom: var(--startiapp-inset-bottom, 0px);
```
--------------------------------
### Listen for the Ready Event (JavaScript)
Source: https://docs-v2.starti.app/tutorials/getting-started
The `addEventListener('ready', callback)` method allows you to register a listener for the 'ready' event, which fires when the native bridge is available. If the event has already fired, the callback executes immediately. This ensures that native bridge functionalities are accessed only after initialization.
```javascript
startiapp.addEventListener("ready", function () {
console.log("The native bridge is ready.");
});
```
--------------------------------
### Basic TypeScript Usage with starti.app SDK
Source: https://docs-v2.starti.app/explanation/typescript-support
This example demonstrates how to import and use the starti.app SDK in a TypeScript environment. It shows basic initialization and interaction, benefiting from the type definitions for enhanced developer experience.
```typescript
import { StartiApp } from "@starti.app/sdk";
// Initialize the SDK
const app = new StartiApp({
apiKey: "YOUR_API_KEY",
});
// Example usage: Fetching data
async function fetchData() {
try {
const data = await app.getData({
// ... query parameters
});
console.log(data);
} catch (error) {
console.error("Error fetching data:", error);
}
}
fetchData();
```
--------------------------------
### StartApp Inset Left CSS Variable Declaration
Source: https://docs-v2.starti.app/tutorials/getting-started
This snippet shows the CSS declaration for the `--startiapp-inset-left` variable. It defines the left padding, typically set to 0 pixels, to manage horizontal spacing. This variable is essential for consistent layout across different screen sizes.
```css
padding-left: var(--startiapp-inset-left, 0px);
```
--------------------------------
### Fetch Product Details with starti.app SDK
Source: https://docs-v2.starti.app/how-to/setup-in-app-purchases
Retrieves the name, description, and localized price of an in-app purchase product. Requires the product ID and purchase type. Returns a success object with product details or an error message.
```javascript
const result = await startiapp.InAppPurchase.getProduct(
"com.example.premium",
"nonconsumable",
);
if (result.success) {
console.log("Name:", result.value.name);
console.log("Price:", result.value.localizedPrice);
console.log("Currency:", result.value.currencyCode);
console.log("Description:", result.value.description);
} else {
console.error("Error:", result.errorMessage);
}
```
--------------------------------
### Control Element Visibility with StartApp CSS Properties
Source: https://docs-v2.starti.app/tutorials/getting-started
These CSS properties allow you to conditionally display or hide HTML elements based on whether the content is being viewed within the native StartApp application or a standard web browser. They are essential for tailoring the user experience to the viewing environment.
```html
You are using the native app!
Download our app for the best experience.
```
--------------------------------
### React Example: Initialize starti.app SDK
Source: https://docs-v2.starti.app/explanation/typescript-support
A React component that initializes the starti.app SDK and retrieves the platform information. It includes error handling for when the SDK is not running in the starti.app container.
```typescript
import { useEffect, useState } from "react";
function DeviceInfo() {
const [platform, setPlatform] = useState("");
useEffect(() => {
async function init() {
try {
await startiapp.initialize();
setPlatform(startiapp.App.platform);
} catch {
// Not running in starti.app container
}
}
init();
}, []);
return
Platform: {platform || "web"}
;
}
```
--------------------------------
### Complete Working Example: Register FCM Token and Handle Notifications
Source: https://docs-v2.starti.app/tutorials/push-notifications
An example showing how to initialize the SDK, request permission, obtain the FCM token, register it on your server, listen for foreground notifications, handle token refreshes, and optionally load topics. It includes a helper function `registerTokenOnServer`.
```javascript
async function main() {
if (!startiapp.isRunningInApp()) return;
await startiapp.initialize();
// Request permission
var granted = await startiapp.PushNotification.requestAccess();
if (!granted) {
console.log("User denied notifications.");
showOptInBanner();
return;
}
// Get and send the FCM token to your server
var token = await startiapp.PushNotification.getToken();
await registerTokenOnServer(token);
// Listen for foreground notifications
startiapp.PushNotification.addEventListener(
"notificationReceived",
function (event) {
showNotificationBanner(event.detail.title, event.detail.body);
},
);
// Handle token refresh
startiapp.PushNotification.addEventListener("tokenRefreshed", function (event) {
registerTokenOnServer(event.detail);
});
// Optionally, load and display topics
var topics = await startiapp.PushNotification.getTopics();
renderTopicList(topics);
}
async function registerTokenOnServer(token) {
await fetch("/api/push/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ fcmToken: token }),
});
}
main();
```
--------------------------------
### Storage and Data Tutorial Card (HTML/JSX)
Source: https://docs-v2.starti.app/tutorials/authentication
Represents a UI card for a 'Storage and Data' tutorial. It includes a title, description, and links to the relevant tutorial page, similar to other tutorial cards.
```jsx