> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Configure Custom Element Behavior

## Article: Configure Custom Element Behavior

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/custom-elements/configure-custom-element-behavior.md

## Article Content:

# Configure Custom Element Behavior

<blockquote class="warning">

**Deprecation notice:**

`installation.autoAdd` is deprecated. If your code still uses this property, update it to `installation.staticContainer`.

Learn more about [custom element installation in the CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/custom-elements/about-custom-element-installation-with-the-cli.md).

</blockquote>

When you create a custom element with the Wix CLI, you can control how site builders interact with it in the editor. These settings are defined in your widget's `element.extension.ts` file and determine things like default dimensions and whether the widget is added automatically on install.

## Available behavior settings

You can configure the following settings in your widget's `element.extension.ts` file. Available settings include the widget's dimensions, installation behavior, and dashboard page association.

### Dimensions

Control the widget's initial size and whether site builders can stretch it to full width:

```ts
export default extensions.customElement({
  // ...
  width: {
    defaultWidth: 450,
    allowStretch: true,
    stretchByDefault: false,
  },
  height: {
    defaultHeight: 250,
  },
});
```

| Setting | Description |
|---|---|
| `width.defaultWidth` | The widget's width in pixels when first installed on a site. |
| `width.allowStretch` | Whether to allow site builders to toggle the widget between full-width and default width. |
| `width.stretchByDefault` | Whether to stretch the widget to full width on installation. |
| `height.defaultHeight` | The widget's height in pixels when first installed on a site. |

### Installation behavior

Control how the widget is added to a site when your app is installed:

```ts
export default extensions.customElement({
  // ...
  installation: {
    staticContainer: "HOMEPAGE",
  },
});
```

| Setting | Description |
|---|---|
| `installation.staticContainer` | Determines where the widget is automatically added when your app is installed. Set to `"HOMEPAGE"` to automatically add the widget to the site home page upon installation. If you omit the field, the widget isn't added upon install. |

For more details and best practices, see [About Custom Element Installation with the CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/custom-elements/about-custom-element-installation-with-the-cli.md).

### Dashboard page association

Associate a widget with one of your app's dashboard pages. When configured, a **Manage** button appears in the widget's action bar in the editor, allowing site builders to navigate directly to the linked dashboard page.

```ts
export default extensions.customElement({
  // ...
  behaviors: {
    dashboard: {
      dashboardPageComponentId: '154f642e-a705-4ff3-8421-6119354a3384',
    },
  },
});
```

Set `dashboardPageComponentId` to the `id` of the dashboard page extension you want to associate with the widget.

## See also

- [Custom Element Extension Files and Code](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/custom-elements/custom-element-extension-files-and-code.md)
- [About Custom Element Installation with the CLI](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-cli/supported-extensions/site/custom-elements/about-custom-element-installation-with-the-cli.md)