What's a Custom promo header?


In order to bring your brand streambox to your needs, Streamboxy offers your the possibility to define a custom HTML header above the Streamboxy UI.

This header is not show on the mobile version due to limited space.


Sample

Machine generated alternative text: Start bri Workshops (Sample Content) Information Admin HybridCon Herzlich Willkommen zu einer weiteren Episode von HybridCon Running, 12:00 - 18:00 Uhr STREAMBOXY Demoumgebung Sie befinden sich in unserer Lobby, der Landing Page tür Inr Event Hier können Sie, wie auch in jeder 3reakout-Session mit tolgenden Session-Typen starten.  



How to define a Custom promo header?

You can define the Header once you navigatet to Streamboxy Backstage --> Settings --> Appearance --> Custom promo header


There you need to fill two fields:

  1. Header: Here you can add individual HTML Content which is shown as header. If you want to use assets like images you currently have to host them yourself and link them here.
  2. Header height:  Here you can define the header Height in pixels. Note that, high Headers take a lot of space from the main content, especially on lower resulution screens.


Sample Code


In order to get started quickly you can use this sample code and adapt it to your needs:

<div title="HybridCon_Background" style="height: 125px; background-size: cover; position: relative; background-image: url('https://commonstaticfilesprod.blob.core.windows.net/assets/1288086406-small.jpg') " onmouseover="this.title='';"> 
 
<div  title="HybridCon_Logo" style="position: fixed; top: 0; right: 10vmax; z-index: 102;" onmouseover="this.title='';"><img height="181" src="https://commonstaticfilesprod.blob.core.windows.net/assets/Hybrid Con Logo.png"></div> 
 
<div title="HybridCon_Text" style="position: fixed; top: 30px; left: 15vmax; z-index: 101;" onmouseover="this.title='';"><img height="161" src="https://commonstaticfilesprod.blob.core.windows.net/assets/Hybrid%20Con%20Name.png"/></div> 
 
</div> 

 

The header height is highlighted red and should match the Header Height Setting.

Embedding external code is not supported.