# Embedded Player Customization

<p class="callout info">Event Engine can be customized with event-specific assets. In order to simplify integration workflow, especially for last minute assets delivery, the following settings are mandatory.</p>


#### Different states

<div drawio-diagram="726"><img src="https://docs.streamaura.net/uploads/images/drawio/2024-09/LWmwH9Byl9lmsBbE-drawing-17-1725958322.png" alt=""/></div>


#### Layers composition

<div drawio-diagram="727"><img src="https://docs.streamaura.net/uploads/images/drawio/2024-09/tsuVkpjzGjhqa21u-drawing-17-1725958421.png" alt=""/></div>

#### Expected material

The following list will help us integrate quickly and seamlessly your custom design to

1. Event Engine Web interface, i.e., for embedded digital event,
2. [Event Engine State API](https://docs.streamaura.net/books/livestream-to-third-parties/page/event-engine-state-api "Event Engine State API"),
3. Preshow video/image slates

<p class="callout warning">If you are using **Figma** please  
- name the elements with unique label (i.e., `myLabel-language-[ratio:169|916]`)  
- group elements by `language` then `ratio`  
- use the `/` character as folder/group prefix</p>

- All 16:9 slates (prelive, postlive, interruption, custom) 
    - including foreground and background
    - <div drawio-diagram="391"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/HYPJzqZPBrL7wYUJ-drawing-17-1673606880.png" alt=""/></div>
    - PNG format
    - 1920x1080
    - 960x540
- All 9:16 slates (prelive, postlive, interruption, custom) 
    - including foreground and background
    - <div drawio-diagram="393"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/8KLKs7BpzctwzlQa-drawing-17-1673607002.png" alt=""/></div>
    - PNG format
    - 1080x1920
    - 540x960
- All 16:9 slates (prelive, postlive, interruption, custom) 
    - foreground only with transparent background (with bounding box)
    - <div drawio-diagram="395"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/g9Xx5Pv87PnMlFc1-drawing-17-1673607062.png" alt=""/></div>
    - PNG format
    - 1920x1080
    - 960x540
- All 9:16 slates (prelive, postlive, interruption, custom) 
    - foreground only with transparent background (with bounding box)
    - <div drawio-diagram="396"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/HOXy8LHnEmPmvpnP-drawing-17-1673607079.png" alt=""/></div>
    - PNG format
    - 1080x1920
    - 540x960
- All 16:9 dynamic foreground 
    - foreground only with transparent background (with bounding box and without dynamic content like countdown)
    - <div drawio-diagram="397"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/kXaXlZZF8PEjc5sK-drawing-17-1673607160.png" alt=""/></div>
    - PNG format
    - 1920x1080
    - 960x540
- All 9:16 dynamic foreground 
    - foreground only with transparent background (with bounding box and without dynamic content like countdown)
    - <div drawio-diagram="398"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/5Lj99y66oiiskpKk-drawing-17-1673607200.png" alt=""/></div>
    - PNG format
    - 1080x1920
    - 540x960
- 16:9 Background 
    - <div drawio-diagram="399"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/qK95yJR8tveoGGVK-drawing-17-1673607221.png" alt=""/></div>
    - PNG format
    - 1920x1080
    - 960x540
- 9:16 Background 
    - <div drawio-diagram="400"><img src="https://docs.streamaura.net/uploads/images/drawio/2023-01/vGyDTELj211H3k0R-drawing-17-1673607247.png" alt=""/></div>
    - PNG format
    - 1080x1920
    - 540x960