mirror of
https://github.com/coder/coder.git
synced 2026-11-01 04:47:17 +08:00
Samuel Volin
50640063a2
Premium badging and gating consistency as a OSS user, I want to be upsold to premium, and tastefully Summary Standardize all base-Premium full-page gates and the two named inline notices. Admins see an in-app “Learn about Premium” path; non-admins are told to contact their deployment administrator. * DEVEX-732 * updates for premium docs pages for consistency * updates for premium badging and paywall components * updates implemented uses of premium badge and premiumpaywall | Before | After | | --- | ----------- | | <img width="1271" height="564" alt="Screenshot 2026-08-04 at 3 02 32 PM" src="https://github.com/user-attachments/assets/027d4bca-3e34-40b2-ad69-28dbaa4a004b" /> | <img width="1273" height="600" alt="Screenshot 2026-08-04 at 3 26 37 PM" src="https://github.com/user-attachments/assets/321083c0-7a4c-4c7e-a19c-059807018d3b" /> | | Before | After | | --- | ----------- | | <img width="1084" height="672" alt="image" src="https://github.com/user-attachments/assets/741e6bd9-93b0-4ae0-97df-027e8aba5716" /> | <img width="1289" height="622" alt="Screenshot 2026-08-04 at 3 20 07 PM" src="https://github.com/user-attachments/assets/b3a8c169-ca6e-439b-8752-9209131fc097" /> | | Before | After | | --- | ----------- | | <img width="1091" height="865" alt="image (1)" src="https://github.com/user-attachments/assets/f7cd92dd-a975-4db0-bc2a-af092ba783ce" /> | <img width="1268" height="680" alt="Screenshot 2026-08-04 at 3 37 06 PM" src="https://github.com/user-attachments/assets/8af8081a-0ec9-4fd3-921c-470127f2328b" /> |
111 lines
4.4 KiB
Markdown
111 lines
4.4 KiB
Markdown
# Appearance (Premium)
|
|
|
|
> [!NOTE]
|
|
> Customizing Coder's appearance is a Premium feature.
|
|
> [Learn more](https://coder.com/pricing#compare-plans).
|
|
|
|
Customize the look of your Coder deployment to meet your enterprise
|
|
requirements.
|
|
|
|
You can access the Appearance settings by navigating to
|
|
`Deployment > Appearance`.
|
|
|
|
|
|
|
|
## Application Name
|
|
|
|
Specify a custom application name to be displayed on the login page. The default
|
|
is Coder.
|
|
|
|
## Logo URL
|
|
|
|
Specify a custom URL for your enterprise's logo to be displayed on the sign in
|
|
page and in the top left corner of the dashboard. The default is the Coder logo.
|
|
|
|
## Announcement Banners
|
|
|
|
|
|
|
|
Announcement Banners let admins post important messages to all site users. Only
|
|
Site Owners may set the announcement banners.
|
|
|
|
Example: Use multiple announcement banners for concurrent deployment-wide
|
|
updates, such as maintenance or new feature rollout.
|
|
|
|
|
|
|
|
Example: Adhere to government network classification requirements and notify
|
|
users of which network their Coder deployment is on.
|
|
|
|
|
|
|
|
## OIDC Login Button Customization
|
|
|
|
[Use environment variables to customize](../users/oidc-auth/index.md#oidc-login-customization)
|
|
the text and icon on the OIDC button on the Sign In page.
|
|
|
|
## Support Links
|
|
|
|
Support links let admins adjust the user dropdown menu to include links
|
|
referring to internal company resources. The menu section replaces the original
|
|
menu positions: documentation, report a bug to GitHub, or join the Discord
|
|
server.
|
|
|
|
|
|
|
|
### Icons
|
|
|
|
The link icons are optional, and can be set to any url or
|
|
[builtin icon](../templates/extending-templates/icons.md#bundled-icons),
|
|
additionally `bug`, `chat`, `docs`, and `star` are available as special icons.
|
|
|
|
### Location
|
|
|
|
The `location` property is optional and determines where the support link will
|
|
be displayed:
|
|
|
|
- `navbar` - displays the link as a button in the top navigation bar
|
|
- `dropdown` - displays the link in the user dropdown menu (default)
|
|
|
|
If the `location` property is not specified, the link will be displayed in the
|
|
user dropdown menu.
|
|
|
|
### Configuration
|
|
|
|
#### Kubernetes
|
|
|
|
To configure support links in your Coder Kubernetes deployment, update your Helm
|
|
chart values as follows:
|
|
|
|
```yaml
|
|
coder:
|
|
env:
|
|
- name: CODER_SUPPORT_LINKS
|
|
value: >
|
|
[{"name": "Hello GitHub", "target": "https://github.com/coder/coder",
|
|
"icon": "bug"},
|
|
{"name": "Hello Slack", "target":
|
|
"https://codercom.slack.com/archives/C014JH42DBJ", "icon":
|
|
"/icon/slack.svg"},
|
|
{"name": "Hello Discord", "target": "https://discord.gg/coder", "icon":
|
|
"/icon/discord.svg", "location": "navbar"},
|
|
{"name": "Hello Foobar", "target": "https://foo.com/bar", "icon":
|
|
"/emojis/1f3e1.png"}]
|
|
```
|
|
|
|
#### System package
|
|
|
|
if running as a system service, set an environment variable
|
|
`CODER_SUPPORT_LINKS` in `/etc/coder.d/coder.env` as follows,
|
|
|
|
```dotenv
|
|
CODER_SUPPORT_LINKS='[{"name": "Hello GitHub", "target": "https://github.com/coder/coder", "icon": "bug"}, {"name": "Hello Slack", "target": "https://codercom.slack.com/archives/C014JH42DBJ", "icon": "https://raw.githubusercontent.com/coder/coder/main/site/static/icon/slack.svg"}, {"name": "Hello Discord", "target": "https://discord.gg/coder", "icon": "https://raw.githubusercontent.com/coder/coder/main/site/static/icon/discord.svg", "location": "navbar"}, {"name": "Hello Foobar", "target": "https://discord.gg/coder", "icon": "/emojis/1f3e1.png"}]'
|
|
```
|
|
|
|
For CLI, use,
|
|
|
|
```sh
|
|
export CODER_SUPPORT_LINKS='[{"name": "Hello GitHub", "target": "https://github.com/coder/coder", "icon": "bug"}, {"name": "Hello Slack", "target": "https://codercom.slack.com/archives/C014JH42DBJ", "icon": "https://raw.githubusercontent.com/coder/coder/main/site/static/icon/slack.svg"}, {"name": "Hello Discord", "target": "https://discord.gg/coder", "icon": "https://raw.githubusercontent.com/coder/coder/main/site/static/icon/discord.svg", "location": "navbar"}, {"name": "Hello Foobar", "target": "https://discord.gg/coder", "icon": "/emojis/1f3e1.png"}]'
|
|
coder-server
|
|
```
|