Guides

Quickstart

Follow the Web integration path and validate a StreamLayer test ad in your existing app.

Web Quickstart

Use this path to add StreamLayer to an existing Web app and validate a test ad. Installation and API examples are maintained in the linked integration guide.

Start with your AI coding assistant

Connect your assistant to StreamLayer docs before changing code, then use this prompt. The connection lets it search the current guides and read the platform integration skill as it works.

Help me integrate StreamLayer into my existing browser React app using @streamlayer/react.
Use the streamlayer-docs MCP to search for and fetch the matching integration
guide and the streamlayer-web-integration skill page before editing code.
If search does not return the skill, read https://docs.streamlayer.io/docs/web-sdk-integration-skill
or ask me to copy that page into this session.
Cite the sources, confirm my SDK version and prerequisites, and make the smallest
documented change while preserving my player and app structure. Report missing
or conflicting guidance instead of guessing. Use placeholder keys in examples.
Finish with the checks run and the remaining platform/device validation steps.

Review the diff and follow the platform setup and testing guidance linked below.

Before you start

  • Have an existing app with a working video player.
  • Obtain access to StreamLayer Studio, an SDK API Key, and an event with test content.
  • Check the integration prerequisites against the SDK release you are integrating. If your existing app uses a different release, confirm compatibility before changing its dependencies.

Integrate and validate

  1. Install and initialize. Follow the Integration Guide in order, including its package, style or layout requirements. Use the SDK release selected for your integration and record that version with your app's dependencies.
  2. Configure authentication. Follow Authentication Forwarding for your app's user or guest flow.
  3. Connect the event and UI. Complete the guide's event/session and StreamLayer Element setup around your existing player.
  4. Activate test content. Follow Test Integration using the same organization and event configured in your app.
  5. Verify the result. Confirm the ad appears, its intended interaction works, and closing it restores the expected player layout and playback state.

If no content appears, use Troubleshooting before changing SDK APIs or dependency versions.

Related

Updated 25 days ago