# JSON Card

### **How to add a JSON card** <a href="#od_5576d085" id="od_5576d085"></a>

To add a JSON card to your reports,

1. Click the ![](https://1648695648-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FygZlXb1uCVgursV03Kgn%2Fuploads%2FLg6ENqWvPkPfz4TCm9OL%2Fimage.png?alt=media\&token=e747e59c-313a-4188-b007-514319ca94d3) icon on the left toolbar.
2. Drag select an area you want to add the JSON card on the report.

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/53949235-9775-53dc-aff3-1fa166b50000)

* **URL:** enter the full URL that you want to get data from. Note:
* Because of security policies, your URL have to use https scheme.
* Can include a param and allow user to change it in a filter.
* Example: [https://my-domain/path/{path\_param}?query\_param={query\_param}](https://my-domain/path/%7Bpath_param%7D?query_param={query_param})
* **Request method:**
* Get: retrieve data from a server at the specified resource.
* Post: send data to a server to create/update a resource.
* **Request timeout:** maximum time when trying to call API. When request time exceeds the maximum, we will show an error.\
  Note: Leave it empty if you don’t want to set a maximum time.
* **Data path:** path to a property of response JSON object (in case user don’t want to display whole response object)\\
* Note: leave it empty to display whole response
* Example: When your api response with: { status: “success” data: { propertyA: “valuable data”\
  } } And you want to show only “valuable data", you can config data path = data.propertyA

#### **Style a JSON Card** <a href="#od_1725a03a" id="od_1725a03a"></a>

Choose the look for your JSON card

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/ad6efe65-9fe8-55c5-a8ef-082fc1950000)

1. Click on tab “Style” in the right panel
2. Tooltip note: Note on the box, then you can see the question mark on the top right corner of filter
3. The rest styling options appear on the bottom toolbar

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/c803ab77-73e4-5027-919c-b46f80350000)

**JSON Card style**

1. **Fill color:** Fill color to the box
2. **Border:**
3. **Weight:** choose weight for the line of filter box
4. **Radius:** Choose to round filter box
5. **Style:** Style the line of filter box

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/b5806d34-a313-564f-8f5b-9b57dea50000)

6. **Add box shadow:** enable if you want to give the log element a more prominent look

![Photo alt #responsive](https://api.filerobot.com/opendocs-global/v1/get/6dd9258e-e1e3-5bb8-b0a7-03f223450000)