Integrating ShellyPlug smart plug using customapi. How are query params listed in the services(dot)yaml file?

[IrishMarty10]

Description

I've been building my homepage and wanted to integrate my Shelly Plug smart plug into it, in order to display the power draw of my server. Shelly Plug comes with a cloud api service to use.

The ShellyPlus documentation lists the following curl command:
curl -X POST https://<server_uri>/device/status -d "id=<device_id>&auth_key=<auth_key>"

I entered this command from inside my homepage container, and it produced a JSON response from the api, which means the two can communicate. The problem seems to be entering the correct information into the services.yaml file to receive the data.

How does the widget send the API request?

I sent the POST request using Insomnia with my id and auth_key value as "Form URL encoded" body requests, and got the correct response. I just don't know how to correctly input this in the services file. See:

The key field I want is the power draw, which is provided in the JSON data as "apower".

Any help greatly appreciated.

homepage version

v0.10.9

Installation method

Docker

Configuration

services.yaml
  - ShellyPlug:
      icon:
      href: https://control.shelly.cloud
      description: Dell Optiplex
      siteMonitor: https://control.shelly.cloud
      statusStyle: dot
      widget:
        type: customapi
        url: https://shelly-160-eu.shelly.cloud/device/status
        refreshInterval: 5000 # optional - in milliseconds, defaults to 10s
        method: POST # optional, e.g. POST
        headers: 
        requestBody:
          id: REDACTED
          auth_key: REDACTED
        display: # optional, default to block, see below
        mappings:
          - field: 
            label: Power Draw
            format: number
            suffix: W

Container Logs

No response

Browser Logs

No response

Troubleshooting

/app # curl -X POST https://shelly-160-eu.shelly.cloud/device/status -d "id=REDACTED&auth_key=REDACTED"
{"isok":true,"data":{"online":true,"device_status":{"cloud":{"connected":true},"_updated":"2025-02-14 01:11:21","code":"SNPL-00112UK","ts":1739495481.22,"sys":{"mac":"REDACTED","restart_required":false,"time":"21:34","unixtime":1739396087,"uptime":176031,"ram_size":244548,"ram_free":130504,"fs_size":458752,"fs_free":159744,"cfg_rev":10,"kvs_rev":1,"schedule_rev":0,"webhook_rev":0,"available_updates":{"stable":{"version":"1.3.3"}}},"mqtt":{"connected":false},"pluguk_ui":{},"id":"REDACTED","switch:0":{"id":0,"current":0.06,"source":"init","output":true,"apower":6,"voltage":237,"aenergy":{"by_minute":[99.308,97.941,95.208],"minute_ts":1739495459,"total":494.384},"temperature":{"tC":36.3,"tF":97.3}},"wifi":{"sta_ip":"192.168.7.50","status":"got ip","ssid":"REDACTED","rssi":-47},"ws":{"connected":false},"ble":{},"serial":REDACTED}}}/app #

[IrishMarty10]

Solved. I needed to pass through the Content-Type headers. So my services.yaml now looks like this:

 - ShellyPlug:
      icon:
      href: https://control.shelly.cloud
      description: Dell Optiplex
      siteMonitor: https://control.shelly.cloud
      statusStyle: dot
      widget:
        type: customapi
        url: https://shelly-160-eu.shelly.cloud/device/status
        refreshInterval: 5000
        method: POST
        headers:
          Content-Type: application/x-www-form-urlencoded
        requestBody: "id=REDACTED&auth_key=REDACTED"
        display:
        mappings:
          - field:
              data: 
                device_status:
                  "switch:0": apower
            label: Power Draw
            suffix: W

[github-actions[bot]]

This discussion has been automatically closed because it was marked as answered. See our contributing guidelines for more details.