> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encorekit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Claim Reminder

> A trigger component that reminds users of the newest premium brand offer they claimed but haven't finished, and opens the reward sheet that lists it.

<Info>
  **Requires SDK 2.4.0+** on every platform. See [Minimum SDK versions](/publishers/triggers/overview#minimum-sdk-versions).
</Info>

Claim Reminder is a [trigger component](/publishers/triggers/overview): a small card you place inside your own screen. It shows the user the newest premium brand offer (a real perk a brand funds to acquire customers) that they claimed but haven't finished yet, with that brand's name and logo. Tapping it opens the reward sheet, where that offer is listed, so the user can get back to it.

Many users claim an offer, leave your app to sign up with the brand, and never come back to finish. The reminder brings them back to the sheet, inside a screen they already visit.

Its trigger ID is `claimReminder`. Everything on [Trigger components](/publishers/triggers/overview) applies to it: how it sizes itself, when it renders nothing, and its color order. This page covers only what is specific to Claim Reminder.

<Note>
  Claim Reminder shows the claims the user made in your app on this device. A claim made elsewhere, such as on another device, doesn't show.
</Note>

## When to use it

Use Claim Reminder on a screen users return to on their own, such as your home screen, feed, or profile. It fits where a card can sit in the normal flow of the layout.

You don't need it where a Gifts Button sits: Gifts Button turns into the reminder after a claim by itself (see [After a claim](/publishers/triggers/gifts-button#after-a-claim)).

Its use case defaults to the reward use case, so leave `useCase` out. Churn isn't supported yet: with the churn use case, Claim Reminder renders nothing.

## What the user sees

The card names one brand and shows a countdown. Encore picks the claim to show:

* **One claim, the newest the sheet lists.** Among the user's open claims whose offer the reward sheet lists, the card shows the one claimed most recently.
* **Only claims the user can still finish.** A claim the brand already confirmed as completed, or one the user already reported finishing, is never shown.
* **Only inside the reminder window.** The reminder shows for a set number of hours after the claim (24 by default, set by Encore). After that, the card hides. The device remembers the window it was last served at each placement, across launches; until one is served there, it uses 24 hours.
* **Only when the sheet has offers.** The card shows only when the reward sheet for its use case and placement has offers to list.

**The countdown is a reminder window, not an offer deadline.** It counts down to the moment the card hides. When it reaches zero, nothing happens to the claim: it stays open, and the user can still finish the offer.

**A tap opens the reward sheet** for Claim Reminder's use case and placement, as if your app had called `show()` there. The claimed offer is in the sheet, though not always first. Picking it again there continues the same claim rather than starting a second one. If the card is dismissible, the user can also close it. A dismissed reminder stays hidden for that claim on that device for good. The claim itself is untouched.

Claim Reminder checks the user's claims again each time your app returns to the foreground, and when the sheet it opened closes. When the brand confirms the user finished, the card hides, or shows a thanks look in its place (see [After a completion](#after-a-completion)).

## Place it in your layout

Use the `ClaimReminder` shorthand for your platform. Give it a placement ID and, optionally, your `appearance`, which colors the entry and never the sheet it opens. Encore picks the look:

<CodeGroup>
  ```swift iOS (SwiftUI) theme={null}
  import Encore
  import SwiftUI

  struct HomeView: View {
      var body: some View {
          ScrollView {
              VStack(spacing: 16) {
                  ClaimReminder(
                      placement: "home",
                      appearance: AppearanceConfig(accentColor: "#5671FF")
                  )
                  // The rest of your home screen.
              }
              .padding()
          }
      }
  }
  ```

  ```swift iOS (UIKit) theme={null}
  import Encore
  import UIKit

  final class HomeViewController: UIViewController {
      private let stack = UIStackView()

      override func viewDidLoad() {
          super.viewDidLoad()
          stack.axis = .vertical
          stack.spacing = 16
          stack.translatesAutoresizingMaskIntoConstraints = false
          view.addSubview(stack)
          NSLayoutConstraint.activate([
              stack.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
              stack.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
              stack.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
          ])

          let reminder = ClaimReminderView(
              placement: "home",
              appearance: AppearanceConfig(accentColor: "#5671FF")
          )
          stack.addArrangedSubview(reminder)
          // Add the rest of your home screen to the stack.
      }
  }
  ```

  ```kotlin Android (Compose) theme={null}
  import androidx.compose.foundation.layout.Arrangement
  import androidx.compose.foundation.layout.Column
  import androidx.compose.runtime.Composable
  import androidx.compose.ui.unit.dp
  import com.encorekit.encore.AppearanceConfig
  import com.encorekit.encore.ClaimReminder

  @Composable
  fun HomeScreen() {
      Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
          ClaimReminder(
              placement = "home",
              appearance = AppearanceConfig(accentColor = "#5671FF"),
          )
          // The rest of your home screen.
      }
  }
  ```

  ```kotlin Android (View) theme={null}
  import android.os.Bundle
  import android.widget.LinearLayout
  import androidx.appcompat.app.AppCompatActivity
  import com.encorekit.encore.AppearanceConfig
  import com.encorekit.encore.ClaimReminderView

  class HomeActivity : AppCompatActivity() {
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          val column = LinearLayout(this).apply { orientation = LinearLayout.VERTICAL }
          setContentView(column)

          val reminder = ClaimReminderView(
              context = this,
              placement = "home",
              appearance = AppearanceConfig(accentColor = "#5671FF"),
          )
          column.addView(reminder)
          // Add the rest of your home screen to the column.
      }
  }
  ```

  ```tsx React Native theme={null}
  import { ScrollView } from 'react-native';
  import { EncoreClaimReminder } from '@encorekit/react-native';

  export function HomeScreen() {
    return (
      <ScrollView>
        <EncoreClaimReminder
          placement="home"
          appearance={{ accentColor: '#5671FF' }}
        />
        {/* The rest of your home screen. */}
      </ScrollView>
    );
  }
  ```

  ```dart Flutter theme={null}
  import 'package:flutter/material.dart';
  import 'package:encore_flutter/encore_flutter.dart';

  class HomeScreen extends StatelessWidget {
    const HomeScreen({super.key});

    @override
    Widget build(BuildContext context) {
      return ListView(
        children: [
          EncoreClaimReminder(
            placement: 'home',
            appearance: AppearanceConfig(accentColor: '#5671FF'),
          ),
          // The rest of your home screen.
        ],
      );
    }
  }
  ```

  ```javascript Web SDK theme={null}
  import Encore from '@encorekit/web-sdk';

  // Call configure() first, as in the Web quickstart.
  const handle = Encore.triggers.claimReminder.mount(document.getElementById('claim-reminder'), {
    placement: 'home',
    appearance: { accentColor: '#5671FF' },
  });

  // Call this from your own teardown, when you remove the element.
  export function removeCard() {
    handle.unmount();
  }
  ```

  ```tsx Web SDK (React) theme={null}
  import { ClaimReminder } from '@encorekit/web-sdk/react';

  // Render inside your EncoreProvider.
  export function Home() {
    return (
      <main>
        <ClaimReminder placement="home" appearance={{ accentColor: '#5671FF' }} />
        {/* The rest of your home screen. */}
      </main>
    );
  }
  ```
</CodeGroup>

### Or use the trigger host

Each shorthand is the [trigger host](/publishers/triggers/quickstart#the-trigger-host) with the ID `claimReminder` built in, and renders the same view. Use the host instead when your app places several trigger components through one code path. Both take `useCase`, `appearance`, `publisherReward`, `onResult`, and `alignment`.

| Platform | Shorthand | Same view through the host |
| - | - | - |
| iOS (SwiftUI) | `ClaimReminder(placement:useCase:icon:appearance:publisherReward:onResult:alignment:)` | `EncoreTrigger("claimReminder", placement:useCase:autoOpen:icon:appearance:publisherReward:onResult:alignment:)` |
| iOS (UIKit) | `ClaimReminderView(placement:useCase:icon:appearance:publisherReward:onResult:alignment:)`, each also settable as a property | `EncoreTriggerView(id: "claimReminder", placement:useCase:autoOpen:icon:appearance:alignment:)`, with the same properties |
| Android (Compose) | `ClaimReminder(placement, useCase, icon, appearance, publisherReward, onResult, alignment)` | `EncoreTrigger(id, placement, useCase, autoOpen, icon, appearance, publisherReward, onResult, alignment)` with `id = "claimReminder"` |
| Android (View) | `ClaimReminderView(context, placement, useCase, icon, appearance, publisherReward, onResult)` with `alignment` set as a property, or `<com.encorekit.encore.ClaimReminderView app:encorePlacement="home" />` in XML | `EncoreTriggerView(context, id, placement, useCase, autoOpen, icon, appearance)` with `id = "claimReminder"` and the rest set as properties, or `app:encoreTriggerId="claimReminder"` in XML |
| React Native | `<EncoreClaimReminder placement useCase icon appearance publisherReward onResult alignment />` | `<EncoreTrigger id="claimReminder" placement useCase autoOpen icon appearance publisherReward onResult alignment />` |
| Flutter | `EncoreClaimReminder(placement:, useCase:, icon:, appearance:, publisherReward:, onResult:, alignment:)` | `EncoreTrigger(id: 'claimReminder', placement:, useCase:, autoOpen:, icon:, appearance:, publisherReward:, onResult:, alignment:)` |
| Web SDK | `Encore.triggers.claimReminder.mount(element, options)` | `Encore.triggers.mount('claimReminder', element, options)` |
| Web SDK (React) | `<ClaimReminder placement useCase icon appearance publisherReward onResult alignment />` | `<EncoreTrigger id="claimReminder" placement useCase icon appearance publisherReward onResult alignment />` |

## Your text

Pass `headline` to replace the card's title, and `cta` to relabel its button, the same way you set them on [Gifts Button](/publishers/triggers/gifts-button#your-text). Leave either out and the look's own copy shows, in the user's language. Only the `featured` look draws a button, and no look draws a subheadline today, so a `cta` or `subheadline` that a look has no place for leaves its copy as it is. Screen readers still read the brand's name when your headline replaces the title. See [Your text](/publishers/triggers/overview#your-text) for the rules on length and line breaks.

## Looks

Encore picks the look, and can test several against each other. These are the looks it serves today, each 76 tall except `featured`, which is 85 (points on iOS, `dp` on Android, CSS pixels on the web). The whole card is one control that opens the sheet, named for assistive technology by its title and the brand. The arrow is its own control, and so is the × when the look is dismissible.

| Look | What it shows |
| - | - |
| `progressBar` | A gift icon, the title, and a bar that drains as the reminder window runs out, with the time left |
| `logoProgress` | The brand's logo (or its first letter when there's no logo), a two-step progress line, the title, and a countdown |
| `countdownHero` | A large hours, minutes, and seconds countdown over the title, with an arrow |
| `featured` | A taller card with rounder corners: the brand's logo (or its first letter), the title, and the hours and minutes left, such as "23:32 left", beside a Continue button. Its background runs from `backgroundColor` to `backgroundEndColor` when you set both, else it is solid |
| `logoMarquee` | The title and countdown beside two columns of logos that scroll slowly, one logo per brand the user has an open claim with inside the reminder window, up to 8. They move only when there are at least 3 logos, stop while the card is off screen, and stay still when the user has reduced motion turned on. The card still names only the newest claim |

Encore can change these looks, or add new ones, without an app update.

## Pass your prize and read the result

Claim Reminder opens a reward sheet, so it takes `publisherReward` and `onResult` with the same rules as Gifts Button. It hands your prize to every sheet it opens and calls `onResult` once per sheet, after it closes. See [Pass your prize and read the result](/publishers/triggers/gifts-button#pass-your-prize-and-read-the-result) for the grant rules, the web caveat, and samples for every platform; swap in the `ClaimReminder` shorthand for your platform.

## After a completion

When the user finishes the offer they were reminded about, Encore decides what the spot shows for the rest of their day, and can test the choices against each other:

* **Nothing** (the usual choice), until the user claims another offer.
* **A thanks look**: "Nice work, you finished it" with a button that opens the reward sheet. A tap opens the sheet and ends the thanks look, and so do a new claim and midnight on the user's device. Its events carry the layout `thanks`.

There is nothing to set: the behavior comes with the look Encore serves.

## When it renders nothing

On top of the cases every trigger component shares (see [Troubleshooting](/publishers/triggers/troubleshooting#it-isnt-showing)), Claim Reminder renders nothing when:

* The user has no open claim, or none inside the reminder window.
* The user's open claims are all completed, either confirmed by the brand or reported finished by the user.
* The reward sheet for its use case and placement doesn't list the claimed offer, for example because the user has an open claim but the sheet has no offers to show.
* The user dismissed the reminder for that claim on this device.

## What Encore controls

The served look sets these, not your code:

* **Look.** One of the [looks](#looks), including its height.
* **Copy.** The card's text, in the user's language, for each line you don't [set yourself](/publishers/triggers/overview#your-text).
* **Reminder window.** How many hours after the claim the card shows, from 1 to 720. 24 by default.
* **Dismissible.** Whether the user can close the card.
* **Default colors.** The look's colors in the [color order](/publishers/triggers/overview#colors). Yours always win.

The card's copy never says the offer expires or that the user loses it, because neither happens.

## Analytics

Claim Reminder reports its own impressions, taps, and dismissals to Encore's analytics. You don't send any events.

## Related

* [Trigger components](/publishers/triggers/overview): how trigger components work, heights, and colors.
* [Quickstart](/publishers/triggers/quickstart) and [Experiments and looks](/publishers/triggers/experiments).
* [Gifts Button](/publishers/triggers/gifts-button): the other trigger component, and the full prize and result samples.
* [Localization](/publishers/concepts/localization): how the card's copy reaches the user's language.
* `AppearanceConfig` on the web: [Advanced UI](/publishers/web/guides/advanced-ui).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.