we work to earn the right to work to earn the right to live

Author: SCDerox

docs/assets/linked-roles/authentification-page.jpg

@@ -2,4 +2,74 @@
 description: Setting up Linked Roles might take a few minutes, but by following this guide, you can get started easily.
 ---
 
-# Setup Linked Roles on your Discord
+# Setup Linked Roles on your Discord
+
+Get started with Linked Roles on your Discord to improve your user experience by displaying important roles of users
+next to their names.
+
+:::success What is this?
+Unsure what Linked Roles are? Linked Roles allow you to display the role of a user next to their username, like this:
+
+![SCNX Linked Roles usage shown on a Discord server, the position of the user is displayed next to their username](https://scnx.app/img/linked-roles-example.png)
+
+If you want to learn more about Linked Roles, you can do so in our [About Linked Roles](./linked-roles/intro) section.
+
+:::
+
+:::warning This feature is Early Access
+Linked roles are Early Access. This means that in addition to a paid plan,
+a [membership](https://membership.scootkit.com) with Early Access is also required. Early Access helps us invest money &
+time in developing new features and products. We plan to make this feature available to everyone with Unlimited /
+Professional plan without memberships in late Q2 2025.
+:::
+
+<IncludedInPlan data={{PROFESSIONAL: true, UNLIMITED: true, STARTER: false}} additionalDetails={{
+UNLIMITED: "Additional Early Access subscription required during Beta trial. Beta will end in Q2 2025.",
+PROFESSIONAL: "Additional Early Access subscription required during Beta trial. Beta will end in Q2 2025."}} />
+
+## Video (German) {#video}
+
+Our developer Simon is happy to guide you through this setup process in
+our [tutorial video on YouTube](https://www.youtube.com/watch?v=HR3yvTVpkOI). This video is in German right now, but
+we're working on an English translation.
+
+<Video url="https://www.youtube.com/watch?v=HR3yvTVpkOI" />
+
+## 0. Pre-Flight-Checklist 🛫 {#step-0}
+
+Before you can create your own Modmail on SCNX, please make sure that
+
+* you have [added your Server to SCNX](./setup).
+* your server has the paid [Unlimited](./scnx/guilds/plans) (<PlanPrice plan="UNLIMITED" type="MONTHLY"/>)
+  or [Professional](./scnx/guilds/plans) (<PlanPrice plan="PROFESSIONAL" type="MONTHLY"/>) plan, or consider using a
+  free trial, if
+  available for you.
+* you are the owner of the server you want to enable this feature
+  on ([why?](./scnx/guilds/trusted-admins#troubleshooting)) - if you are not the owner, please ask them to enable this
+  feature for you and grant you access as a [Trusted Admin](./scnx/guilds/trusted-admins).
+* you (or one of your trusted admins) have Early Access (purchasable with
+  a [ScootKit Membership Level 2 or higher](https://membership.scootkit.com)) during the beta trial. After the beta
+  trial ends (likely in Q2 2025), this requirement will be removed.
+* you've got 5-10 minutes of time (our estimate is that this takes around six minutes to finish on a computer, on mobile
+  it may take
+  a bit longer) to finish this guide - don't stop in the middle; your progress won't be saved.
+
+## 1. Time to get started {#step-1}
+
+To get started with the setup, please open the [Linked Roles page](https://scnx.app/glink?page=linked-roles/enable) of
+your server in the SCNX dashboard. There, click on "Start setup" to get started. You might be shown a video or a link to
+this guide, but you can also click "Continue" there, since you are already here :wink:
+
+## 2. Select credentials {#step-2}
+
+Next, SCNX will prompt you to select which Discord credentials you want to use for Linked Roles. If you are using other
+SCNX products, like [Modmail](./modmail/intro) or the [Custom Bot](./custom-bot/custom-commands), you can select them
+from this list and [skip to step 3](#step-3). If you are not using any other product, please follow [these instructions](#step-2-app).
+
+![SCNX prompting user to select credential source](@site/docs/assets/linked-roles/setup/select-credentials.png)
+
+### Creating a Discord bot application {#step-2-app}
+
+If you are not using the credentials of another product, you'll need to create a new app in your Discord Developer Dashboard.
+
+## 3. Configuring Linked Roles {#step-3}

docs/assets/linked-roles/setup/select-credentials.png

@@ -1,5 +1,27 @@
+---
+sidebar_position: 2
+description: Follow this guide to claim a Linked Role that has been assigned to you.
+---
+
 # How to claim a linked role
 
+Once you've been assigned a role, claiming it in Discord is easy! Follow this guide to claim your Linked Role.
+
 :::success Share me!
-You can share this guide with your members so they know how to get their roles!
-:::
+You can share this guide with your members so they know how to get their roles!\
+Here's the URL to share: [`https://scootk.it/claim-linked-roles`](https://scootk.it/claim-linked-roles).
+:::
+
+## Requirements {#requirements}
+
+Before you can claim your Linked Role, an administrator needs to
+have [created the Linked-Role on SCNX](./role-managment#create-linked-scnx-role), [configure it on Discord](./role-managment#linked-role-on-discord)
+and then [assign the role](./user-managment#add-role) to you. If these steps aren't finished, you won't be able to claim
+your role.
+
+If you run into issues when following this guide, please contact your server administrator and link them to
+our [troubleshooting page](./troubleshooting), where we go into detail on how to fix issues.
+
+## Claim your role on Discord {#claim-role}
+
+To get started, please click on the name of the server in Discord. There you'll be able to select the option "Linked-Roles".

docs/linked-roles.md

@@ -35,6 +35,7 @@ role [can be removed via the SCNX Dashboard](./user-managment#remove-role).
 Linked Roles can be displayed in the chat next to the username
 by [configuring chat permissions](./role-managment#display-in-chat). While a user can have multiple Linked Roles, only
 one can be displayed in a chat. Roles with a higher position on your Discord will be displayed with a higher priority.
+Having a Linked Role does not remove the role icon of another role.
 
 To [claim a Linked Role](./claim-roles), users will need to authorize their account with your custom Discord application
 using a
@@ -64,6 +65,5 @@ The following features are available on SCNX:
 * Authorization with your custom Discord App.
 * Multiple themes available for the [authorization page](./settings#authorization-page).
 * Off-Brand options available with the [Professional Plan](./../scnx/guilds/plans).
-* You can set up Linked Roles that can be claimed by any user.
-
-### Authorization page {#scnx-authorization}
+* You can set up [public linked roles](./role-managment#public-roles) that can be claimed by any user.
+* Excellent customer support on [our Discord](https://scootk.it/dc-en) in English and German.

docs/linked-roles/claim-roles.md

@@ -4,4 +4,6 @@
 
 ## Set up Linked Role on Discord {#linked-role-on-discord}
 
-## Display Linked Role in chat {#display-in-chat}
+## Display Linked Role in chat {#display-in-chat}
+
+## Public roles {#public-roles}

docs/linked-roles/intro.md

@@ -1,3 +1,5 @@
 # Linked Roles Configuration
 
-## Authorization page {#authorization-page}
+## Authorization page {#authorization-page}
+
+![Authorization page themes](@site/docs/assets/linked-roles/authentification-page.jpg)

docs/linked-roles/role-managment.md

@@ -7,13 +7,14 @@ import {faArrowCircleRight} from '@fortawesome/pro-solid-svg-icons';
 
 export default function Video({url}) {
     const [allowed, setAllowed] = useState(false);
-    const urlData = new URL(url);
+    if (url.includes('youtu.be')) url = url.replace('youtu.be', 'youtube.com')
+    const urlData = new URL(url.replaceAll('www.', ''));
 
     useEffect(() => {
         if (localStorage.getItem(`scootkit.privacy.consent-${urlData.hostname}`) === '1') setAllowed(true);
     }, [urlData]);
 
-    if (!allowed && urlData.hostname === 'youtu.be') return <div style={{width: '640px', height: '360px', justifyContent: 'center'}}
+    if (!allowed && urlData.hostname === 'youtube.com') return <div style={{width: '640px', height: '360px', justifyContent: 'center'}}
                               className="card flex items-center">
         <div>
             <div style={{textAlign: 'center'}}><FontAwesomeIcon icon={faYoutube} style={{fontSize: '60px'}}/></div>
@@ -42,7 +43,7 @@ export default function Video({url}) {
         </div>
     </div>;
 
-    return <div>
-        <ReactPlayer url={url} controls={true}/>
+    return <div className='player-wrapper'>
+        <ReactPlayer url={url}           className='react-player' controls={true}/>
     </div>;
 }

docs/linked-roles/settings.md

@@ -103,6 +103,26 @@ a.card:hover {
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+img {
+    padding: 2px;
+    border-radius: 15px;
+    background-color: #0d1524;
+}
+
 .DocSearch-Logo a {
     display: none !important;
+}
+
+.player-wrapper {
+    position: relative;
+    padding-top: 360px;
+    border-radius: 5px;
+}
+
+.react-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 20px;
+    overflow: hidden;
 }