Skip to content

Reorganize Customer Center section #662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vegaro merged 8 commits into from
Feb 27, 2025
Merged

Reorganize Customer Center section #662

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fb6fa72
reorg
vegaro Feb 26, 2025
24b9a6d
comments 1
vegaro Feb 27, 2025
7446056
Update docs/tools/customer-center/customer-center-configuration.mdx
vegaro Feb 27, 2025
d96fb88
Update docs/tools/customer-center/customer-center-promo-offers-google…
vegaro Feb 27, 2025
e7f4002
remove refunds from google promo offers
vegaro Feb 27, 2025
271653b
Dynamic versions
vegaro Feb 27, 2025
952493b
create sub group
vegaro Feb 27, 2025
2684722
use partials
vegaro Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 2 additions & 55 deletions docs/tools/customer-center.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,61 +33,8 @@ It can be used to allow customers to:
It can be used to allow developers to:

- Require customers to update their app if they are on an older version before being able to contact your support email
- Ask customers to provide the reason for their cancellation or refund request
- Automatically provide promo offers to retain customers

### Getting Started

To use Customer Center, simply:

1. [Install](/tools/customer-center/customer-center-installation) the RevenueCat UI SDK:

import CustomerCenterSDKTable from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';

<CustomerCenterSDKTable />

2. [Integrate](/tools/customer-center/customer-center-integration) the Customer Center into your app

3. [Configure](/tools/customer-center/customer-center-configuration) the Customer Center on the Dashboard

## Limitations

### Platforms (support for more coming)

- ✅ iOS 15.0 and higher
- ✅ Mac Catalyst 15.0 and higher
- ✅ Android 7.0 (API level 24)
- ❌ macOS
- ❌ tvOS
- ❌ watchOS
- ❌ visionOS

## Concepts

### Management options

There are 4 main management options that customers can choose from. Today we support:

- Cancellation
- Missing Purchases
- Refund Request (iOS only)
- Plan Changes (iOS only)

When a customer initially opens the Customer Center, these are the main options they'll see to select from.

![Customer Center Paths](/images/customer-center/paths.png)

### Feedback surveys

Any management option can have a custom feedback survey attached to it with a question & answers that you define. You might use a survey simply to understand why a customer selected a given path (e.g. why they're looking to cancel), or you may use a survey to motivate them to change their mind with a compelling promotional offer. [Learn more about configuring feedback surveys.](https://www.revenuecat.com/docs/tools/customer-center/customer-center-configuration)

![Customer Center Cancellation](/images/customer-center/cancel-subscription.png)

### Promotional offers

Promotional offers are attachable to particular feedback survey options and to paths. We think you might be able to reduce churn if you capture customers who are looking for a way to make changes to their subscription if you offer them a discount at that exact time.

![Customer Center Promotional Offer](/images/customer-center-promo-offer.png)
- Ask customers to provide the reason for their cancellation or refund request (see [Configuring feedback prompts](/tools/customer-center/customer-center-configuration#feedback-prompts-1) for more details)
- Automatically provide promo offers to retain customers (see [Configuring promo offers](/tools/customer-center/customer-center-configuration#promotional-offers-1) for more details)

## Next steps

Expand Down
165 changes: 109 additions & 56 deletions docs/tools/customer-center/customer-center-configuration.mdx
View file
Open in desktop

Large diffs are not rendered by default.

25 changes: 23 additions & 2 deletions docs/tools/customer-center/customer-center-flutter.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,24 @@ sidebar_label: Flutter Integration
slug: customer-center-flutter
hidden: false
---
import { sdkVersions } from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';

## Overview

Customer Center is a self-service UI that can be added to your app to help your customers manage their subscriptions on their own. With it, you can prevent churn with pre-emptive promotional offers, capture actionable customer data with exit feedback prompts, and lower support volumes for common inquiries — all without any help from your support team.

There are only three steps to integrate Customer Center in your app:

1. Installing the RevenueCat UI SDK in your app
1. Implementing the Customer Center view in your app
1. Setting up promotional offers in both App Store Connect and Google Play Console
Copy link
Member

@facumenzella facumenzella Feb 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: we can extract this into a component like the table SDK and reuse it for all hybrids

Copy link
Member

@facumenzella facumenzella Feb 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do this in another PR.

Copy link
Member

@facumenzella facumenzella Feb 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. Installing the RevenueCat UI SDK in your app
1. Implementing the Customer Center view in your app
1. Setting up promotional offers in both App Store Connect and Google Play Console
```suggestion
1. Installing the `com.revenuecat.purchases:purchases-ui` SDK in your app
2. Implementing the Customer Center view in your app
3. Setting up promotional offers


## Installation

[![Release](https://img.shields.io/github/release/RevenueCat/purchases-flutter.svg?style=flat)](https://github.com/RevenueCat/purchases-flutter/releases)

- Add `purchases-ui-flutter` in your `pubspec.yaml`:
Before integrating the Customer Center in Flutter, add `purchases_ui_flutter` <code>{sdkVersions.flutter}</code> or higher in your `pubspec.yaml`:

```yaml
dependencies:
purchases_flutter: <latest version>
Expand All @@ -22,4 +34,13 @@ Opening the customer center is as simple as:

```dart
await RevenueCatUI.presentCustomerCenter();
```
```

## Setup promotional offers

Promotional Offers allow developers to apply custom pricing and trials to new customers and to existing and lapsed subscriptions. Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in App Store Connect and Google Play Store.

The Customer Center will automatically show offers based on specific user actions. By default we have defined it for cancellations but it can be modified to any of the defined paths. For Flutter you are going to have to configure these promotional offers in both Google Play Console and App Store Connect.
Refer to [configuring Google Play Store promotional offers](/tools/customer-center/customer-center-promo-offers-google) and [configuring App Store Connect promotional offers](/tools/customer-center/customer-center-promo-offers-apple) for detailed instructions.

Learn more about configuring the Customer Center in the [configuration guide](/tools/customer-center/customer-center-configuration).
57 changes: 6 additions & 51 deletions docs/tools/customer-center/customer-center-installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,56 +22,11 @@ Within the SDKs, Customer Center is available on the following platforms:
- ❌ watchOS
- ❌ visionOS

## Native iOS Installation
#### Installation

[![Release](https://img.shields.io/github/release/RevenueCat/purchases-ios.svg?style=flat)](https://github.com/RevenueCat/purchases-ios/releases)
Follow instructions on how to install the SDK in your particular platform:

### Using SPM:

#### If you already have `RevenueCat` in your project:

1. Open your project settings and select "Package Dependencies":

![Change version](https://github.com/RevenueCat/purchases-ios/assets/685609/d317fd33-8270-4d9b-9b38-8f5f14342b04)

2. Double-click and make sure version is at least `5.14.0`:

![Configure version](https://github.com/RevenueCat/purchases-ios/assets/685609/f537a1e1-a1ab-4e6f-986c-05abdcf1dd9f)

3. Open your target settings and find "Frameworks, Libraries, and Embedded Content":

![Find frameworks in your target](https://github.com/RevenueCat/purchases-ios/assets/685609/af078e9a-4b98-42c6-8ca7-6f79aebdf3e0)

4. Add `RevenueCatUI`:

![Add RevenueCatUI dependency](https://github.com/RevenueCat/purchases-ios/assets/685609/c2a3498c-b80d-405c-bdf6-75de927ea58e)

#### First time integrating the RevenueCat SDK:

1. Click File -> Add Packages...

2. Search for `git@github.com:RevenueCat/purchases-ios.git` and make sure version is at least `5.14.0`:

![Adding purchases-ios dependency](https://github.com/RevenueCat/purchases-ios/assets/685609/18291043-5710-4944-ba12-7d6d83bde240)

3. Add `RevenueCat` and `RevenueCatUI` SPM dependency to your project:

![Add paywall](/images/9140485-Screenshot_2023-08-04_at_12.08.07_78343500e565bc1fd0fceaac72486876.png)

### Using CocoaPods:

Add the following to your `Podfile`:
```ruby
pod 'RevenueCat'
pod 'RevenueCatUI'
```

## Native Android Installation

[![Release](https://img.shields.io/github/release/RevenueCat/purchases-android.svg?style=flat)](https://github.com/RevenueCat/purchases-android/releases)

1. Add `RevenueCatUI`:
```groovy build.gradle
implementation 'com.revenuecat.purchases:purchases:<latest version>'
implementation 'com.revenuecat.purchases:purchases-ui:<latest version>'
```
- [Native iOS](/tools/customer-center/customer-center-integration#installation)
- [Native Android](/tools/customer-center/customer-center-integration-android#installation)
- [Flutter](/tools/customer-center/customer-center-flutter#installation)
- [React Native](/tools/customer-center/customer-center-react-native#installation)
65 changes: 17 additions & 48 deletions docs/tools/customer-center/customer-center-integration-android.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ sidebar_label: Android Integration
slug: customer-center-integration-android
hidden: false
---
import { sdkVersions } from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';

import YouTubeEmbed from '@site/src/components/YouTubeEmbed';

Expand All @@ -15,15 +16,22 @@ Customer Center is a self-service UI that can be added to your app to help your

There are only two steps to integrate Customer Center in your app:

1. Installing the `com.revenuecat.purchases:purchases-ui` SDK in your app
1. Implementing the Customer Center view in your app
2. Setting up promotional offers
1. Setting up promotional offers

## Integration
## Installation

[![Release](https://img.shields.io/github/release/RevenueCat/purchases-android.svg?style=flat)](https://github.com/RevenueCat/purchases-android/releases)

Before integrating the Customer Center in Android, you need to add the `com.revenuecat.purchases:purchases-ui` SDK <code>{sdkVersions.android}</code> or higher to your app.

:::warning
Before integrating the Customer Center in Android, you need to add the com.revenuecat.purchases:purchases-ui SDK 8.12.0 or higher to your app. Follow the [RevenueCatUI installation guide](/tools/customer-center/customer-center-installation#native-android-installation) for more information.
:::
```groovy build.gradle
implementation 'com.revenuecat.purchases:purchases:<latest version>'
implementation 'com.revenuecat.purchases:purchases-ui:<latest version>'
```

## Integration
There's a `CustomerCenter` composable that can be used to display the Customer Center. It's intended to be used as a full screen composable so make sure to use it with a `fillMaxSize` modifier:

import usageViewKotlin from "!!raw-loader!@site/code_blocks/tools/customer-center-usage-1.kt";
Expand All @@ -34,50 +42,11 @@ import usageViewKotlin from "!!raw-loader!@site/code_blocks/tools/customer-cente
]}
/>

## Setting up promotional offers

Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in App Store Connect and Google Play Console.

Offers on the Play Store allow you to provide a custom price or a trial (or both) for a product. There are [different types of offers](/subscription-guidance/subscription-offers/google-play-offers#eligibility-criteria) that can be created in the Play Store. For the Customer Center, you will be using the **Developer determined** type.

Additionally, **add the `rc-customer-center` tag** to the developer determined offer from your product so that the offer is only available to Customer Center **and not used as a default offer when purchasing the product**.

:::warning Offers must be created in Google Play Console and tagged
Don't forget to add the tag `rc-customer-center` to the offer so that the offer is only available to Customer Center and not used as a default offer when purchasing the product or in Paywalls.
:::

![Play Store Offer Setup](/images/customer-center/play-store-offer.png)

[Learn how to setup promotional offers in Google Play Console here.](/subscription-guidance/subscription-offers/google-play-offers#promotional-offers)

### Required promotional offers

:::warning Offer changes are not reflected immediately
Offer changes in Google Play Console are not reflected immediately on the device/emulator. It can take up to 24 hours for the offer changes to be reported by the Play Store on the device/emulator. Cleaning the cache of the Play Store app on the device/emulator can help speed up the process.
:::

:::warning Offers must be created in Google Play Console
You need to add the store specific promotional offer ids you want to use for each of your products in the Offers tab of the Customer Center settings. Otherwise, the promotional offer will not be shown to customers.
:::

The Customer Center will automatically show offers based on specific user actions. By default we have defined it for cancellations but it can be modified to any of the defined paths. Here’s how it works:

![Promotional Offers Configuration](/images/customer-center-promo-offers-config.png)

- **Cancellation Retention Discount**: By default, for responses in the cancellation survey, RevenueCat will use a promotional offer that you can customize in the Offers tab of the Customer Center settings.

This setup enables RevenueCat to automatically match the right offer based on a user’s actions, providing a seamless experience for both cancellation and refund requests.

The SDK will automatically match the right offer based on a user’s actions and its active subscription. If the SDK cannot locate a matching promotional offer id for the currently active user's subscription, it will bypass the survey and proceed with the user’s requested action—either canceling or refunding the subscription.

:::warning Upgrade offers are not supported
It is currently not possible to offer an upgrade offer for a different product than the one the user is currently subscribed to.
:::
## Setup promotional offers

**These promotional offers must be created in Google Play Console in order to be shown to customers.** After creating a promotional offer for a product in Google Play Console, you have to assign it to a particular offer in the Offers tab of the Customer Center settings.
Promotional Offers allow developers to apply custom pricing and trials to new customers and to existing and lapsed subscriptions. Unique promotional offers can be assigned to different paths and survey responses in the Customer Center, but first they must be setup in Google Play Console.

For example, if you just created an offer with id "monthly_subscription_cancellation_offer" in Google Play Console for your monthly subscription product, you would go to the Offers tab of the Customer Center settings and edit the "Cancellation Retention Discount" offer, and assign the id of the promotional offer id to that monthly subscription product.
The Customer Center will automatically show offers based on specific user actions. By default we have defined it for cancellations but it can be modified to any of the defined paths. Refer to [configuring Google Play Store promotional offers](/tools/customer-center/customer-center-promo-offers-google) for detailed instructions.

![Assigning a Google Play promotional offer](/images/customer-center-assign-promo-offer.png)
Learn more about configuring the Customer Center in the [configuration guide](/tools/customer-center/customer-center-configuration).

You may also customize your configuration to provide other offers, or provide them when the user performs other actions. [Learn more about configuring the Customer Center.](/tools/customer-center/customer-center-configuration)
Loading