Customize click behaviors (React Native)

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 .

FireworkSDK.getInstance().onCustomCTAClick = async (event) => {
  // 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.
}

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 below.

Customize shopping click behaviors

Customize product card click behavior

Set FireworkSDK.getInstance().shopping.onCustomTapProductCard to customize product card click behavior. The event type is .

FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => {
  // 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 shopping CTA click behavior

We support customizing the default shopping CTA button text to "Add to cart" or "Shop now". The usage codes are:

FireworkSDK.getInstance().shopping.productInfoViewConfiguration = {
  ctaButton: {
    text: 'shopNow', // 'addToCart' or 'shopNow'
  },
};

FireworkSDK.getInstance().shopping.onShoppingCTA = async (event) => {
  // 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 {
    res: 'success',
  };
};

Customize product link button click behavior

FireworkSDK.getInstance().shopping.onCustomClickLinkButton = async (event) => {
  // 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 product link button click behavior

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

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

Set FireworkSDK.getInstance().shopping.onCustomClickCartIcon to customize product card click behavior.

FireworkSDK.getInstance().shopping.onCustomClickCartIcon = async (event) => {
  // 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

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 React Native page will not be obscured by the Firework full-screen player.

FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => {
  // Use the following codes to convert the Firework full-screen player (if it exists)
  // into a floating player or close it
  const result = await FireworkSDK.getInstance().navigator.startFloatingPlayer();
  if (!result) {
    await FireworkSDK.getInstance().navigator.popNativeContainer();
  }
  
  // Navigate to host app page within React Native navigation stack
  navigation.navigate('/host_app_page', { url: event.url });
};

PreviousCustomize product card on videos using the custom view (React Native)NextShopping (React Native)

Last updated 2 months ago

Was this helpful?

FireworkSDK.getInstance().onCustomCTAClick = async (event) => { // 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. }

FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => { // 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. };

FireworkSDK.getInstance().shopping.onShoppingCTA = async (event) => { // 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 { res: 'success', }; };

FireworkSDK.getInstance().shopping.onCustomClickLinkButton = async (event) => { // 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. };

FireworkSDK.getInstance().shopping.onCustomClickCartIcon = async (event) => { // 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. };

FireworkSDK.getInstance().shopping.onCustomTapProductCard = async (event) => { // Use the following codes to convert the Firework full-screen player (if it exists) // into a floating player or close it const result = await FireworkSDK.getInstance().navigator.startFloatingPlayer(); if (!result) { await FireworkSDK.getInstance().navigator.popNativeContainer(); } // Navigate to host app page within React Native navigation stack navigation.navigate('/host_app_page', { url: event.url }); };