ReferenceFind the facts

DAT web component reference

This page specifies the attributes, events, and event payloads of the <cmp-dat> web component.

Attributes

Attributes are passed to the <cmp-dat> element in kebab-case. Boolean attributes are supplied as strings ("true" or "false").

Attribute Type Default Required Description

asset-url

string

—

Yes

URL of the asset to transform.

title

string

—

Yes

Display title shown in the header.

ai-transform-token

string

—

Yes

Bearer token used to authenticate AI transform requests.

client-id

string

—

Yes

Client identifier sent as the x-client-id header.

api-url

string

https://gateway.api.europe-west1.storyteq.work/graphql

No

GraphQL API endpoint.

primary-cta

string

"Save Changes"

No

Label of the primary action button.

secondary-cta

string

—

No

Label of the secondary action button.

allow-ai-transforms

boolean

true

No

Enables the AI features: remove background, generative expand, and generative fill.

allow-adjustments

boolean

true

No

Shows the adjustments tab.

allow-crop

boolean

true

No

Enables the crop tool.

show-copy-link-cta

boolean

true

No

Shows the copy link button.

show-download-cta

boolean

false

No

Shows the download button.

allow-event-tracking

boolean

false

No

Enables Mixpanel event tracking.

Custom events

All events bubble and are composed, so they cross the Shadow DOM boundary. Event data is available on event.detail.

Event Fires when Payload

dat-close

The user selects the close button.

{}

dat-selected-asset

The user selects the primary, download, or secondary action.

See dat-selected-asset payload.

dat-get-transformation-state

An external system requests the current state.

{}

dat-transformation-state-response

The component responds to dat-get-transformation-state.

{ transformation }

dat-transformation-state-change

Any transformation value changes.

{ transformation }

dat-secondary-cta-click

The user selects the secondary action.

{ url }

dat-selected-asset payload

The dat-selected-asset event carries the following fields on event.detail.

name

Text. Required. Display name of the selected asset.

url

Text. Required. URL of the selected asset, including any applied transformations.

filename

Text. Optional. Filename of the selected asset.

source

Enum. Required. The action that produced the event: primary, download, or secondary.

assets

Array. Optional. One entry per generated asset (for example, each variant of a multi-output transformation). See the asset entry fields below.

aiTransforms

Array. Optional. Records of the AI operations applied to the asset.

transforms

Object. Optional. The decoded standard transformations applied to the asset.

Each entry in the assets array contains the following fields.

url

Text. URL of the generated asset.

filename

Text. Filename of the generated asset.

width

Number. Width of the generated asset in pixels.

height

Number. Height of the generated asset in pixels.

label

Text. Label identifying the variant.

ratio

Text. Aspect ratio of the generated asset.

Standalone mode

The component also runs standalone for development and testing on port 4201. In this mode, attributes are supplied as URL query parameters in camelCase.

http://localhost:4201/?assetUrl=https://...&allowAiTransforms=true

Related pages