How-to guideGet a task done

Embed the DAT web component

This page explains how to add the Dynamic Asset Transformation (DAT) component to your application. Once embedded, the component provides the transformation interface, and your application receives the result through a custom event.

Prerequisites

Before you begin, ensure you have:

  • The URL of the asset you want to transform.

  • A bearer token for AI transform authentication.

  • Your client identifier.

Embed the component

  1. Load the web component script in your application:

    <script type="module" src="https://{host}/dat.js"></script>

    This registers the <cmp-dat> custom element.

  2. Add the <cmp-dat> element to your page, providing the four required attributes:

    <cmp-dat
  asset-url="https://cdn.assets.storyteq.com/ca/version/{version-id}/image.jpg"
  title="My Asset"
  ai-transform-token="your-bearer-token"
  client-id="your-client-id"
></cmp-dat>

    The required attributes are asset-url, title, ai-transform-token, and client-id. For the complete list of attributes and their defaults, see DAT web component reference.

  3. Listen for the dat-selected-asset event to receive the transformed asset when the user selects the primary, download, or secondary action:

    const dat = document.querySelector('cmp-dat');

dat.addEventListener('dat-selected-asset', (event) => {
  const { url, source, aiTransforms } = event.detail;
  // Handle the selected asset, for example save or insert it.
});

dat.addEventListener('dat-close', () => {
  // Handle the user closing the component.
});

    The event detail contains the selected url, the source action, and any AI transforms applied. For the full payload and the complete list of events, see DAT web component reference.

Configure optional behaviour

Control which features appear using the optional attributes. For example:

  • Set allow-ai-transforms="false" to hide the AI features.

  • Set allow-adjustments="false" to hide the adjustments tab.

  • Set allow-crop="false" to disable the crop tool.

  • Set primary-cta and secondary-cta to change the action button labels.

  • Set show-download-cta="true" to show the download button.

All optional attributes and their defaults are specified in DAT web component reference.

Test in the playground

Use the playground to preview the component with your own configuration before you integrate it.

  1. Open the playground at https://app.storyteq.com/assets-playground/.

  2. Enter your credentials and configuration settings in the configuration panel.

  3. Review the component as it renders in the preview panel, and interact with it to test your use case.

  4. Copy the generated code snippet into your application.

Related pages