Skip to main content

Client Look & Feel

This feature allows you to customize the home and welcome page on your EMS provided Element Web client.

The guide assumes you already have a website on any domain with https enabled.

  1. Create two files on your web server, for example https://twily.org/ems_home.html and https://twily.org/ems_welcome.html
    temp

  2. Edit ems_home.html. This can be as simple as a couple of lines of HTML, for example:

    <h1>Demo Company LTD</h1>
    <h2>Rooms to join</h2>
    <ul>
        <li><a href='/#/room/#welcome:ems-demo-staging.ems.host'>Welcome to Demo web chat (#welcome)</a></li>
        <li><a href='/#/room/#support:ems-demo-staging.ems.host'>Support (#support)</a></li>
        <li><a href='/#/room/#offtopic:ems-demo-staging.ems.host'>Off topic conversation (#offtopic)</a></li>
    </ul>
    

    Or you can add a more complex html and styling.

  3. Looks like this in your web browser:
    temp

  4. Edit ems_welcome.html. This is a bit more complex, but can be almost anything you want as long as it has links to Login (/#/login) and Create account (/#/register). The default design is based on this template. You can get creative with the CSS and the !important tag.

  5. Add links to your files on the EMS control panel and click Save.
    temp

  6. Check that it looks correct and that everything works. You do not need to click save or rebuild in the EMS control panel if you make changes to the files. As long as the URL does not change, refreshing the Element Web Client page is enough.

  7. With some hacking you can make it look as you want. (and the following example is why I am a developer, not a designer...)
    temp
    temp
    temp