Skip to content

Commit 436052b

Browse files
vegarofacumenzella
andauthored
Reorganize Customer Center section (#662)
Co-authored-by: Facundo Menzella <facumenzella@users.noreply.github.com>
1 parent e5d5a3c commit 436052b

12 files changed

+376
-277
lines changed

docs/tools/customer-center.mdx

Lines changed: 2 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -33,61 +33,8 @@ It can be used to allow customers to:
3333
It can be used to allow developers to:
3434

3535
- Require customers to update their app if they are on an older version before being able to contact your support email
36-
- Ask customers to provide the reason for their cancellation or refund request
37-
- Automatically provide promo offers to retain customers
38-
39-
### Getting Started
40-
41-
To use Customer Center, simply:
42-
43-
1. [Install](/tools/customer-center/customer-center-installation) the RevenueCat UI SDK:
44-
45-
import CustomerCenterSDKTable from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';
46-
47-
<CustomerCenterSDKTable />
48-
49-
2. [Integrate](/tools/customer-center/customer-center-integration) the Customer Center into your app
50-
51-
3. [Configure](/tools/customer-center/customer-center-configuration) the Customer Center on the Dashboard
52-
53-
## Limitations
54-
55-
### Platforms (support for more coming)
56-
57-
- ✅ iOS 15.0 and higher
58-
- ✅ Mac Catalyst 15.0 and higher
59-
- ✅ Android 7.0 (API level 24)
60-
- ❌ macOS
61-
- ❌ tvOS
62-
- ❌ watchOS
63-
- ❌ visionOS
64-
65-
## Concepts
66-
67-
### Management options
68-
69-
There are 4 main management options that customers can choose from. Today we support:
70-
71-
- Cancellation
72-
- Missing Purchases
73-
- Refund Request (iOS only)
74-
- Plan Changes (iOS only)
75-
76-
When a customer initially opens the Customer Center, these are the main options they'll see to select from.
77-
78-
![Customer Center Paths](/images/customer-center/paths.png)
79-
80-
### Feedback surveys
81-
82-
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)
83-
84-
![Customer Center Cancellation](/images/customer-center/cancel-subscription.png)
85-
86-
### Promotional offers
87-
88-
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.
89-
90-
![Customer Center Promotional Offer](/images/customer-center-promo-offer.png)
36+
- 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)
37+
- Automatically provide promo offers to retain customers (see [Configuring promo offers](/tools/customer-center/customer-center-configuration#promotional-offers-1) for more details)
9138

9239
## Next steps
9340

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
## Overview
2+
3+
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.
4+
5+
There are only three steps to integrate Customer Center in your app:
6+
7+
1. Installing the RevenueCat UI SDK in your app
8+
1. Implementing the Customer Center view in your app
9+
1. Setting up promotional offers in App Store Connect/Google Play Console

docs/tools/customer-center/customer-center-configuration.mdx

Lines changed: 109 additions & 56 deletions
Large diffs are not rendered by default.

docs/tools/customer-center/customer-center-flutter.mdx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,17 @@ sidebar_label: Flutter Integration
44
slug: customer-center-flutter
55
hidden: false
66
---
7+
import { sdkVersions } from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';
8+
import OverviewPartial from './_customer-center-installation-overview.mdx';
9+
10+
<OverviewPartial />
711

812
## Installation
913

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

12-
- Add `purchases-ui-flutter` in your `pubspec.yaml`:
16+
Before integrating the Customer Center in Flutter, add `purchases_ui_flutter` <code>{sdkVersions.flutter}</code> or higher in your `pubspec.yaml`:
17+
1318
```yaml
1419
dependencies:
1520
purchases_flutter: <latest version>
@@ -22,4 +27,13 @@ Opening the customer center is as simple as:
2227
2328
```dart
2429
await RevenueCatUI.presentCustomerCenter();
25-
```
30+
```
31+
32+
## Setup promotional offers
33+
34+
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.
35+
36+
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.
37+
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.
38+
39+
Learn more about configuring the Customer Center in the [configuration guide](/tools/customer-center/customer-center-configuration).

docs/tools/customer-center/customer-center-installation.mdx

Lines changed: 6 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -22,56 +22,11 @@ Within the SDKs, Customer Center is available on the following platforms:
2222
- ❌ watchOS
2323
- ❌ visionOS
2424

25-
## Native iOS Installation
25+
#### Installation
2626

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

29-
### Using SPM:
30-
31-
#### If you already have `RevenueCat` in your project:
32-
33-
1. Open your project settings and select "Package Dependencies":
34-
35-
![Change version](https://github.com/RevenueCat/purchases-ios/assets/685609/d317fd33-8270-4d9b-9b38-8f5f14342b04)
36-
37-
2. Double-click and make sure version is at least `5.14.0`:
38-
39-
![Configure version](https://github.com/RevenueCat/purchases-ios/assets/685609/f537a1e1-a1ab-4e6f-986c-05abdcf1dd9f)
40-
41-
3. Open your target settings and find "Frameworks, Libraries, and Embedded Content":
42-
43-
![Find frameworks in your target](https://github.com/RevenueCat/purchases-ios/assets/685609/af078e9a-4b98-42c6-8ca7-6f79aebdf3e0)
44-
45-
4. Add `RevenueCatUI`:
46-
47-
![Add RevenueCatUI dependency](https://github.com/RevenueCat/purchases-ios/assets/685609/c2a3498c-b80d-405c-bdf6-75de927ea58e)
48-
49-
#### First time integrating the RevenueCat SDK:
50-
51-
1. Click File -> Add Packages...
52-
53-
2. Search for `git@github.com:RevenueCat/purchases-ios.git` and make sure version is at least `5.14.0`:
54-
55-
![Adding purchases-ios dependency](https://github.com/RevenueCat/purchases-ios/assets/685609/18291043-5710-4944-ba12-7d6d83bde240)
56-
57-
3. Add `RevenueCat` and `RevenueCatUI` SPM dependency to your project:
58-
59-
![Add paywall](/images/9140485-Screenshot_2023-08-04_at_12.08.07_78343500e565bc1fd0fceaac72486876.png)
60-
61-
### Using CocoaPods:
62-
63-
Add the following to your `Podfile`:
64-
```ruby
65-
pod 'RevenueCat'
66-
pod 'RevenueCatUI'
67-
```
68-
69-
## Native Android Installation
70-
71-
[![Release](https://img.shields.io/github/release/RevenueCat/purchases-android.svg?style=flat)](https://github.com/RevenueCat/purchases-android/releases)
72-
73-
1. Add `RevenueCatUI`:
74-
```groovy build.gradle
75-
implementation 'com.revenuecat.purchases:purchases:<latest version>'
76-
implementation 'com.revenuecat.purchases:purchases-ui:<latest version>'
77-
```
29+
- [Native iOS](/tools/customer-center/customer-center-integration#installation)
30+
- [Native Android](/tools/customer-center/customer-center-integration-android#installation)
31+
- [Flutter](/tools/customer-center/customer-center-flutter#installation)
32+
- [React Native](/tools/customer-center/customer-center-react-native#installation)

docs/tools/customer-center/customer-center-integration-android.mdx

Lines changed: 15 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,27 @@ sidebar_label: Android Integration
44
slug: customer-center-integration-android
55
hidden: false
66
---
7+
import { sdkVersions } from '@site/src/components/CustomerCenter/CustomerCenterSDKTable';
78

89
import YouTubeEmbed from '@site/src/components/YouTubeEmbed';
10+
import OverviewPartial from './_customer-center-installation-overview.mdx';
911

1012
<YouTubeEmbed videoId="yraB5gQCUPE" title="Integrating the Customer Center" />
1113

12-
## Overview
14+
<OverviewPartial />
1315

14-
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.
16+
## Installation
1517

16-
There are only two steps to integrate Customer Center in your app:
18+
[![Release](https://img.shields.io/github/release/RevenueCat/purchases-android.svg?style=flat)](https://github.com/RevenueCat/purchases-android/releases)
1719

18-
1. Implementing the Customer Center view in your app
19-
2. Setting up promotional offers
20+
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.
2021

21-
## Integration
22-
23-
:::warning
24-
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.
25-
:::
22+
```groovy build.gradle
23+
implementation 'com.revenuecat.purchases:purchases:<latest version>'
24+
implementation 'com.revenuecat.purchases:purchases-ui:<latest version>'
25+
```
2626

27+
## Integration
2728
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:
2829

2930
import usageViewKotlin from "!!raw-loader!@site/code_blocks/tools/customer-center-usage-1.kt";
@@ -34,50 +35,11 @@ import usageViewKotlin from "!!raw-loader!@site/code_blocks/tools/customer-cente
3435
]}
3536
/>
3637

37-
## Setting up promotional offers
38-
39-
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.
40-
41-
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.
42-
43-
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**.
44-
45-
:::warning Offers must be created in Google Play Console and tagged
46-
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.
47-
:::
48-
49-
![Play Store Offer Setup](/images/customer-center/play-store-offer.png)
50-
51-
[Learn how to setup promotional offers in Google Play Console here.](/subscription-guidance/subscription-offers/google-play-offers#promotional-offers)
52-
53-
### Required promotional offers
54-
55-
:::warning Offer changes are not reflected immediately
56-
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.
57-
:::
58-
59-
:::warning Offers must be created in Google Play Console
60-
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.
61-
:::
62-
63-
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:
64-
65-
![Promotional Offers Configuration](/images/customer-center-promo-offers-config.png)
66-
67-
- **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.
68-
69-
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.
70-
71-
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.
72-
73-
:::warning Upgrade offers are not supported
74-
It is currently not possible to offer an upgrade offer for a different product than the one the user is currently subscribed to.
75-
:::
38+
## Setup promotional offers
7639

77-
**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.
40+
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.
7841

79-
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.
42+
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.
8043

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

83-
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)

0 commit comments

Comments
 (0)