Guides
Products

Web SDK - Operational Modules

Use widgets as an entry point for consumers to view their rewards

Suggest Edits

Widgets

You can include a UI Widget in your own app experience as an entry point for consumers to view their rewards. This encourages engagement with rewards prior to entering the full screen reward experience.

You can customize aspects of the Widget including but not limited to: its display style and the animation for presenting the full rewards experience.

<div style="float: left; width: 40%; border: 1px solid #CCC;"><img src="../../assets/images/unifiedSDK_mobile_vertical_widget.png" width="100%"></div>
<div style="float: right; width: 40%; border: 1px solid #CCC;"><img src="../../assets/images/unifiedSDK_mobile_horizontal_widget.png" width="100%"></div>

<div style="clear:both"></div>

Widget Integration

iOS

To create a CDLXOffersWidgetViewyou'll need to pass the makeWidgetViewmethod a widget configuration, which includes the style type of the widget you would like displayed. Additionally, you'll have to include the presenting UIViewControllerfor the widget to be able to open the Rewards Experience when tapped.

      let configuration = CDLXOffersWidgetConfiguration(style: .basicHorizontalList)
      let widgetView = CDLX.unsafeInstance.makeWidgetView(configuration, presentingViewController: self)
      view.addSubview(widgetView)`

Android

There are two primary ways to include the widget in your app experience. Please make sure when including the OffersWidget that you include a widget style. For more information on how to change widget style, see the section on Customize Display Style.

??? abstract "XML"

          <com.cdlx.poweredby.ui.widget.OffersWidget
                    android:id="@+id/offersWidget"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:widgetStyle="grid" />      ```

??? abstract "Kotlin"

           val offersWidget = OffersWidget(context)
           offersWidget.setConfiguration(
               CDLXOffersWidgetConfiguration().apply {
               style = Style.Grid
               }
           )       ``

Customizing the Display Style

The widget supports three different style configurations to display rewards to a user. It can display rewards in a grid, a vertical list, or a horizontal list. See below for how to specify that configuration.

iOS

Using the style attribute on the CDLXOffersWidgetConfiguration you can use the options: basicGrid , basicVerticalList, or basicHorizontalList to change the display style.

       CDLXOffersWidgetConfiguration(style: .basicHorizontalList)
       CDLXOffersWidgetConfiguration(style: .basicGrid)
       CDLXOffersWidgetConfiguration(style: .basicVerticalList)
   `

Android

??? abstract "XML"

Using the widgetStyle attribute you can set the: grid , vertical, or horizontal to change the display style.

            app:widgetStyle="grid"
            app:widgetStyle="vertical"
            app:widgetStyle="horizontal"
        ```

??? abstract "Kotlin"

After having created an OffersWidget you can programtically change the style of the widget by calling the setConfiguration method and passing in a CDLXOffersWidgetConfiguration and setting the style variable using either: Style.Grid, Style.VerticalList, or Style.HorizontalList

          CDLXOffersWidgetConfiguration().apply {
              style = Style.Grid
          }
          CDLXOffersWidgetConfiguration().apply {
              style = Style.VerticalList
          }
          CDLXOffersWidgetConfiguration().apply {
              style = Style.HorizontalList
          }     ```

Loading a Widget

Once the widget is integrated and ready for display, load the widget to display offers.

iOS

If the widget has successfully loaded offers, calling this a second time without setting forceReload will have no effect. If the widget encountered an error or loaded no offers, calling this a second time will attempt to load offers again.

Calling again with forceReload: true will always initiate a fresh load of the widget. Default value forceReload: false

        CDLX.unsafeInstance.loadWidget(configuration, forceReload: true)    ``

Android

??? abstract "Kotlin"

            PoweredByCDLX.instance?.loadWidget(widgetConfiguration)        ```

Displaying Program Education Alerts

The widget offers support for the option to display a program educational alert without routing the user into the Cardlytics rewards experience. This can give the user more information on the rewards experience prior to entering that flow. This information can by configured real time with any SDK updates.

<div style="margin:0 auto; width: 30%; border: 1px solid #CCC;"><img src="../../assets/images/programEducationAlert.png" width="100%"></div>

iOS

Presents the alert associated with the specified widget.

        let configuration = CDLXOffersWidgetConfiguration(style: .basicVerticalList)
        CDLX.unsafeInstance.presentWidgetAlert(configuration, presentingViewController: self)

Customizing Rewards Experience Display & Dismiss Animation

iOS

The widget supports two different animation styles for presenting the Cardlytics SDK on iOS. First is the horizontalModal in which the Rewards Experience slides in from the right of the screen while the presenting view does not animate. Second is the navigationPush in which the Rewards Experience slides in from the right of the screen, while the presenting view is shifted slightly to the left. This mimics the presentation animation of a typical navigation controller.

To change the animation style, set the preferredNavigationAnimation in the CDLXOffersWidgetConfiguration object you create before instantiating the widget view.

      let configuration = CDLXOffersWidgetConfiguration(style: .basicHorizontalList, preferredNavigationAnimation: .horizontalModal)
      let widgetView = CDLX.unsafeInstance.makeWidgetView(configuration, presentingViewController: self)
      view.addSubview(widgetView)  ```

The default animation for showing the Rewards Experience is navigationPush.

Android

To customize the animation for the entry and exit of the Rewards Experience you can provide your own XML View Animation.

??? abstract "XML"

           <com.cdlx.poweredby.ui.widget.OffersWidget
               android:id="@+id/offersWidget"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               app:widgetStyle="grid"
               app:widgetNavEnterAnimation="@anim/fade_in"
               app:widgetNavExitAnimation="@anim/fade_out" />  ```

??? abstract "Kotlin"

           offersWidget.setConfiguration(
               CDLXOffersWidgetConfiguration().apply {
                   style = Style.Grid
                   enterAnimationId = R.anim.fade_in
                   exitAnimationId = R.anim.fade_out
               }
           )

Updated 4 months ago

What’s Next