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

# Custom components with content library

You can easily integrate data from **Experro's Content Library** into your custom component.

To integrate data from the Content Library into your custom component, the first step is to add the below code to the `configObj` in your widget file.

```js theme={null}
const configObj = {
  modelInternalName: 'your_component_model_internal_name',
  traitConfig: [
    {
      type: 'exp_contentModalPopUp',
      modelInternalName: 'your_component_model_internal_name',
    },
  ]
}
```

You can find the Model internal name of your component in the Experro admin panel when you create a component.

Afterwards, you will see a popup on the sidebar where you can select the record for that particular component.

When you select a record, you will get the value of that record in the props of your component as **contentModel**. The value will be an object, and you can access it by the following method:

```js theme={null}
{
  PRODUCTION6e3bab01edcd4771ad05203ed79042d69xdt10du_published_version_id:  "baaf3cdb-f462-40d8-93f6-41e720b7f8e9-8"
  content_model_id: "a2285cb8-fa8b-4fcb-83f8-c72c164040bd"
  content_model_name: "Zigzag Layout"
  current_version_id: "baaf3cdb-f462-40d8-93f6-41e720b7f8e9-8"
  current_version_name: "#8"
  id: "baaf3cdb-f462-40d8-93f6-41e720b7f8e9"
  published_version_name: "#8"
  title: "Lorem ipsum"
}
```

Once you have received this object, you need to import the **ContentService** from the experro-Storefront npm package.

The ContentService provides a function called **getCollectionTypeContentById**, which should be used to retrieve data from Experro's content library.

Here's an example of how you can use the **getCollectionTypeContentById** function from the ContentService:

```js theme={null}
 await  ContentService.getCollectionTypeContentById({
  id: 'id',
  versionId: 'current_version_id',
  modelName: 'model_internal_name',
  componentId: 'random_keu',
  ssrKey: `random_id_for_ssr`,
  enableSSR: true,
});
```

The **id** and **versionId** are obtained from the **contentModel** object, while the **modelName** represents the **model internal name** for the component.

<Info>
  *Note:* The **componentId** and **ssrKey** are random keys that should be unique.
</Info>

To explore more, you can also use [ExpComponentDataDispatcher](../other/theme-utilities) to integrate the Experro's content library data easily.

Or if you want to discover how to use [Droppable Widgets](./droppable-widgets), you can click the link.