# External Profile Data

Your system may associate an Umbraco Engage visitor with other data coming from an external system such as a Customer Relation Management (CRM) system.

It is possible to visualize this external data alongside the Umbraco Engage profile by providing a custom Web Component.

## Visualization

When this component is registered a new tab will be rendered in the Engage Profile workspace. This will render the custom component that was provided and get passed the Umbraco Engage visitor ID.

![External profile data tab.](https://1498851568-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeiQnEGdbGIoA0IQ3nJUK%2Fuploads%2Fgit-blob-f6390a1f002d80fe420836408d496abf587a1bba%2FExternal-profile-data-tab-v16.png?alt=media)

### Register custom components

{% hint style="info" %}
Check the [Creating your first extension](https://github.com/umbraco/UmbracoDocs/blob/main/umbraco-cms/tutorials/creating-your-first-extension/README.md) and [Vite Package Setup](https://github.com/umbraco/UmbracoDocs/blob/main/umbraco-cms/customizing/development-flow/vite-package-setup/README.md) articles for detailed extension-building tutorials.
{% endhint %}

To render this External Data Demo tab with a custom component, create your component and register it with Umbraco Engage. The links above demonstrate different approaches to building Umbraco extensions. This demo uses vanilla JavaScript, but you might choose to use Lit or similar.

The following code demonstrates both steps.

1. Add the below code in a JavaScript file:

```javascript
import { html } from "@umbraco-cms/backoffice/external/lit";
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UMB_ENTITY_WORKSPACE_CONTEXT } from "@umbraco-cms/backoffice/workspace";

export class EngageExternalProfileDataElement extends UmbLitElement {
    #profileId = '';

    constructor() {
        super();
        this.consumeContext(UMB_ENTITY_WORKSPACE_CONTEXT, context => {
            this.observe(context?.unique, unique => {
                this.#profileId = unique;
            });
        });
    }
    render() {
        return html`
            <p>This is a custom profile view</p>           
            <p>Current profile id: ${this.#profileId}</p>
        `;
    }
}

export { EngageExternalProfileDataElement as element }

customElements.define("external-profile-data-demo", EngageExternalProfileDataElement);
```

2. Load your component via an `umbraco-package.json` file. The extension type must be `engageExternalDataComponent`.

```json
{
  "$schema": "../../umbraco-package-schema.json",
  "name": "Engage External Profile Data Demo",
  "allowPublicAccess": true,
  "extensions": [
    {
      "type": "engageExternalDataComponent",
      "alias": "EngageDemo.ExternalProfileData",
      "name": "External Profile Data Demo",
      "weight": 100,
      "js": "/App_Plugins/path/to/my-element.js"
    },
  ]
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.umbraco.com/umbraco-engage/developers/profiling/external-profile-data.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.