Playground

The Embedded SDK Playground is more than just a testing tool, it's a comprehensive Development Sandbox. It allows you to prototype SDK functions, experiment with UI components, and debug communication in real-time before writing a single line of code in your production application.

What you'll learn:

Tools

The Interactive Playground

Use Cases

Tools

There are two tools we recommend to use for Embedded App testing which are Event Console and Interactive Playground.

Event Console

Trigger common SDK events with a single click.

Interactive Playground

Write and execute SDK code snippets directly in the dashboard.

Development Workflow

To begin developing with the Sandbox, follow this lifecycle to connect the Test Kit to your specific app environment:

Fork the Sandbox Repo

Fork embedded-sdk-playground and deploy it to your server.

Configure the Partner Portal

Configure your App in Salla Partner Portal as explained in here, and set your Iframe URL to point to this deployment.

Install on a Demo Store

Install your application on a Salla Demo Store via the Partner Portal. This establishes the necessary merchant context required for the SDK to function.

App Installation on Demo Store

Launch the Application

Inside the Merchant Dashboard, navigate to Apps > My Apps and click Run App on your application.

Initialize the Handshake

The dashboard will render the Test Kit inside an iframe. The Sandbox automatically triggers the embedded.init() and embedded.ready() flow, providing you with a live, authenticated environment.

Prototype & Develop

Use the built-in Event Console or the Code Playground to develop and validate your App's intended SDK functionality.

Tip

Update the Test Kit's backend verification logic (e.g., /server/functions/verify-token.js) to communicate with your own backend service to ensure the full authentication handshake is working correctly

Event Console

The Event Console provides a library of pre-configured SDK events. This allows you to instantly verify how native dashboard elements, such as Toasts, Modals, and Navbar Actions to behave within the host environment.

Event Console

By clicking any event trigger, the Sandbox calls the corresponding SDK function and logs the actual event being sent. This is the ideal tool for checking visual consistency and confirming that your event data is correctly interpreted by the dashboard.

The Interactive Playground

For custom logic development, the Sandbox features an integrated Code Editor. This playground exposes the global embedded object with full TypeScript support, allowing you to write complex, multi-step scripts and execute them directly against the live dashboard.

Use Cases

Live Scripting: Test logic like conditional navigation or dynamic table updates.

Response Handling: Inspect the results of promise-based methods like embedded.ui.confirm().

UI Testing: Test the dashboard components functionality.

Important Information

Global Access: Within the playground, the SDK is available via window.salla.embedded.

Message Logs: Always keep the Message Log open while using the playground to monitor the exact JSON traffic and catch any validation errors in your payloads.

Sandbox Sync: The Test Kit is regularly updated to match the latest SDK beta features. Ensure your fork is synced with the upstream SallaApp/embedded-sdk-test-kit repository.

Next Steps

Setup Authentication

Transition from prototyping to secure session management and backend verification.

What you'll learn:#

Tools#

Development Workflow#

Event Console#

The Interactive Playground#

Use Cases#

Next Steps#

What you'll learn:

Tools

Development Workflow

Event Console

The Interactive Playground

Use Cases

Next Steps