mirror of https://github.com/vector-im/riot-web
64 lines
1.6 KiB
Markdown
64 lines
1.6 KiB
Markdown
|
# Custom Home Page
|
||
|
|
|
||
|
|
The home page is shown whenever the user is logged in, but no room is selected.
|
||
|
|
A custom `home.html` replacing the default home page can be configured either in `.well-known/matrix/client` or `config.json`.
|
||
|
|
Such a custom home page can be used to communicate helpful information and important rules to the users.
|
||
|
|
|
||
|
|
## Configuration
|
||
|
|
|
||
|
|
To provide a custom home page for all element-web/desktop users of a homeserver, include the following in `.well-known/matrix/client`:
|
||
|
|
|
||
|
|
```
|
||
|
|
{
|
||
|
|
"io.element.embedded_pages": {
|
||
|
|
"home_url": "https://example.org/home.html"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
The home page can be overridden in `config.json` to provide all users of an element-web installation with the same experience:
|
||
|
|
|
||
|
|
```
|
||
|
|
{
|
||
|
|
"embeddedPages": {
|
||
|
|
"homeUrl": "https://example.org/home.html"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## `home.html` Example
|
||
|
|
|
||
|
|
The following is a simple example for a custom `home.html`:
|
||
|
|
|
||
|
|
```
|
||
|
|
<style type="text/css">
|
||
|
|
.tos {
|
||
|
|
width: auto;
|
||
|
|
color: black;
|
||
|
|
background : #ffcccb;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<h1>The example.org Matrix Server</h1>
|
||
|
|
|
||
|
|
<div class="tos">
|
||
|
|
<p>Behave appropriately.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Start Chatting</h2>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#/dm">Send a Direct Message</a></li>
|
||
|
|
<li><a href="#/directory">Explore Public Rooms</a></li>
|
||
|
|
<li><a href="#/new">Create a Group Chat</a></li>
|
||
|
|
</ul>
|
||
|
|
```
|
||
|
|
|
||
|
|
When choosing colors, be aware that the home page may be displayed in either light or dark mode.
|
||
|
|
|
||
|
|
It may be needed to set CORS headers for the `home.html` to enable element-desktop to fetch it, with e.g., the following nginx config:
|
||
|
|
|
||
|
|
```
|
||
|
|
add_header Access-Control-Allow-Origin *;
|
||
|
|
```
|