> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/configuration/cta-options.md).

# CTA Options

`CtaOption` configures the Call-to-Action (CTA) button behavior and appearance in videos. CTA buttons are interactive elements that can trigger shopping actions, external links, or custom behaviors.

## Overview

`CtaOption` allows you to customize:

* CTA button display delay
* CTA button highlighting timing
* Button visual style
* Button sizing mode

## Creating CtaOption

### Using Builder

```kotlin
val ctaOption = CtaOption.Builder()
    .ctaDelay(CtaDelay(3f, CtaDelayUnit.SECONDS))
    .ctaStyle(CtaStyle(shape = Shape.SHAPE_ROUND_RECTANGLE))
    .ctaMode(CtaOption.CtaMode.FULL_WIDTH)
    .build()
```

### Using DSL (Recommended)

```kotlin
val viewOptions = viewOptions {
    ctaOptions {
        ctaDelay(CtaDelay(3f, CtaDelayUnit.SECONDS))
        ctaHighlightDelay(CtaDelay(1f, CtaDelayUnit.SECONDS))
        ctaStyle(
            CtaStyle(
                shape = Shape.SHAPE_ROUND_RECTANGLE,
                backgroundColor = Color.parseColor("#FF6200EE"),
                textColor = Color.WHITE,
                fontSize = 16f
            )
        )
        ctaMode(CtaOption.CtaMode.COMPACT)
    }
}
```

## Properties

### ctaDelay

**Type:** `CtaDelay`\
**Default:** SDK default

Delay before showing the CTA button after video starts playing.

```kotlin
ctaOptions {
    // Delay in seconds
    ctaDelay(CtaDelay(5f, CtaDelayUnit.SECONDS))
    
    // Or delay as percentage of video duration
    ctaDelay(CtaDelay(25f, CtaDelayUnit.PERCENTAGE))
}
```

**CtaDelay Parameters:**

* `value` - Delay amount (Float)
* `unit` - Delay unit (`SECONDS` or `PERCENTAGE`)

**Examples:**

* `CtaDelay(3f, CtaDelayUnit.SECONDS)` - Show after 3 seconds
* `CtaDelay(50f, CtaDelayUnit.PERCENTAGE)` - Show at 50% of video duration

### ctaHighlightDelay

**Type:** `CtaDelay`\
**Default:** SDK default

Delay before highlighting the CTA button to draw user attention.

```kotlin
ctaOptions {
    ctaHighlightDelay(CtaDelay(2f, CtaDelayUnit.SECONDS))
}
```

The highlight effect makes the CTA button more prominent after the specified delay.

### ctaMode

**Type:** `CtaOption.CtaMode` (enum)\
**Default:** `FULL_WIDTH`

Controls the sizing behavior of the CTA button.

**Values:**

* `FULL_WIDTH` - Button spans full width of video
* `COMPACT` - Button uses minimal width
* `SIZE_TO_FIT` - Button sizes to fit content

```kotlin
ctaOptions {
    ctaMode(CtaOption.CtaMode.COMPACT)
}
```

### ctaStyle

**Type:** `CtaStyle`\
**Default:** SDK default styling

Customizes the visual appearance of the CTA button.

```kotlin
ctaOptions {
    ctaStyle(
        CtaStyle(
            shape = Shape.ROUNDED,
            backgroundColor = Color.parseColor("#FF6200EE"),
            textColor = Color.WHITE,
            fontSize = 16f
        )
    )
}
```

**CtaStyle Properties:**

* `shape` - Button shape (`Shape.ROUNDED` or `Shape.RECTANGLE`)
* `backgroundColor` - Background color (Int)
* `textColor` - Text color (Int)
* `fontSize` - Text size in sp (Float)

## Default Values

| Property       | Default Value |
| -------------- | ------------- |
| `ctaDelayUnit` | `SECONDS`     |
| `ctaMode`      | `FULL_WIDTH`  |

## CTA Button Shapes

The `Shape` enum defines button corner styles:

### Rounded Shape

```kotlin
ctaStyle(
    CtaStyle(
        shape = Shape.SHAPE_ROUND_RECTANGLE // Rounded corners
    )
)
```

### Rectangle Shape

```kotlin
ctaStyle(
    CtaStyle(
        shape = Shape.SHAPE_OVAL // Sharp corners
    )
)
```

## CTA Sizing Modes

### FULL\_WIDTH

Button spans the full width of the video player:

```kotlin
ctaOptions {
    ctaMode(CtaOption.CtaMode.FULL_WIDTH)
}
```

### COMPACT

Button uses minimal width:

```kotlin
ctaOptions {
    ctaMode(CtaOption.CtaMode.COMPACT)
}
```

### SIZE\_TO\_FIT

Button sizes dynamically based on content:

```kotlin
ctaOptions {
    ctaMode(CtaOption.CtaMode.SIZE_TO_FIT)
}
```

## CTA Click Handling

See [Short Video CTA Customization](/firework-for-developers/android-sdk/integration-guide/cta.md#cta-handling) for more details on CTA click handling.

## Important Notes

* CTA buttons only appear on videos that have CTA configuration
* Delay timing starts when video begins playing
* Percentage-based delays are relative to total video duration
* `ctaHighlightDelay` should be less than `ctaDelay` for logical UX
* Font size in `CtaStyle` is in sp units (scale-independent pixels)
* CTA styling is applied globally to all CTA buttons in the feed
* Use `sdkHandleCtaButtonClick` in `PlayerOption` to control click behavior
* CTA buttons are common in shopping videos and product demonstrations

## See Also

* [ViewOptions Overview](/firework-for-developers/android-sdk/integration-guide/configuration.md) - Complete configuration system
* [PlayerOption](/firework-for-developers/android-sdk/integration-guide/configuration/player-options.md) - CTA click handling
* [Shopping Configuration](/firework-for-developers/android-sdk/integration-guide/shoppable-videos.md) - Shopping integration
* [Shopping Integration](/firework-for-developers/android-sdk/integration-guide/shoppable-videos.md) - CTA button callbacks


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.firework.com/firework-for-developers/android-sdk/integration-guide/configuration/cta-options.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.