# Widget Configuration

## Configuration options

Customize your widget to match your brand and app design using the widget properties. Adjust the title, description, colors, positioning, and trigger settings according to your preferences.

The properties are expressed in JSON format and contained in a script tag with the `id="released-widget-props"`.

```
<script type="application/json" id="released-widget-props">
```

## **Widget Properties**

The following customisation options are available for the widget.

PropertyDescriptionidThe ID of the release notes project.positionThe position of the widget. Can be top-left, top-right, bottom-right, or bottom-left.titleThe title of the widget.subTitleThe subtitle of the widget.triggerA string specifying a css selector that determines which element on the page will open the dialog when clicked. For example #changelog-button. If not specified, a default trigger button will be rendered. badgeWhether to display a badge with the unread count. Can be true or false.colorSchemeThe color scheme to use for the widget. Can be system, dark, or light.zIndexThe z-index to use for the widget.themeA custom theme to use for the widget. See below for theme properties.attributesAllows for passing data-\* attributes to the host container for the widget. For more details see the Attributes section below.&#x20;

### **Theme**

PropertyDescriptioncolorsAn object that defines the primary and secondary colors for the widget.      primaryThe primary UI color. Can be hex, hsl, rgb, or css color name.      secondaryThe secondary UI color. Can be hex, hsl, rgb, or css color name.

### Attributes

Setting data attributes can be helpful to prevent unwanted interactions with 3rd party libraries. For example, to prevent scrolling issues when the [Lenis](https://lenis.studiofreight.com/) library is used, you can add the `data-lenis-prevent` attribute to the host container.

**Example:**

```json
{
  "id": "",
  "attributes": {
    "data-lenis-prevent": "",
  }
}
```

**Results in:**

```html
<div id="__released-widget-host" data-lenis-prevent="" ...></div>
```

### Default values

The following default values are applied in case a property is not explicitly defined.

```json
{
  "id": "",
  "position": "bottom-right",
  "title": "What's New",
  "subTitle": "The latest updates and improvements.",
  "trigger": "#trigger",
  "badge": true,
  "colorScheme": "system",
  "theme": {
    "colors": {
      "primary": "#7c3aed",
      "secondary": "#e879f9"
    }
  },
  "zIndex": 10000
}
```

## Installation

To add the widget to your website or app, copy the following code snippet into the `<head>` element. Replace the `[PROJECT_ID]` placeholder with the ID found in your widget configuration.

> **Note**
>
> You can find a complete version of the snippet in the app, with all details pre-filled.

```
<script type="application/json" id="released-widget-props">
  {
    "id": "[PROJECT_ID]",
    "title": "Changelog",
    "subTitle": "New updates and improvements.",
  }
</script>
<script src="https://embed.released.so/1/widget.js"></script>
```

The above code snippet contains two `script` tags. The first tag contains the configuration properties for the widget, and the second tag loads the widget.

The available configuration options are described in the following section.
