Update images in REST APIs

docs/compatibility-api/guides/messaging/general/handling-incoming-messages-from-code/index.mdx

@@ -381,17 +381,43 @@ If you don't have a phone
 number yet, make sure to [buy one](/platform/phone-numbers/getting-started/buying-a-phone-number). You
 will need at least one number to receive messages.
 
-Then, open the settings for the number. Under "Messaging Settings", choose to
-handle messages using "LaML Webhooks", then paste the public ngrok URL which
-connects to your application.
-
-<figure>
-  <img className="img-800" src={require("./number-messaging-settings.webP").default} alt="A screenshot of the Messaging Settings of the Phone Numbers page of a SignalWire Space. 'Handle Messages Using' is set to 'LaML Webhooks'. The public ngrok URL connecting to the application is entered in the field labeled 'When a Message Comes In'." />
-  <figcaption>
-    Connecting a number to your XML endpoint. First select "LaML Webhooks", then paste the
-    URL of the bin.
-  </figcaption>
-</figure>
+First, we need to create a new cXML script resource that points to your ngrok URL.
+To do so, go to the "Resources" section from your sidebar, and create a new Script Resource.
+Select the Script type as cXML.
+
+![Script resource selector with cXML highlighted.](@image/dashboard/resources/new-cxml-bin.png)
+
+When configuring the cXML script, select the "External URL" option, and paste the ngrok URL.
+
+![cXML script configuration with external URL](@image/dashboard/resources/external-cxml-bin.png)
+
+import NewLegacy from '/docs/home/platform/dashboard/_ui-admonition.mdx'
+
+<NewLegacy />
+
+If you don't have a phone
+number yet, make sure to [buy one](/platform/phone-numbers/getting-started/buying-a-phone-number). You
+will need at least one number to receive messages.
+
+You can do that from the "Phone Numbers" section in the Sidebar. Go to the Settings page of the number you
+want to configure. In the `Handling Inbound Messages` section, assign your cXML script.
+
+![Assign Resource](@image/dashboard/phone-numbers/assign-resource-full.png)
+
+<Accordion 
+  title="If you're on the Legacy UI"
+  defaultOpen={false}
+>
+
+You don't need to create a new cXML resource for your call.
+
+Simply open the settings for the number you want to configure, and under "**Inbound Message Settings**", 
+choose to handle incoming messages using "LaML Webhooks", then paste the public ngrok URL
+which connects to your application.
+
+![legacy UI cxml webhook configuration](@image/dashboard/legacy/external-cxml-webhook.webp)
+
+</Accordion>
 
 Try sending a message to the configured phone number: after a few seconds you'll
 receive an automated reply, whose content will be different depending on what

docs/compatibility-api/guides/messaging/python/how-to-get-reply-statistics-with-python/index.mdx

@@ -14,7 +14,7 @@ x-custom:
 This guide will use the SignalWire Python SDK to get a list of owned DIDs, and compare inbound and outbound messages to provide statistics on reply rate.
 
 <figure>
-  <img className="img-600" src={require("./a5ae77e-ReplyStats.webP").default} alt="A screenshot of the resulting output. It reads: 'You sent 60 Messages. You received 11 Replies. 1 Unique User Replied. 0 Stop or other bad replies. Your reply rate is 18.332%." />
+  <img className="img-600" src={require("./reply-stats.webp").default} alt="A screenshot of the resulting output. It reads: 'You sent 60 Messages. You received 11 Replies. 1 Unique User Replied. 0 Stop or other bad replies. Your reply rate is 18.332%." />
   <figcaption>The resulting stats.</figcaption>
 </figure>
 

docs/compatibility-api/guides/messaging/python/text-subscription/index.mdx

@@ -21,9 +21,11 @@ You will need the [Python SignalWire SDK](/compatibility-api/sdks) and the [Mail
 
 You will need a SignalWire phone number as well as your API Credentials (**API Token**, **Space URL**, and **Project ID**) which can all be found in an easily copyable format within the **API** tab of your SignalWire portal. 
 
-<figure>
-  <img className="img-800" src={require("./71021f8-Screen_Shot_2021-12-16_at_11.18.20_AM.webP").default} alt="A screenshot of the menu pane of a SignalWire Space. The API tab is near the bottom of the list within the Project heading." />
-</figure>
+<Frame>
+
+![API Credentials](@image/dashboard/credentials/api-credentials.webp)
+
+</Frame>
 
 How to Run Application
 ----------------------

docs/compatibility-api/guides/messaging/python/text-to-email/index.mdx

@@ -20,10 +20,6 @@ You can find the full code for this application on GitHub [here](https://github.
 
 You will also need a SignalWire phone number which is configured for webhooks. Within the **Phone Numbers** tab of your SignalWire portal you will be able to acquire a phone number: you should configure its "Messaging Settings" to handle messages using a "LaML Webhook". Then, you need to specify the _public URL_ where your application is listening to. You can use ngrok to get a public address, see our guide on [How to Locally Test Webhooks with Ngrok](/platform/basics/guides/technical-troubleshooting/how-to-test-webhooks-with-ngrok). Regardless of what your public address will be, this application listens for POST requests on the `/sms-webhook` route, so your URL will be something like `https://<yourdomain>/sms-webhook`.
 
-<figure>
-  <img className="img-800" src={require("../text-subscription/71021f8-Screen_Shot_2021-12-16_at_11.18.20_AM.webP").default} alt="A screenshot of the menu pane of a SignalWire Space. The Messaging Campaigns item appears under the Project heading." />
-</figure>
-
 How to Run the Application
 --------------------------
 

docs/rest/compatibility-api/overview/overview.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 0
 ---
 
-import PostmanCollectionImg from '../../_img/postman.webp'
+import { SiPostman } from "react-icons/si";
 import LamlAdmonition from '/docs/compatibility-api/_laml-admonition.md'
 
 # Overview
@@ -14,12 +14,12 @@ This can all be achieved by sending HTTP requests to the SignalWire REST API.
 
 <LamlAdmonition />
 
-<LinkBadge
-  altText="Postman Colleciton for SignalWire REST APIs."
-  text="Postman Collection"
-  link="https://github.com/signalwire/rest-apis"
-  img={PostmanCollectionImg}
-/>
+<CardGroup cols={3}>
+<Card title="Postman Collection" icon={<SiPostman />} href="https://github.com/signalwire/rest-apis">
+  Postman Collection for SignalWire REST APIs.
+</Card>
+</CardGroup>
+
 
 ## Base URL
 

docs/rest/overview/authorization.mdx

@@ -13,12 +13,9 @@ Each project has its own Project ID and Authentication Tokens you will need to
 use when making each request to the API. You can find your Project ID and
 Authentication Tokens in your SignalWire Dashboard.
 
-<img
-  src={require("../_img/21c4221-token.webp").default}
-  alt="SignalWire Dashboard"
-  className="img-800"
-/>
-
+<Frame>
+![API credentials in the Dashboard.](@image/dashboard/credentials/api-credentials.webp)
+</Frame>
 
 ---
 

docs/rest/signalwire-rest/guides/campaign-registry/assigning-numbers-to-a-campaign-in-bulk/index.mdx

@@ -71,13 +71,9 @@ Required Resources
 This script does not require any additional packages except for those native to Python! 
 However, you will need the `campaignSID` of the campaign that will contain the numbers you are assigning. 
 You can find your campaign SID by going to the Messaging Campaigns section of your SignalWire Space and clicking the specific campaign whose numbers you need. 
-The SID is the long alphanumeric string at the top as shown here:
+The SID is the UUID listed under your Campaign Name.
 
-<figure>
-  <img className="img-800" src={require("./34f4a27-Screen_Shot_2022-06-08_at_6.10.17_PM.webP").default} alt="A screenshot of a Campaign page within the Messaging Campaigns page of a SignalWire Space. The Campaign SID is a long string of numbers and letters beneath the Campaign name." />
-</figure>
-
-** How to get API Credentials **
+### How to get API Credentials
 
 The API also requires that you authenticate yourself using your Project ID, API Token, and Space URL. If you do not know where to find these values, check out our guide to [Navigating your SignalWire Space](/platform/dashboard/get-started/explore#api)!
 

docs/rest/signalwire-rest/guides/campaign-registry/deleting-all-number-assignments-from-a-campaign/index.mdx

@@ -77,10 +77,7 @@ What do I need to run this code?
 The API requires that you authenticate yourself using your Project ID, API Token, and Space URL. If you do not know where to find these values, check out our guide [here](/platform/dashboard/get-started/explore#api)!
 
 You will also need your campaign SID which can be found in your portal under **Messaging Campaigns** -> **Campaigns** or by [listing campaigns using our endpoint](/rest/signalwire-rest/endpoints/space/list-campaigns).
-
-<figure>
-  <img className="img-800" src={require("./54c5936-Screen_Shot_2022-04-25_at_5.23.43_PM.webP").default} alt="A screenshot of the Campaigns page within the Messaging Campaigns section of a SignalWire Space. Campaign details, including the campaign SID, are available on this page." />
-</figure>
+It is the UUID listed under your Campaign Name.
 
 Step by Step Code Walkthrough
 -----------------------------

docs/rest/signalwire-rest/guides/campaign-registry/deleting-all-number-assignments-from-multiple-campaigns/index.mdx

@@ -38,10 +38,7 @@ CampaignSID,CampaignID
 ```
 
 Your campaign SIDs can be found in your portal under **Messaging Campaigns** -> **Campaigns** or by [listing campaigns using our endpoint](/rest/signalwire-rest/endpoints/space/list-campaigns).
-
-<figure>
-  <img className="img-800" src={require("../deleting-all-number-assignments-from-a-campaign/54c5936-Screen_Shot_2022-04-25_at_5.23.43_PM.webP").default} alt="A screenshot of the Campaigns page within the Messaging Campaigns section of a SignalWire Space. Campaign details, including the campaign SID, are available on this page." />
-</figure>
+It is the UUID listed under your Campaign Name.
 
 Step by Step Code Walkthrough
 -----------------------------

docs/rest/signalwire-rest/guides/campaign-registry/how-to-list-phone-numbers-assigned-to-a-specific-campaign/index.mdx

@@ -406,11 +406,7 @@ public class ListCampaignNumbers {
 
 You will need your API credentials as well as the campaign ID that you would like to pull information on. You can [find your API credentials](/platform/dashboard/get-started/explore#api) in the API tab of your SignalWire Space! 
 
-You can find your campaign ID by going to the Messaging Campaigns section of your SignalWire Space and clicking the specific campaign whose numbers you need. The ID is the long alphanumeric string at the top as shown here: 
-
-<figure>
-  <img className="img-800" src={require("./d5a0e5c-Screen_Shot_2022-02-14_at_1.09.45_PM.webP").default} alt="A screenshot of a Messaging Campaign in a SignalWire Space. The Campaign ID is shown beneath the campaign title as a long string of numbers and letters." />
-</figure>
+You can find your campaign ID by going to the Messaging Campaigns section of your SignalWire Space and clicking the specific campaign whose numbers you need. The ID is the UUID listed under your Campaign Name.
 
 Python
 ------

docs/rest/signalwire-rest/guides/campaign-registry/list-all-messaging-campaign-number-assignments-to-csv/index.mdx

@@ -237,7 +237,7 @@ Output
 ------
 
 <figure>
-  <img className="img-800" src={require("./3492f36-Screen_Shot_2022-06-02_at_11.14.45_AM.webP").default} alt="A screenshot of a table organizing values by Brand SID, Brand ID, Campaign SID, Campaign ID, Number SID, Number, Number State, and Date Added." />
+  <img className="img-800" src={require("./brand-table.webp").default} alt="A screenshot of a table organizing values by Brand SID, Brand ID, Campaign SID, Campaign ID, Number SID, Number, Number State, and Date Added." />
 </figure>
 
 Comments

docs/rest/signalwire-rest/guides/campaign-registry/release-campaign-numbers-from-csv/index.mdx

@@ -20,12 +20,8 @@ sidebar_custom_props:
 
 This snippet will show how you can easily use our [Delete Phone Number Assignments Endpoint](/rest/signalwire-rest/endpoints/space/delete-number-assignment) to remove specific phone number assignments from a campaign. This frees up the numbers to be used in any other campaigns or for use cases other than 10DLC messaging. You only need a CSV with numbers to remove in order to get started!
 
-We will use Python to accomplish this, but check out our handy **Try It** feature in our docs by replacing the variables here with your own and running it in the browser. You can then easily copy the generated code in cURL or your favorite language!
-
-<figure>
-  <img className="img-800" src={require("./6d1b4f7-a5d9dec-Screen_Shot_2022-03-14_at_2.24.18_PM.webP").default} alt="A screenshot of the 'Try It' docs feature. Buttons at the top of the graphical UI allow the user to select their language from Shell, Node, Ruby, PHP, and Python. The Authentication section accepts text input for the Project ID and API Token. The URL shows the current base URL. The Space name, which is the subdomain appearing before '.signalwire.com' in the URL, is circled in red. Beneath this, a code window shows a sample request in CURL. A red button reads 'Try It!' " />
-</figure>
-
+We will use Python to accomplish this. But feel free to try the [`delete-number-assignment` endpoint](/rest/signalwire-rest/endpoints/space/delete-number-assignment) directly from your browser! You can 
+call the REST API or copy generated code in cURL or your favorite language.
 
 <details>
   <summary>Full code example: How to Delete Numbers from Campaign Based on CSV</summary>
@@ -91,10 +87,7 @@ Required Resources
 The API requires that you authenticate yourself using your Project ID, API Token, and Space URL. If you do not know where to find these values, check out our guide [here](/platform/dashboard/get-started/explore#api)!
 
 You will need a campaign SID of the campaign containing the numbers you want to remove. Your campaign SIDs can be found in your portal under **Messaging Campaigns** -> **Campaigns** or by [listing campaigns using our endpoint](/rest/signalwire-rest/endpoints/space/list-campaigns).
-
-<figure>
-  <img className="img-800" src={require("./77a7104-Screen_Shot_2022-06-21_at_12.45.04_PM.webP").default} alt="A screenshot of a Campaign within the Messaging Campaigns page of a SignalWire Space. The campaign SID is shown as a long alphanumeric string under the campaign title." />
-</figure>
+It is the UUID listed under your Campaign Name.
 
 You will also need a CSV containing numbers to delete in the first column. You can name the column headers anything you want but if the number is not in the first column, you will need to adjust the code. 
 

docs/rest/signalwire-rest/overview/overview.mdx

@@ -2,7 +2,7 @@
 sidebar_position: 0
 ---
 
-import PostmanCollectionImg from '../../_img/postman.webp'
+import { SiPostman } from "react-icons/si";
 
 
 # Overview
@@ -13,12 +13,10 @@ The REST API is structured like most other [REST](http://en.wikipedia.org/wiki/R
 
 Proper HTTP status codes and [JSON](http://www.json.org/) are returned in all REST API endpoints, including errors.
 
-<LinkBadge
-  altText="Postman Colleciton for SignalWire REST APIs."
-  text="Postman Collection"
-  link="https://github.com/signalwire/rest-apis"
-  img={PostmanCollectionImg}
-/>
-
+<CardGroup cols={3}>
+<Card title="Postman Collection" icon={<SiPostman />} href="https://github.com/signalwire/rest-apis">
+  Postman Collection for SignalWire REST APIs.
+</Card>
+</CardGroup>
 
 Be sure to subscribe to the [SignalWire Community](https://signalwire.community) for information on new features and changes to the API and language libraries.

docs/sdks/reference/realtime-sdk/guides/messaging/forwarding-texts-to-email-nodejs/index.mdx

@@ -34,10 +34,10 @@ We will write a simple server that listens for a message event from SignalWire w
     - You will need a [Mailgun](https://www.mailgun.com/) API key and Domain.
     - You will need your SignalWire credentials (i.e., Space URL, Project ID, and API token). If you need help finding these, please see [Navigating your SignalWire Space](/platform/dashboard/get-started/explore).
     - You will also need to visit your SignalWire Space to set up your SignalWire phone number message handler.
-      1. Within the **Phone Numbers** tab of your Space, click on a number you wish to forward texts for and **Edit Settings**.
+      {/* 1. Within the **Phone Numbers** tab of your Space, click on a number you wish to forward texts for and **Edit Settings**.
       2. Scroll down to **Message Settings** and choose the **Relay Application** option to "Handle Messages".
       3. Set any Relay **context** you like. This just has to match your webhook code. Our example will use **"office"**.
-      4. Remember to **save** your settings!
+      4. Remember to **save** your settings! */}
 
   </LangItem>
   <LangItem value="relayv4">
@@ -47,22 +47,49 @@ We will write a simple server that listens for a message event from SignalWire w
     - You will need a [Mailgun](https://www.mailgun.com/) API key and Domain.
     - You will need your SignalWire credentials (i.e., Space URL, Project ID, and API token). If you need help finding these, please see [Navigating your SignalWire Space](/platform/dashboard/get-started/explore).
     - You will also need to visit your SignalWire Space to set up your SignalWire phone number message handler.
-      1. Within the **Phone Numbers** tab of your Space, click on a number you wish to forward texts for and **Edit Settings**.
+      {/* 1. within the **phone numbers** tab of your space, click on a number you wish to forward texts for and **edit settings**.
       2. Scroll down to **Message Settings** and choose the **Relay Application** option to "Handle Messages".
       3. Set any Relay **topic** you like. This just has to match your webhook code. Our example will use **"office"**.
-      4. Remember to **save** your settings!
+      4. Remember to **save** your settings! */}
 
   </LangItem>
 </Language>
 
-<figure>
-  <img
-    className="img-800"
-    src={require("./074f995-numbers-handlers.webP").default}
-    alt="A screenshot of the Phone Numbers page in a SignalWire space with the indicated selections in Messaging Settings."
-  />
-  <figcaption>Phone number configuration page.</figcaption>
-</figure>
+### Configuring the phone number
+
+First, we need to create a new Relay Application resource.
+To do so, go to the "Resources" section from your sidebar, and create a new Relay ApplicationResource.
+
+![Relay Application resource selector with cXML highlighted.](@image/dashboard/resources/add-new-relay-application.png)
+
+When configuring the Relay Application, set the topic to "office" (to match what we have in the code).
+
+import NewLegacy from '/docs/home/platform/dashboard/_ui-admonition.mdx'
+
+<NewLegacy />
+
+If you don't have a phone
+number yet, make sure to [buy one](/platform/phone-numbers/getting-started/buying-a-phone-number). You
+will need at least one number to receive messages.
+
+You can do that from the "Phone Numbers" section in the Sidebar. Go to the Settings page of the number you
+want to configure. In the `Inbound Message Settings` section, assign your relay application.
+
+![Assign Resource](@image/dashboard/phone-numbers/assign-resource-full.png)
+
+<Accordion 
+  title="If you're on the Legacy UI"
+  defaultOpen={false}
+>
+
+You don't need to create a new resource for your call.
+
+Simply open the settings for the number you want to configure, and under "**Inbound Message Settings**", 
+choose to handle incoming messages using "Relay Application", and set the topic to "office" to match the code.
+
+![legacy UI relay application configuration](@image/dashboard/legacy/number-message-config-relay.png)
+
+</Accordion>
 
 :::info Note on Email Delivery Service
 

docs/sdks/reference/realtime-sdk/guides/voice/coaching/index.mdx

@@ -17,10 +17,6 @@ This guide will show you how to use Coaching and Recording features. Quickly lea
 
 The [Coach](/compatibility-api/cxml/voice/conference-noun#coaching-a-conference-call) attribute accepts a call SID of a call that is currently connected to an in-progress conference. The application we will be building out examines an agent and a customer on a call, with a supervisor who later joins by coaching the conference.
 
-<figure>
-  <img className="img-800" src={require("./2b2aa48-coach-screen-snap.webP").default} alt="A screenshot of an application with a Dashboard showing active conferences, with detailed attributes for each participant." />
-</figure>
-
 ## What do I need to run this application?
 
 Find the full implementation on the [Github Repo](https://github.com/signalwire/guides/tree/main/Voice/Implement%20Coaching%20and%20Recording%20with%20NodeJS).

src/components/Extras/Card/CardGroup.module.css

@@ -1,6 +1,7 @@
 .cardGroup {
   display: grid;
   gap: 1rem;
+  margin-bottom: 1rem;
 }
 .cardGroup > :global(.card) {
   margin: 0;