# Customize click behaviors (Flutter)

The SDK provides behavior callbacks to customize click behaviors, including those for the video CTA button, product cards, and shopping CTA button.

### Customize video overlay CTA button click behavior

Set `FireworkSDK.getInstance().onCustomCTAClick` to customize video overlay CTA button click behavior. The event type is [CustomCTAClickEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomCTAClickEvent-class.html).

<pre class="language-dart"><code class="lang-dart"><strong>FireworkSDK.getInstance().onCustomCTAClick =
</strong>    (CustomCTAClickEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
</code></pre>

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

### Customize shopping click behaviors

#### Customize product card click behavior

Set `FireworkSDK.getInstance().shopping.onCustomTapProductCard` to customize product card click behavior. The event type is [CustomTapProductCardEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomTapProductCardEvent-class.html).

```dart
FireworkSDK.getInstance().shopping.onCustomTapProductCard = 
    (CustomTapProductCardEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
}
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

#### Customize shopping CTA click behavior

Set `FireworkSDK.getInstance().shopping.onShoppingCTA` to customize shopping CTA click behavior. The event type is [ShoppingCTAEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/ShoppingCTAEvent-class.html). And host app can return a [ShoppingCTAResult](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/ShoppingCTAResult-class.html) object to tell FireworkSDK the result.

```dart
FireworkSDK.getInstance().shopping.onShoppingCTA =
    (ShoppingCTAEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.

  return ShoppingCTAResult(
    res: ShoppingCTARes.success,
  );
};
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

#### Customize product link button click behavior

Set `FireworkSDK.getInstance().shopping.onCustomClickLinkButton` to customize product link button click behavior. The event type is [CustomClickLinkButtonEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomClickLinkButtonEvent-class.html).

```dart
FireworkSDK.getInstance().shopping.onCustomClickLinkButton = 
    (CustomTapProductCardEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
}
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

#### Customize cart icon click behavior

The cart icon is hidden by default. You could show the cart icon with the following codes:

```dart
FireworkSDK.getInstance().shopping.cartIconVisible = true;
```

Set `FireworkSDK.getInstance().shopping.onCustomClickCartIcon` to customize cart icon click behavior. The event type is [CustomClickCartIconEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomClickCartIconEvent-class.html).

```dart
FireworkSDK.getInstance().shopping.onCustomClickCartIcon =
                    (event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

### Customize livestream link interaction click behavior

Set `FireworkSDK.getInstance().liveStream.onCustomLinkInteractionClick` to customize livestream link interaction click behavior. The event type is [CustomLinkInteractionClickEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomLinkInteractionClickEvent-class.html).

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

```dart
FireworkSDK.getInstance().liveStream.onCustomLinkInteractionClick =
    (CustomLinkInteractionClickEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

### Customize livestream giveaway terms and conditions link click behavior

Set `FireworkSDK.getInstance().liveStream.onCustomGiveawayTermsAndConditionsClick` to customize livestream giveaway terms and conditions click behavior. The event type is [CustomGiveawayTermsAndConditionsClickEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomGiveawayTermsAndConditionsClickEvent-class.html).

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

```dart
FireworkSDK.getInstance()
        .liveStream
        .onCustomGiveawayTermsAndConditionsClick =
    (CustomGiveawayTermsAndConditionsClickEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

### Customize livestream question terms and conditions link click behavior

Set `FireworkSDK.getInstance().liveStream.onCustomQuestionTermsAndConditionsClick` to customize livestream question terms and conditions click behavior. The event type is [CustomQuestionTermsAndConditionsClickEvent](https://eng.firework.com/fw_flutter_sdk/v2/fw_flutter_sdk/CustomQuestionTermsAndConditionsClickEvent-class.html).

{% hint style="info" %}
You could write codes to navigate to the host app page within the callback. For best practices on navigating to the host page, please consult [Navigate to the host app page](#navigate-to-the-host-app-page) below.
{% endhint %}

```dart
FireworkSDK.getInstance()
        .liveStream
        .onCustomQuestionTermsAndConditionsClick =
    (CustomQuestionTermsAndConditionsClickEvent? event) async {
  // Here, you could write codes to navigate to the host app page.
  // For best practices on navigating to the host page,
  // please consult "Navigate to the host app page" below.
};
```

### Navigate to the host app page

Typically, we need to navigate to the host app page when customizing click behaviors. However, the Flutter navigation stack may be obscured by the Firework full-screen player. When the host app navigates to a new Flutter page (for instance, using `Navigator.of(context).pushNamed`) within the Flutter navigation stack when customizing click behaviors, it will be obscured by the Firework full-screen player.

**As illustrated in the following code snippets, you can invoke our APIs to convert the Firework full-screen player (if it exists) into a floating player or close it (if it exists) when customizing click behaviors.** This approach ensures that the new Flutter page will not be obscured by the Firework full-screen player.

```dart
FireworkSDK.getInstance().shopping.onCustomTapProductCard = 
    (CustomTapProductCardEvent? event) async {
  // Use the following codes to convert the Firework full-screen player (if it exists)
  // into a floating player or close it (if it exists)
  final result =
      await FireworkSDK.getInstance().navigator.startFloatingPlayer();
  if (!result) {
    await FireworkSDK.getInstance().navigator.popNativeContainer();
  }

  // If the context is available, you could also call
  // Navigator.of(context).pushNamed to push the host app page.
  globalNavigatorKey.currentState?.pushNamed('/host_app_page');
}
```

{% hint style="info" %}
The above code snippets are based on `onCustomTapProductCard`. But they are also applicable to other behavior callbacks.
{% endhint %}