# Using External Components

Codelessly offers a wide range of components that can be the building blocks for most of your layouts. However, there can be times when you want to use a very specific widget that is not yet available in Codelessly or you want to use a widget from a third-party package into your codelessly layout.

To fulfill this use-case, we have a component called `External Component` in the components library.

<div data-full-width="true"><figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FOx1CYkHJGkRLEsO2iAXu%2Fimage.png?alt=media&#x26;token=95440464-3aaa-4bf7-bafc-be74cc9f8781" alt=""><figcaption><p>External Component</p></figcaption></figure></div>

As the name implies, this component behaves like an iFrame and allows you to hook your own widget into it programmatically. You can pass this widget from `CodelesslyWidget` using our Cloud UI SDK.

Any custom widget can be rendered inside this external component as long as it can respect its constraints.

### Usage

1. Like other components, you can drag and drop this component in any of your layouts.
2. Open the settings panel for this component by clicking on the floating Settings button <img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2Fs5kL2ttDIHckTLpxFhiq%2Fimage.png?alt=media&#x26;token=d28d05c6-67ec-4f88-96a2-20d7075cd6dc" alt="" data-size="line"> next to it.
3. Provide a unique identifier for this component. This `id` will used to identify the component from `CodelesslyWidget` in the SDK to map it to a widget builder.

<div data-full-width="true"><figure><img src="https://3474078512-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx4NeiXalJWaOaV6tsK5f%2Fuploads%2FgzrPVFh5OohQV6JfETZQ%2Fimage.png?alt=media&#x26;token=f8620ad3-6fa1-4a1f-b475-f50aba83e74f" alt="" width="563"><figcaption><p>External Component configuration</p></figcaption></figure></div>

4. From the SDK side, where you are using `CodelesslyWidget`, pass your widget using the `externalComponentBuilders` constructor parameter.

```dart
return CodelesslyWidget(
  config: CodelesslyConfig(authToken: '<auth_token>'),
  layoutID: '<layout_id>',
  externalComponentBuilders: {
    'my_custom_widget': (context) {
      return const Placeholder();
    },
  },
)
```

> Note that the `key` needs to match exactly to the unique external ID provided in the Editor.

You can have as many external components as you want. You can pass any widget including `StatefulWidget` and manage its state yourself. You can provide all of them in `CodelesslyWidget` by using their unique ids.

```dart
return CodelesslyWidget(
  config: CodelesslyConfig(authToken: '<auth_token>'),
  layoutID: '<layout_id>',
  externalComponentBuilders: {
    'widget1': (context) {
      return const Placeholder();
    },
    'widget2': (context) {
      return const Placeholder();
    },
  },
)
```