Skip to content

Commit

Permalink
reorg
Browse files Browse the repository at this point in the history
  • Loading branch information
@vegaro
vegaro committed Feb 26, 2025
1 parent e5d5a3c commit fb6fa72
Show file tree
Hide file tree
Showing 11 changed files with 361 additions and 261 deletions.
57 changes: 2 additions & 55 deletions docs/tools/customer-center.mdx
View file
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

Large diffs are not rendered by default.

24 changes: 22 additions & 2 deletions docs/tools/customer-center/customer-center-flutter.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,22 @@ slug: customer-center-flutter
hidden: false
---

## 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

## 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 Android, add `purchases_ui_flutter` 8.7.0 or higher in your `pubspec.yaml`:

```yaml
dependencies:
purchases_flutter: <latest version>
Expand All @@ -22,4 +33,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 React Native 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
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 `[email protected]: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)
64 changes: 16 additions & 48 deletions docs/tools/customer-center/customer-center-integration-android.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,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 8.12.1 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 +41,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

0 comments on commit fb6fa72

Please sign in to comment.