# Component Attributes

You can convert any Lightning Web Component into a CRM Analytics Lightning Web Component by adding specific attributes.

The Lightning Web Component framework requires a special tag to know your component is compatible for use in CRM Analytics dashboards. Let’s start by adding this XML to your `js-meta.xml` file:

```nolang
<targets>
    <target>analytics__Dashboard</target>
</targets>

```

The `target` attribute informs the designer UI that this widget is compatible with CRM Analytics and Lightning dashboards, and allows the component to show up in the component selector. This stage in the process is also a good time to make sure your component widget is visible. To enable visibility, check out this line in the js-meta.xml:

```nolang
<isExposed>true</isExposed>
```

Now any dashboard author can add your widget after it’s published to an org, but you also want to expose configuration options. To do that, create an attribute:

```nolang
<targetConfigs>
    <targetConfig targets="analytics__Dashboard">
        <hasStep>false</hasStep>
        <property name="title" type="String" label="Title" description="Title of the component" required="true" />
    </targetConfig>
</targetConfigs>

```

Here, you set `hasStep` to `false` because you aren’t using any query data. You’re adding a single attribute title, which is type `String`, so that the dashboard author can type any free text to configure. Set `required="true"` so that authors can’t make blank components. When you’re done, the whole file looks something like:

:::note
In Lightning dashboards, the \<hasStep> tag is always set to false since the custom Lightning web components don't query any data.
:::

```nolang
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>53.0</apiVersion>
    <isExposed>true</isExposed>

    <masterLabel>Hello LWC</masterLabel>
    <description>Test project for LWC.</description>

    <targets>
        <target>analytics__Dashboard</target>
    </targets>

    <targetConfigs>
        <targetConfig targets="analytics__Dashboard">
            <hasStep>false</hasStep>
            <property name="title" type="String" label="Title" description="Title of the component" required="true" />
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

```

:::note
Your API version can be different so that it matches the version of the Salesforce org that you’re developing your Lightning Web Component for.
:::

To wire up the component, start by adding these attributes with `@api` annotations in your `.js` file. After you add them, the `.js` file looks like:

```javascript
import { LightningElement, api } from "lwc";

export default class HelloWorld extends LightningElement {
  @api title;
}
```

You don’t use any custom logic in this example, so no additional code is needed. You do need your component to say hello, so edit the HTML template in the `.html` file.

```html
<template>
  Hello World: {title}
</template>
```

**See Also**

- [CRM Analytics Configuration](/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-config.md)
- [Lightning Dashboards Configuration](/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-lightning-dashboard-config.md)
- [Query Data](/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-query-data.md)
- [Other Widgets](/docs/analytics/bi-dev-guide-lwc-in-db/guide/bi-lwc-in-db-hw-example-other.md)