# Create a component on a v3 status page. - Checkly Docs

> Add a SERVICE or GROUP component to a v3 status page. Nest it under a GROUP via parentId.

Source: https://www.checklyhq.com/docs/api-reference/status-pages-v3/create-a-component-on-a-v3-status-page/

---

Create a component on a v3 status page.

```
curl --request POST \
--url https://api.checklyhq.com/v3/status-pages/{statusPageId}/components \
--header 'Authorization: Bearer ' \
--header 'Content-Type: application/json' \
--data '
{
"name": " ",
"displayOrder": 123,
"type": "SERVICE",
"description": " ",
"hidden": true,
"configuration": {
"expandedByDefault": false,
"showHistoricalData": true
},
"parentId": " "
}
'
```

```
import requests

url = "https://api.checklyhq.com/v3/status-pages/{statusPageId}/components"

payload = {
"name": " ",
"displayOrder": 123,
"type": "SERVICE",
"description": " ",
"hidden": True,
"configuration": {
"expandedByDefault": False,
"showHistoricalData": True
},
"parentId": " "
}
headers = {
"Authorization": "Bearer ",
"Content-Type": "application/json"
}

response = requests.post(url, json=payload, headers=headers)

print(response.text)
```

```
const options = {
method: 'POST',
headers: {Authorization: 'Bearer ', 'Content-Type': 'application/json'},
body: JSON.stringify({
name: ' ',
displayOrder: 123,
type: 'SERVICE',
description: ' ',
hidden: true,
configuration: {expandedByDefault: false, showHistoricalData: true},
parentId: ' '
})
};

fetch('https://api.checklyhq.com/v3/status-pages/{statusPageId}/components', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));
```

```
"https://api.checklyhq.com/v3/status-pages/{statusPageId}/components",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'name' => ' ',
'displayOrder' => 123,
'type' => 'SERVICE',
'description' => ' ',
'hidden' => true,
'configuration' => [
'expandedByDefault' => false,
'showHistoricalData' => true
],
'parentId' => ' '
]),
CURLOPT_HTTPHEADER => [
"Authorization: Bearer ",
"Content-Type: application/json"
],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```

```
package main

import (
"fmt"
"strings"
"net/http"
"io"
)

func main() {

url := "https://api.checklyhq.com/v3/status-pages/{statusPageId}/components"

payload := strings.NewReader("{\n \"name\": \" \",\n \"displayOrder\": 123,\n \"type\": \"SERVICE\",\n \"description\": \" \",\n \"hidden\": true,\n \"configuration\": {\n \"expandedByDefault\": false,\n \"showHistoricalData\": true\n },\n \"parentId\": \" \"\n}")

req, _ := http.NewRequest("POST", url, payload)

req.Header.Add("Authorization", "Bearer ")
req.Header.Add("Content-Type", "application/json")

res, _ := http.DefaultClient.Do(req)

defer res.Body.Close()
body, _ := io.ReadAll(res.Body)

fmt.Println(string(body))

}
```

```
HttpResponse response = Unirest.post("https://api.checklyhq.com/v3/status-pages/{statusPageId}/components")
.header("Authorization", "Bearer ")
.header("Content-Type", "application/json")
.body("{\n \"name\": \" \",\n \"displayOrder\": 123,\n \"type\": \"SERVICE\",\n \"description\": \" \",\n \"hidden\": true,\n \"configuration\": {\n \"expandedByDefault\": false,\n \"showHistoricalData\": true\n },\n \"parentId\": \" \"\n}")
.asString();
```

```
require 'uri'
require 'net/http'

url = URI("https://api.checklyhq.com/v3/status-pages/{statusPageId}/components")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer '
request["Content-Type"] = 'application/json'
request.body = "{\n \"name\": \" \",\n \"displayOrder\": 123,\n \"type\": \"SERVICE\",\n \"description\": \" \",\n \"hidden\": true,\n \"configuration\": {\n \"expandedByDefault\": false,\n \"showHistoricalData\": true\n },\n \"parentId\": \" \"\n}"

response = http.request(request)
puts response.read_body
```

```
{
"name": " ",
"displayOrder": 123,
"id": " ",
"statusPageId": " ",
"configuration": {
"expandedByDefault": false,
"showHistoricalData": true
},
"created_at": "2023-12-25",
"type": "SERVICE",
"description": " ",
"hidden": true,
"parentId": " ",
"updated_at": "2023-12-25"
}
```

```
{
"statusCode": 401,
"error": "Unauthorized",
"message": "Bad Token",
"attributes": {}
}
```

```
{
"statusCode": 403,
"error": "Forbidden",
"message": "Forbidden"
}
```

```
{
"statusCode": 404,
"error": "Not Found",
"message": "Not Found"
}
```

```
{
"statusCode": 429,
"error": "Too Many Requests",
"message": "Too Many Requests",
"attributes": {}
}
```

Status Page Components

# Create a component on a v3 status page.

Add a SERVICE or GROUP component to a v3 status page. Nest it under a GROUP via parentId.

POST

/

v3

/

status-pages

/

{statusPageId}

/

components

Create a component on a v3 status page.

```
curl --request POST \
--url https://api.checklyhq.com/v3/status-pages/{statusPageId}/components \
--header 'Authorization: Bearer ' \
--header 'Content-Type: application/json' \
--data '
{
"name": " ",
"displayOrder": 123,
"type": "SERVICE",
"description": " ",
"hidden": true,
"configuration": {
"expandedByDefault": false,
"showHistoricalData": true
},
"parentId": " "
}
'
```

```
import requests

url = "https://api.checklyhq.com/v3/status-pages/{statusPageId}/components"

payload = {
"name": " ",
"displayOrder": 123,
"type": "SERVICE",
"description": " ",
"hidden": True,
"configuration": {
"expandedByDefault": False,
"showHistoricalData": True
},
"parentId": " "
}
headers = {
"Authorization": "Bearer ",
"Content-Type": "application/json"
}

response = requests.post(url, json=payload, headers=headers)

print(response.text)
```

```
const options = {
method: 'POST',
headers: {Authorization: 'Bearer ', 'Content-Type': 'application/json'},
body: JSON.stringify({
name: ' ',
displayOrder: 123,
type: 'SERVICE',
description: ' ',
hidden: true,
configuration: {expandedByDefault: false, showHistoricalData: true},
parentId: ' '
})
};

fetch('https://api.checklyhq.com/v3/status-pages/{statusPageId}/components', options)
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.error(err));
```

```
"https://api.checklyhq.com/v3/status-pages/{statusPageId}/components",
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => "",
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 30,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => "POST",
CURLOPT_POSTFIELDS => json_encode([
'name' => ' ',
'displayOrder' => 123,
'type' => 'SERVICE',
'description' => ' ',
'hidden' => true,
'configuration' => [
'expandedByDefault' => false,
'showHistoricalData' => true
],
'parentId' => ' '
]),
CURLOPT_HTTPHEADER => [
"Authorization: Bearer ",
"Content-Type: application/json"
],
]);

$response = curl_exec($curl);
$err = curl_error($curl);

curl_close($curl);

if ($err) {
echo "cURL Error #:" . $err;
} else {
echo $response;
}
```

```
package main

import (
"fmt"
"strings"
"net/http"
"io"
)

func main() {

url := "https://api.checklyhq.com/v3/status-pages/{statusPageId}/components"

payload := strings.NewReader("{\n \"name\": \" \",\n \"displayOrder\": 123,\n \"type\": \"SERVICE\",\n \"description\": \" \",\n \"hidden\": true,\n \"configuration\": {\n \"expandedByDefault\": false,\n \"showHistoricalData\": true\n },\n \"parentId\": \" \"\n}")

req, _ := http.NewRequest("POST", url, payload)

req.Header.Add("Authorization", "Bearer ")
req.Header.Add("Content-Type", "application/json")

res, _ := http.DefaultClient.Do(req)

defer res.Body.Close()
body, _ := io.ReadAll(res.Body)

fmt.Println(string(body))

}
```

```
HttpResponse response = Unirest.post("https://api.checklyhq.com/v3/status-pages/{statusPageId}/components")
.header("Authorization", "Bearer ")
.header("Content-Type", "application/json")
.body("{\n \"name\": \" \",\n \"displayOrder\": 123,\n \"type\": \"SERVICE\",\n \"description\": \" \",\n \"hidden\": true,\n \"configuration\": {\n \"expandedByDefault\": false,\n \"showHistoricalData\": true\n },\n \"parentId\": \" \"\n}")
.asString();
```

```
require 'uri'
require 'net/http'

url = URI("https://api.checklyhq.com/v3/status-pages/{statusPageId}/components")

http = Net::HTTP.new(url.host, url.port)
http.use_ssl = true

request = Net::HTTP::Post.new(url)
request["Authorization"] = 'Bearer '
request["Content-Type"] = 'application/json'
request.body = "{\n \"name\": \" \",\n \"displayOrder\": 123,\n \"type\": \"SERVICE\",\n \"description\": \" \",\n \"hidden\": true,\n \"configuration\": {\n \"expandedByDefault\": false,\n \"showHistoricalData\": true\n },\n \"parentId\": \" \"\n}"

response = http.request(request)
puts response.read_body
```

```
{
"name": " ",
"displayOrder": 123,
"id": " ",
"statusPageId": " ",
"configuration": {
"expandedByDefault": false,
"showHistoricalData": true
},
"created_at": "2023-12-25",
"type": "SERVICE",
"description": " ",
"hidden": true,
"parentId": " ",
"updated_at": "2023-12-25"
}
```

```
{
"statusCode": 401,
"error": "Unauthorized",
"message": "Bad Token",
"attributes": {}
}
```

```
{
"statusCode": 403,
"error": "Forbidden",
"message": "Forbidden"
}
```

```
{
"statusCode": 404,
"error": "Not Found",
"message": "Not Found"
}
```

```
{
"statusCode": 429,
"error": "Too Many Requests",
"message": "Too Many Requests",
"attributes": {}
}
```

#### Authorizations

​

Authorization

string

header

required

The Checkly Public API uses API keys to authenticate requests. You can get the API Key [here](https://app.checklyhq.com/settings/user/api-keys).
Your API key is like a password:
keep it secure!

Authentication to the API is performed using the Bearer auth method in the Authorization header and using the account ID.

For example, set Authorization header while using cURL: `curl -H "Authorization: Bearer [apiKey]" "X-Checkly-Account: [accountId]"`

#### Headers

​

x-checkly-account

string

Your Checkly account ID, you can find it at [https://app.checklyhq.com/settings/account/general](https://app.checklyhq.com/settings/account/general)

#### Path Parameters

​

statusPageId

string

required

#### Body

application/json

​

name

string

required

Required string length: `1 - 255`

​

displayOrder

integer

required

​

type

enum<string>

default: SERVICE

Available options: `SERVICE`,

`GROUP`

​

description

string | null

​

hidden

boolean

​

configuration

object

Type-specific settings: PublicStatusPageV3ServiceComponentConfiguration for a SERVICE, PublicStatusPageV3GroupComponentConfiguration for a GROUP. Omit to use the defaults of the type.

- Option 1
- Option 2

Show child attributes

​

parentId

string | null

The GROUP component this component sits under. Must belong to the same status page.

#### Response

Created

​

name

string

required

Required string length: `1 - 255`

​

displayOrder

integer

required

​

id

string

required

​

statusPageId

string

required

​

configuration

object

required

Type-specific settings: PublicStatusPageV3ServiceComponentConfiguration for a SERVICE, PublicStatusPageV3GroupComponentConfiguration for a GROUP. Omit to use the defaults of the type.

- Option 1
- Option 2

Show child attributes

​

created_at

string<date>

required

​

type

enum<string>

default: SERVICE

Available options: `SERVICE`,

`GROUP`

​

description

string | null

​

hidden

boolean

​

parentId

string | null

The GROUP component this component sits under. Must belong to the same status page.

​

updated_at

string<date> | null

Was this page helpful?

[Suggest edits](https://github.com/checkly/docs/edit/main/api-reference/status-pages-v3/create-a-component-on-a-v3-status-page.mdx)[Raise issue](https://github.com/checkly/docs/issues/new?title=Issue%20on%20docs&body=Path:%20/api-reference/status-pages-v3/create-a-component-on-a-v3-status-page)

[List the components of a v3 status page. Previous](https://www.checklyhq.com/docs/api-reference/status-pages-v3/list-the-components-of-a-v3-status-page)[Retrieve a single component of a v3 status page. Next](https://www.checklyhq.com/docs/api-reference/status-pages-v3/retrieve-a-single-component-of-a-v3-status-page)

[x](https://x.com/checklyhq)[github](https://github.com/checkly)[linkedin](https://linkedin.com/company/checkly)

[Powered by This documentation is built and hosted on Mintlify, a developer documentation platform](https://www.mintlify.com/?utm_campaign=poweredBy&utm_medium=referral&utm_source=checkly-422f444a)