[DOCS-9465] adding Synthetics templates

content/en/getting_started/synthetics/api_test.md

@@ -44,8 +44,12 @@ The example below demonstrates how to create an [HTTP test][3], a subtype of [si
 
 1. In the Datadog site, hover over **Digital Experience** and select **[Tests][4]** (under **Synthetic Monitoring & Testing**).
 2. Click **New Test** > **[New API test][5]**.
-3. Select the `HTTP` request type.
-4. Define your request:
+3. Select a pre-populated template to choose from, or build a test from scratch.
+
+   {{< img src="getting_started/synthetics/synthetics_api_templates.png" alt="Synthetics API test landing page with templates" style="width:100%;" >}}
+
+4. Select the `HTTP` request type.
+5. Define your request:
 
     - Add the URL of the endpoint you want to monitor. If you don't know what to start with, you can use `https://www.shopist.io/`, a test e-commerce web application. Defining the endpoint to test automatically populates the name of your test to `Test on www.shopist.io`. 
     - You can select **Advanced Options** to set custom request options, certificates, authentication credentials, and more.  
@@ -55,7 +59,7 @@ The example below demonstrates how to create an [HTTP test][3], a subtype of [si
       In this example, no specific advanced option is needed.
     - You can set tags such as `env:prod` and `app:shopist` on your test. Tags allow you to keep your test suite organized and quickly find tests you're interested in on the homepage.
 
-5. Click **Test URL** to trigger a sample test run.
+6. Click **Test URL** to trigger a sample test run.
 
 {{< img src="getting_started/synthetics/api-test-config-3.png" alt="API test configuration" style="width:100%;">}}
 

content/en/getting_started/synthetics/browser_test.md

@@ -39,7 +39,11 @@ The example below demonstrates the creation of a browser test that maps a user's
 
 1. In the Datadog site, hover over **Digital Experience** in the left hand menu and select **[Tests][2]** (under **Synthetic Monitoring & Testing**).
 2. In the top right corner, click **New Test** > **[Browser Test][3]**.
-3. Define your browser test:
+3. Select a pre-populated template to choose from, or build a test from scratch.
+
+   {{< img src="getting_started/synthetics/synthetics_browser_templates.png" alt="Synthetics browser test landing page with templates" style="width:100%;" >}}
+
+4. Define your browser test (build a test from scratch):
 
     - Add the URL of the website you want to monitor. If you don't know what to start with, you can use `https://www.shopist.io`, a test e-commerce web application.
     - Select **Advanced Options** to set custom request options, certificates, authentication credentials, and more. 

content/en/synthetics/api_tests/dns_tests.md

@@ -37,7 +37,9 @@ DNS tests can run from both [managed](#select-locations) and [private locations]
 
 After choosing to create a `DNS` test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Specify the **Domain** you want your test to query. For example, `www.example.com`.
 2. Specify the **DNS Server** to use (optional), it can be a domain name or an IP address. If not specified, your DNS test performs resolution using `8.8.8.8`, with a fallback on `1.1.1.1` and an internal AWS DNS server.

content/en/synthetics/api_tests/grpc_tests.md

@@ -38,11 +38,13 @@ Health Checks
 
 gRPC tests can run from both [managed](#select-locations) and [private locations][2] depending on your preference for running the test from outside or inside your network. gRPC tests can run on a schedule, on-demand, or directly within your [CI/CD pipelines][3].
 
-## Configuration
+## Configuration 
 
 After choosing to create a `gRPC` test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Specify the **Host** and **Port** to run your test on. The default gRPC port is `50051`.
 2. Select **Behavior Check** to perform a unary call or **Health Check** to perform a health check. 

content/en/synthetics/api_tests/http_tests.md

@@ -40,7 +40,9 @@ HTTP tests can run from both [managed](#select-locations) and [private locations
 
 After choosing to create an `HTTP` test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Choose the **HTTP Method** and specify the **URL** to query. Available methods are: `GET`, `POST`, `PATCH`, `PUT`, `HEAD`, `DELETE`, and `OPTIONS`. Both `http` and `https` URLs are supported.
 

content/en/synthetics/api_tests/icmp_tests.md

@@ -34,7 +34,9 @@ ICMP tests can run from both [managed](#select-locations) and [private locations
 
 After choosing to create an `ICMP` test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Specify the **Domain Name** or **IP address** to run your test on.
 2. Select or deselect **Track number of network hops (TTL)**. When selected, this option turns on a "traceroute" probe to discover all gateways along the path to the host destination.

content/en/synthetics/api_tests/ssl_tests.md

@@ -34,7 +34,9 @@ SSL tests can run from both [managed](#select-locations) and [private locations]
 
 After choosing to create a `SSL` test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Specify the **Host** and the **Port** to run your test on. The default SSL port is `443`.
 2. Add **Advanced Options** (optional) to your test:

content/en/synthetics/api_tests/tcp_tests.md

@@ -34,7 +34,9 @@ TCP tests can run from both [managed](#select-locations) and [private locations]
 
 After choosing to create a `TCP` test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Specify the **Host** and the **Port** to run your test on.
 2. Decide whether or not to **Track number of network hops (TTL)**. This option allows you to assert on the number of network hops and to have access to a TCP Traceroute in your test results.

content/en/synthetics/api_tests/udp_tests.md

@@ -32,7 +32,9 @@ UDP tests can run from both [managed](#select-locations) and [private locations]
 
 After choosing to create an `UDP` Test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Specify the **Host** and **Port** to run your test on.
 2. Enter the string you want to send in your test. 

content/en/synthetics/api_tests/websocket_tests.md

@@ -31,7 +31,9 @@ WebSocket tests can run from both [managed](#select-locations) and [private loca
 
 After choosing to create an `WebSocket` test, define your test's request.
 
-### Define request
+{{% synthetics-api-tests-templates %}}
+
+### Define request (build from scratch)
 
 1. Specify the **URL** to run your test on.
 2. Enter the string you want to send in your test. 

content/en/synthetics/browser_tests/_index.md

@@ -35,23 +35,27 @@ Browser tests are scenarios executed by Datadog on your web applications. They r
 
 Define the configuration of your browser test.
 
+1. Select a pre-populated template to choose from, or build a test from scratch.
+
+   {{< img src="getting_started/synthetics/synthetics_browser_templates.png" alt="Synthetics browser test landing page with templates" style="width:100%;" >}}
+
 1. Enter a **Starting URL**: The URL from which your browser test starts the scenario.
 
  <div class="alert alert-info">See <a href=#advanced-options>Advanced options</a> for more options.</div>
 
-2. Add a **name**: The name of your browser test.
-3. Select **environment and additional tags**: Set the `env` and related tags attached to your browser test. Use the `<KEY>:<VALUE>` format to filter on a `<VALUE>` for a given `<KEY>`.
-4. Select **browsers and devices**: The browsers (such as `Chrome`, `Firefox`, and `Edge`), and devices (such as `Laptop Large`, `Tablet`, and `Mobile Small`) to run your test on.
+1. Add a **name**: The name of your browser test.
+1. Select **environment and additional tags**: Set the `env` and related tags attached to your browser test. Use the `<KEY>:<VALUE>` format to filter on a `<VALUE>` for a given `<KEY>`.
+1. Select **browsers and devices**: The browsers (such as `Chrome`, `Firefox`, and `Edge`), and devices (such as `Laptop Large`, `Tablet`, and `Mobile Small`) to run your test on.
    - For a large laptop device, the dimensions are 1440 pixels x 1100 pixels.
    - For a tablet device, the dimensions are 768 pixels x 1020 pixels.
    - For a small mobile device, the dimensions are 320 pixels x 550 pixels.
-5. Select **managed and private locations**: Select locations around the world that are managed by Datadog or create [private locations][1] to run your browser test from custom locations or inside private networks.
+1. Select **managed and private locations**: Select locations around the world that are managed by Datadog or create [private locations][1] to run your browser test from custom locations or inside private networks.
 
    {{% managed-locations %}}
 
    You can also use the [Continuous Testing Tunnel][2] to trigger tests on your local development setup or in your CI/CD pipeline to test internal environments.
 
-6. Set the **test frequency**: The intervals vary from every five minutes to once per week. To request one-minute frequency, [contact Support][3].
+1. Set the **test frequency**: The intervals vary from every five minutes to once per week. To request one-minute frequency, [contact Support][3].
 
 ### Advanced options
 

content/en/synthetics/mobile_app_testing/_index.md

@@ -49,13 +49,13 @@ When the test runs successfully, the mobile app test recomputes (or "self heals"
 Define the configuration of your mobile app test.
 
 1. Select a mobile application from the dropdown menu. If you haven't created one already, create a mobile application in the [Applications List section][2] on the [Synthetic Monitoring & Continuous Testing Settings page][3]. 
-2. Select a **version** or click **Always run the latest version** to use the latest version of your mobile application whenever your test is run.
-3. Add a **name** for your test.
-4. Select **environment and additional tags** that relate to your test. Use the `<KEY>:<VALUE>` format to filter on a `<VALUE>` for a given `<KEY>`.
-4. Select the **devices** to run your test on.
-5. Set retry conditions for your test.
-6. Set the **test frequency** by clicking on basic time intervals or customizing your test frequency and **alert conditions** for your test monitor. 
-7. Enter a name for the test monitor, select a service or team member to notify, and add a message notification.
+1. Select a **version** or click **Always run the latest version** to use the latest version of your mobile application whenever your test is run.
+1. Add a **name** for your test.
+1. Select **environment and additional tags** that relate to your test. Use the `<KEY>:<VALUE>` format to filter on a `<VALUE>` for a given `<KEY>`.
+1. Select the **devices** to run your test on.
+1. Set retry conditions for your test.
+1. Set the **test frequency** by clicking on basic time intervals or customizing your test frequency and **alert conditions** for your test monitor. 
+1. Enter a name for the test monitor, select a service or team member to notify, and add a message notification.
 
 {{% synthetics-variables %}}
 

layouts/shortcodes/synthetics-api-tests-templates.md

@@ -0,0 +1,5 @@
+Select a pre-populated template to choose from, or build a test from scratch.
+
+  <figure class="text-center">
+  <img src="{{ .Site.Params.img_url}}images/getting_started/synthetics/synthetics_api_templates.png" alt="Synthetics API tests templates" width="100%">
+  </figure>