Skip to main content

Element Web Section

Element Web is the web-based client for the Matrix communication protocol. Element Web serves as a user interface for accessing Matrix homeservers, allowing users to send messages, join rooms, share files, and participate in group chats.

Additional Configuration

There are no Element Web specific UI options available to configure, however you can inject custom config within the Additional Configuration section found under Advanced. Config added here is analogous with what you would add to the config.json when manually self-hosting Element Web (or when using Element Desktop), you can read more on this and see config examples via the Element Web Configuration Doc.

Common Configurations

If you would like to override the default permalink matrix.to for your homeserver, you can do so by adding the following entry to your Additional Configuration

"permalinkPrefix": "https://<element fqdn>"
Theming

Refer to the Element Web Theming Documentation for more information, see an example below where a custom theme has been applied to change the look and feel of the deployed Element Client. For some public examples of cusomised login screens see Mozilla and Fedora's customised clients.

"setting_defaults": {
        "custom_themes": [
            {
                "name": "Electric Blue",
                "is_dark": false,
                "fonts": {
                    "faces": [
                        {
                            "font-family": "Inter",
                            "src": [{"url": "/fonts/Inter.ttf", "format": "ttf"}]
                        }
                    ],
                    "general": "Inter, sans",
                    "monospace": "'Courier New'"
                },
                "colors": {
                    "accent-color": "#3596fc",
                    "primary-color": "#368bd6",
                    "warning-color": "#ff4b55",
                    "sidebar-color": "#27303a",
                    "roomlist-background-color": "#f3f8fd",
                    "roomlist-text-color": "#2e2f32",
                    "roomlist-text-secondary-color": "#61708b",
                    "roomlist-highlights-color": "#ffffff",
                    "roomlist-separator-color": "#e3e8f0",
                    "timeline-background-color": "#ffffff",
                    "timeline-text-color": "#2e2f32",
                    "timeline-text-secondary-color": "#61708b",
                    "timeline-highlights-color": "#f3f8fd",
                    "username-colors": ["#ff0000", ...]
                    "avatar-background-colors": ["#cc0000", ...]
                }
            }
        ]
    }

You can also modify the homepage for the Element Web client, to do so requires modification to your Well-Known Delegations' Additional Configuration, see Element Web Custom Home for more information and specifically the Well-Known Delegation documentation page under the Integrations chapter.

Back to top