Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This document provides everything you need to customize and integrate your app into a website, with options suited to different levels of experience. For those new to programming, we’ll show you how to adjust the app’s Imagine making your app truly reflect your style by customizing the logo, title bar, loading background, images, and buttons directly through the E3DS Control Panel. If you have a basic understanding of programming, you can integrate the app using an iframe to embed it smoothly on your website. For users looking to dive deeper, there’s a guide for using the streaming interface to create a more personalized and high-effort integration. Whatever your level, this guide offers the right tools to bring your app and website together seamlessly.

1. Customize App UI

Tip

User can customize the App UI using E3DS control panel. Here is the list what user can customize using this feature:

  • Title Bar icon

  • Loading Background

  • Logo

  • Loading image

  • Queue screen and

  • Play Buttonqueue screen, play button, streaming URL and more. We offer three levels of customization, each expanding on the previous one, so you can tailor your app to meet your exact needs. Let’s start at the simplest level and build from there!

    Level 1. Customize UI Elements from E3DS Control Panel

    Info

    Imagine logging into the E3DS Control Panel and being able to quickly change how your app looks without any coding. This is where customization begins, letting you adjust key parts of the interface so it feels more like your own.

    Follow this documentation to customize the Title Bar icon, Loading Background, Logo, Loading image, Queue screen, and the Play Button for a white-label experience! 

    Warning

    Although this feature offers multiple customization options, users cannot integrate their app with their webpage. To enable this functionality, you will need to proceed to the next step.

    2. Integrate E3DS App UI with your webpage using iFrame

    Tip

    This features provides:

    Integrate E3DS App with your webpageThis level is all about easy wins, letting you make the app feel like it’s yours without much effort. Once you see how straightforward this is, you might be ready to go a step further.

    Level 2. Embed streaming within your website using iFrame

    Info

    Now, imagine blending the app seamlessly into your website, so it feels like part of your own digital space. With just a bit of frontend knowledge, you can move to the next level of customization: embedding E3DS directly into your site.

    Tip

    This feature allows users to:

    • Embed streaming within their website

    • Customize streaming URL

    Here

    ...

    we have provided three different options to embed streaming within your website. But you can use other framework also.

    HTML - refer toIntegrating Streaming UI via iframe in a HTML websiteEmbed E3DS App with Your HTML Webpage

    ReactJS - refer to Integrating Streaming UI via iframe in a ReactJs websiteCommunicate with your App from iframe - React

    WordPress - refer to Integrating Streaming UI via iframe in a WordPress website

    At this stage, your app feels more connected to your brand, and it’s positioned for the ultimate level of customization.

    Level 3.

    ...

    Embed streaming within your website using Streaming UI

    Info

    At this stage, you’re ready to go all-in, taking control over both frontend and backend elements. Here, you can fully integrate the app into your website without using an iFrame and gain total flexibility over more detail.

    Tip

    This feature allows users to:

    • Embed streaming within their webpage

    • Customize Streaming URL

    • Secure API Key using

    • More control over the HTML, React JS and Angular JS elements than using iFrame

    Here we have provided three different options to embed E3DS app with your website. But you can use other framework also.

    HTML/ejs - refer to Embed streaming into a webpage (no iframe solution)

    ReactJS - refer to Minimal initialization of pixel streaming to a React App

    ...