Flyy Widget

Introduction

The Flyy Widget provides a ready-to-use entry point leading to the Flyy SDK's Primary Screens. Namely, the Offers Screen, Rewards Screen, and Wallet Screen. This widget allows various customizations to match your project's theme and style.

Usage

To add the Flyy Widget, add the following element to your layout:

<>
  <FlyyWidget/>
</>
378

We recommend placing the Flyy Widget on your app's home screen for greater visibility and thus better engagement.

Customization

The widget can be customized to match the style and theme of your application. Refer to the table below to learn about all the properties that can be changed.

<FlyyWidget
  widgetStyle={{
    containerBackgroundColor: "#BCECE0",
  }}
/>
378

Customized Flyy Widget

FlyyWidget Properties

DescriptionPropertyExample Value
Container's background colorcontainerBackgroundColor'#bcece0'
'white'
Button's background colorbuttonBackgroundColor'#bcece0'
'white'
Button corner radiusbuttonCornerRadius15.0
Border width for the buttonsbuttonBorderWidth1.0
Border color for the buttonsbuttonBorderColor'#bcece0'
'white'
Icon background colorbuttonIconBackgroundColor'#bcece0'
'white'
Corner radius for the container around the iconiconCornerRadius20.0
Font family of the button titles.buttonTitleFontFamily'Montserrat-Bold'
Text color of the button titlesbuttonTitleTextColor'#bcece0'
'white'
Font size of the button titlesbuttonTitleTextSize14.0
Title of the Offers buttonofferButtonTitle'Deal'
Title of the Rewards buttonrewardButtonTitle'Gift'
Title of the Wallet buttonwalletButtonTitle'Coins'
Path to asset image for Offers button iconoffersButtonIcon'/assets/images/offerwidget.png'
Path to asset image for Rewards button icon drawablerewardsButtonIcon'/assets/images/rewardwidget.png'
Path to asset image for Wallet button icon drawablewalletButtonIcon'/assets/images/walletwidget.png'