Skip to main content

CTA DTOs

The CTA (Call to Action) DTOs (Data Transfer Objects) are used to define the structure and behavior of various CTAs within the application. These CTAs are used to prompt users to take specific actions such as playing content, ordering content, logging in, or adding content to their favorites.

You can review the general Elevate Documentation in Confluence

Types of CTAs​

There are four main types of CTAs:

  1. OrderCTA: Used for ordering content.
  2. PlaybackCTA: Used for playing content.
  3. LoginCTA: Used for prompting users to log in.
  4. FavouriteCTA: Used for adding content to favorites.

OrderCTA​

The OrderCTA is used to handle actions related to ordering content. It includes the following properties:

  • contentId: The ID of the content.
  • cta: The call to action text.
  • action: The action type, which is "ORDER".
  • orderId: The ID of the order.
  • orderType: The type of the order.
  • detail: Additional details about the order.

PlaybackCTA​

The PlaybackCTA is used to handle actions related to playing content. It includes the following properties:

  • contentId: The ID of the content.
  • cta: The call to action text.
  • action: The action type, which is "PLAY".
  • startTime: The start time for playback (optional).
  • isTrailer: Indicates if the content is a trailer (optional).

LoginCTA​

The LoginCTA is used to prompt users to log in. It includes the following properties:

  • contentId: The ID of the content.
  • cta: The call to action text.
  • action: The action type, which is "LOGIN".

FavouriteCTA​

The FavouriteCTA is used to handle actions related to adding content to favorites. It includes the following properties:

  • contentId: The ID of the content.
  • cta: The call to action text.
  • action: The action type, which is "FAVOURITE".
  • icon: An optional icon to be displayed with the CTA.

Architecture and usage​

Elevate Web includes all the logic of the Detail CTA inside the DTO file ctadto.ts located in src/dto

This file handles the entire set of possibilities based on:

  • User state using accountId, profileId and segmentationValue
  • Content using contentId and contentType

Inside the Detail view (or a subcomponent) Elevate makes use of the exported getDetailCTAs in order to get the Array of CTAs and create the Button using the CTAButtons and CTAButton Component create for this purpose which will automatically handle if a "more buttons" icon needs to be presented to the user.