---
title: "Bluetooth Configuration"
slug: "bluetooth-configuration-widget"
updated: 2026-04-10T14:54:59Z
published: 2026-04-10T14:54:59Z
canonical: "learn.servitly.com/bluetooth-configuration-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://learn.servitly.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Bluetooth Configuration

The widget allowing device configuration through Bluetooth. You can scan for nearby Bluetooth devices, select one of the discovered ones, and then change the characteristics you have defined in the template, for instance, the access to the home WIFI (SSID and password).

#### Scan for Devices

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(523).png)

#### Select Device

#### ![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(524).png)

#### Configure Device

![](https://cdn.document360.io/6759e9c9-3ce3-49df-965a-7231d2d9a10a/Images/Documentation/image(525).png)

## Custom Update Logic

To convert specific configuration needs you can define JavaScript functions that are called during the widget usage.

### Writer Function

This JavaScript function is called each time a characteristic must be written. In this way, you can implement your custom write login, for instance by transforming the value to write, or by splitting it among multiple calls.

```javascript
var bleCustomWrite = function(device, characteristic, value, widget) {
        return new Promise((resolve, reject) => {
        console.log(device);
        console.log(characteristic);
        console.log(value);
        resolve();
        });
        };
```

See the *Writer Function* property on each characteristic.

### Update Callback

This JavaScript function is called after the Update button is pressed, so you can implement you custom post-update logic, for instance by calling an external service API, or by setting another characteristic to reboot the device or similar.

```javascript
var bleCustomUpdate = function(device, context, widget) {
        return new Promise((resolve, reject) => {
        console.log("UPDATED");
        console.log(device);
        resolve();
        });
        };
```

See the *Update Callback* property on the widget.

### Template Syntax

Below you can find some examples of how to use the component within a template.

```xml

            <bluetooth-configuration-widget [title]="'WIFI Configuration'"
            [config]="{statusService: '61fe', statusCharacteristic: '03ed06ef', pin: '12345'}">

            <property label="WIFI SSID" [config]="{service: '61fe', uuid: '16e009ba', mode: 'WRITE', editable: true}"></property>
            <property label="WIFI Password" [config]="{service: '61fe', uuid: '16e009bb', mode: 'WRITE', editable: true}"></property>

            <property label="Serial Number" [config]="{service: '61fe', uuid: '16e009aa' mode : 'READ', editable: false"></property>

            </bluetooth-configuration-widget>
        
```

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Bluetooth Configuration `&lt;bluetooth-configuration-widget&gt;`

| *Debug Mode* | The flag to enable BLE debugging that displays additional icons to access the BLE device and characteristic details of read or write errors. **Name**: config.debug **Type**: BOOLEAN \| Optional **Default Value**: *false* `[config]="{debug: true}"` |
| --- | --- |
| *PIN* | The optional PIN used to access the device. **Name**: config.pin **Type**: STRING \| Optional `[config]="{pin: '12345'}"` |
| *Status Characteristic UUID* | The UUID of the characteristic that provides the state of the device. **Name**: config.statusCharacteristic **Type**: STRING \| Optional `[config]="{statusCharacteristic: '2c257ad2-4b74-11ec-71d3-1242ac130003'}"` |
| *Status Service UUID* | The UUID of the service that provides the device state characteristic. **Name**: config.statusService **Type**: STRING \| Optional `[config]="{statusService: '2fdd12fb-366a-11ec-8e3d-0242ac131003'}"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Bluetooth Configuration'"` |
| *Update Callback* | The name of the JavaScript function to be invoked when the device update is complete. **Name**: config.onUpdate **Type**: STRING \| Optional `[config]="{onUpdate: 'MyUpdateCallback'}"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |
| **Sub Elements** |
| [*Characteristic*](/docs/bluetooth-configuration-widget/#property) | The BLE characteristic to read or write. |

#### Characteristic `&lt;property&gt;`

| *Characteristic UUID* | The UUID of the characteristic to read or write. **Name**: config.uuid **Type**: STRING \| Required `[config]="{uuid: '2c257ad2-4b74-11ec-71d3-1242ac130003'}"` |
| --- | --- |
| *Editable* | The flag indicating whether the value can be changed manually within the widget, in case the characteristic is writable. **Name**: config.editable **Type**: BOOLEAN \| Optional **Default Value**: *false* `[config]="{editable: true}"` |
| *Hidden* | The flag that hides the characteristic when it is not editable. **Name**: config.hidden **Type**: BOOLEAN \| Optional **Default Value**: *false* `[config]="{hidden: true}"` |
| *Id* | The symbolic name of the characteristic. **Name**: id **Type**: STRING \| Optional `id="wifiPassword"` |
| *Input placeholder* | The value input placeholder. **Name**: config.placeholder **Type**: STRING \| Optional `[config]="{placeholder: 'Password'}"` |
| *Input Type* | The type of the input to be used for the editing. **Name**: config.inputType **Type**: ENUM \| Optional **Values**: *TEXT*, *PASSWORD* **Default Value**: *TEXT* `[config]="{inputType: 'TEXT'}"` |
| *Label* | The label displayed for this characteristic. **Name**: label **Type**: STRING \| Optional `label="Temperature"` |
| *Mode* | The way the characteristic is accessed. **Name**: config.mode **Type**: ENUM \| Required **Values**: *READ*, *WRITE*, *READ_WRITE* **Default Value**: *READ* `[config]="{mode: 'READ'}"` |
| *Property* | The property to be used to write the characteristic. **Name**: config.property **Type**: PROPERTY \| Required `[config]="{property: 'serialNumber'}"` |
| *Reader Function* | The name of the JavaScript function that implements the custom read logic for the characteristic. It is generally used when it is necessary to transform the value after the read. **Name**: config.reader **Type**: STRING \| Optional `[config]="{reader: 'myBleReadFn'}"` |
| *Service UUID* | The UUID of the service of this characteristic. **Name**: config.service **Type**: STRING \| Required `[config]="{service: '2fdd12fb-366a-11ec-8e3d-0242ac131003'}"` |
| *Value* | The static value to use as default characteristic value. **Name**: config.value **Type**: STRING \| Optional `[config]="{value: 'Foo Bar'}"` |
| *Writer Function* | The name of the JavaScript function that implements custom writing logic for the characteristic. It is generally used when it is necessary to transform the value before writing or to divide it among multiple calls. **Name**: config.writer **Type**: STRING \| Optional `[config]="{writer: 'myBleUpdateFn'}"` |

## Full Syntax Example

```xml

<bluetooth-configuration-widget    
    [title]="'Bluetooth Configuration'"
    [config]="{
        pin: '12345',
        statusCharacteristic: '2c257ad2-4b74-11ec-71d3-1242ac130003',
        debug: true,
        statusService: '2fdd12fb-366a-11ec-8e3d-0242ac131003',
        onUpdate: 'MyUpdateCallback'
    }"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']">
    <property        
            id="wifiPassword"
            label="Temperature"
            [config]="{
                hidden: true,
                reader: 'myBleReadFn',
                mode: 'READ',
                editable: true,
                writer: 'myBleUpdateFn',
                service: '2fdd12fb-366a-11ec-8e3d-0242ac131003',
                placeholder: 'Password',
                inputType: 'TEXT',
                value: 'Foo Bar',
                uuid: '2c257ad2-4b74-11ec-71d3-1242ac130003',
                property: 'serialNumber'
            }"></property>
</bluetooth-configuration-widget>
```