Conference UI

Conference UI is our pre-built Web interface.

It contains all the powerful features of Horn and allows you to provide a seamless experience for your audience to join your live events.

../../_images/conf.png

Settings Panel

The Conference UI provides various customization options. You can customize the features and behavior of the interface as well as its look and feel.

The Settings Panel in the Conference UI can be accessed by clicking on the gear icon labeled “Settings” in the bottom control bar:

../../_images/conf_control_bar_settings.png

A Host is able to control almost every aspect of the application.

You can control plenty of things, in example:

  • Video/Camera aspect ratio that the users will see

  • Ability for users to enable multiple cameras at the same time

  • If the users entering the room should join with their camera on or off

  • If users can add RTMP sources as their camera feed

and much much more.

The Settings Panel has a list of categories and a search for easier navigation:

../../_images/conf_settings_panel.png

Custom Texts

While we keep text to a minimum, the Conference UI does use some text. All of our default texts are translated to the default language detected on client side. We default to English if we don’t yet have a translation for your language.

Because of the variability of your applications, we allow you to customize every single text used in the the Conference UI.

Customizing texts is now only available via the REST API. We’ll expose an interface to customize texts from the UI in the future.

Theming

Colors and Icons customization of the Conference UI is done via the Horn Management Console (HMC) interface.

See Conference UI Theming for more details.

Embed on your website

The simplest way to put a working Conference UI instance on your own page is to inject this piece of code to your website:

<script type='text/javascript' src='https://app.horn.co/widget.js'></script>
<script>(function(){co.horn.widget.run('channel-id')})()</script>

Replace channel-id with the UUID of the channel you want to use the Conference UI with.

You can create and manage channels using the Horn Management Console interface or directly via the REST API.

If you want to put the Conference UI in a specific container (i.e. a div with a specific ID), you can do so by passing the display config parameter.

Consider the following HTML page:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    #horn-container-wrapper {
        width: 800px;
        height: 600px;
        border: 1px solid red;
    }
    </style>
</head>
<body>
    <h1>My app:</h1>
    <div id="horn-container-wrapper">
        <div id="horn-container"></div>
    </div>
    <script type="text/javascript" src="https://app.horn.co/widget.js"></script>
    <script>
    (function () {
        co.horn.widget.run("channel-id", {
            display: "horn-container",
        });
    })();
    </script>
</body>
</html>

When the page loads, the Conference UI will be displayed inside the horn-container div:

../../_images/conf_inline_embed.png

Note

Avoid styling the container div directly (the horn-container above) as the script is modifying some styles like width and height dynamically when loading the Conference UI.

Instead, use a wrapper like #horn-container-wrapper in the example above to ensure the app is displayed inside a specific container/wrapper area.