Merge pull request #520 from kinde-oss/Fix/Self-serve-portal-images

Fix/self serve portal images
Remove refs to being able to design change for portal

Author: clairekinde11

src/content/docs/build/set-up-options/self-serve-portal-for-orgs.mdx

@@ -37,9 +37,11 @@ A self-serve portal means your customers can make basic account changes without
 ## Configure the organization self-serve portal
 
 1. Go to **Settings > Environment > Self-serve portal**.
+   ![Settings for self-serve portal for orgs](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public)
 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard.
 3. Add an **Organization alias** to represent how your customers are referred to in your business, e.g. Account, Partner, Workspace, etc. This will be visible in the interface in the portal.
 4. In the **Organization profile** section, select the functions you want organization admins to be able to manage.
+   ![Options for showing hiding settings for org members](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/13cf1ec6-bbe1-4059-4c78-b97d94b2b200/public)
 5. Select **Save**.
 
 ## Portal access control with system permissions
@@ -48,7 +50,9 @@ Each core function within the self-serve portal is governed by a corresponding s
 
 These permissions can be included in your custom roles and assigned to organization members.
 
-We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them.
+We recommend creating custom roles with varying levels of portal access, which you can then assign as needed. For instance, you might create a role that allows members to view billing details but not update them. You can select these permissions within your existing roles, or when you create them.
+
+![Roles with system permissions for self-serve portal](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/1e90e72e-00d5-4063-8d34-79d1a9b8f000/public)
 
 When [configuring org roles](/billing/get-started/add-billing-role/), you can specify whether it should be:
 
@@ -57,7 +61,9 @@ When [configuring org roles](/billing/get-started/add-billing-role/), you can sp
 
 ## Generate the self-serve portal link
 
-Access to the portal is granted via a one-time link. There are two main ways to generate this link:
+Access to the portal is granted via a one-time link. You then use the link on an 'account' or 'profile' button in your app to open the Kinde portal screens. 
+
+There are two main ways to generate this link:
 
 - **Using the user's access token** (recommended)
 - **Using the Kinde Management API**
@@ -113,3 +119,9 @@ Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M t
 ```
 
 This will return a one-time portal link for the specified user.
+
+## How the self-serve portal looks
+
+When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display.
+
+![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/fb38548b-e530-4dfa-68b3-29ef2f287700/public)

src/content/docs/build/set-up-options/self-serve-portal-for-users.mdx

@@ -38,8 +38,10 @@ A self-serve portal means your customers can make basic account changes without
 ## Configure the user self-serve portal
 
 1. Go to **Settings > Environment > Self-serve portal**.
+   ![Settings for self-serve portal set up in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/81169031-611b-402a-20f7-47c84f53b600/public)
 2. Enter the **Return URL** that you want users to land on when they exit the portal, e.g. your app dashboard. This can also be used as a fallback URL if you decide to use the SDK method of dynamically generting the URL (see below).
 3. In the **User profile** section, select the functions you want the user to be able to manage. If you select **Billing**, they can manage their plan as well as payment methods.
+   ![Self-serve portal settings for users](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/f821e9c5-497d-41f0-b373-2755320d1c00/public)
 4. Select **Save**.
 
 ## Generate the self-serve portal link
@@ -98,3 +100,13 @@ Make a request to the `POST /api/v1/portal/generate_url` endpoint using an M2M t
 ```
 
 This will return a one-time portal link for the specified user.
+
+## How the self-serve portal looks
+
+When the user clicks the link you've added to your app, the portal opens. The default design is shown below, and we are working on allowing you to style this yourself. The options a member sees depends on their role and what you have chosen to display.
+
+![Self-serve portal in Kinde](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/4b3574c5-a499-4da5-e8d0-467d56255e00/public)
+
+You can also watch this short video showing how the portal works when a customer signs up for a plan using Kinde billing.
+
+<YoutubeVideo videoId="xxVwZW8OxIA" videoTitle="The customer billing experience with Kinde"/>