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.

There are no specific options needed to be configured so you continue on. If you do not change any settings on this page, the default Element Web pod CPU and Memory requirements will be added to the deployment.yml (see example below).

Config Example 
spec:
  components:
    elementWeb:
      k8s:
        workloads:
          resources:
            limits:
              memory: 200Mi
            requests:
              cpu: 50m
              memory: 50Mi

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 customised 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