From fb6fa72b4771240fc05dd9f5178cc95f668d50dc Mon Sep 17 00:00:00 2001 From: Cesar de la Vega Date: Wed, 26 Feb 2025 17:42:57 +0100 Subject: [PATCH] reorg --- docs/tools/customer-center.mdx | 57 +----- .../customer-center-configuration.mdx | 165 ++++++++++++------ .../customer-center-flutter.mdx | 24 ++- .../customer-center-installation.mdx | 57 +----- .../customer-center-integration-android.mdx | 64 ++----- .../customer-center-integration.mdx | 92 +++++----- .../customer-center-promo-offers-apple.mdx | 58 ++++++ .../customer-center-promo-offers-google.mdx | 52 ++++++ .../customer-center-react-native.mdx | 23 ++- sidebars.js | 9 +- .../CustomerCenter/CustomerCenterSDKTable.tsx | 21 ++- 11 files changed, 361 insertions(+), 261 deletions(-) create mode 100644 docs/tools/customer-center/customer-center-promo-offers-apple.mdx create mode 100644 docs/tools/customer-center/customer-center-promo-offers-google.mdx diff --git a/docs/tools/customer-center.mdx b/docs/tools/customer-center.mdx index 86eabfdc..98d8d028 100644 --- a/docs/tools/customer-center.mdx +++ b/docs/tools/customer-center.mdx @@ -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'; - - - -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 diff --git a/docs/tools/customer-center/customer-center-configuration.mdx b/docs/tools/customer-center/customer-center-configuration.mdx index 3a45ad5d..2a318908 100644 --- a/docs/tools/customer-center/customer-center-configuration.mdx +++ b/docs/tools/customer-center/customer-center-configuration.mdx @@ -9,14 +9,22 @@ To configure Customer Center, locate the Monetization Tools section of your Proj The default configuration includes a set of paths, feedback surveys, and promotional offers that can be used immediately once your promotional offers are configured; or you can customize the configuration to your specific needs. -### What's configured by default +### Default configuration -All four management options are configured by default: +There are 4 main management options that customers can choose from. All four management options are configured by default: - Cancellation - Missing Purchases - Refund Request (iOS only) -- Plan changes (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 prompts + +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 promotional offers.](/tools/customer-center/customer-center-integration#setting-up-promotional-offers) The cancellation option is configured with a feedback survey with the following response options: @@ -24,78 +32,50 @@ The cancellation option is configured with a feedback survey with the following 2. "Don't use the app" 3. "Bought by mistake" -You can check the responses of feedback surveys in the [Customer Center Survey Responses chart](https://app.revenuecat.com/charts/customer_center_surveys). - -By default, if your customer selects "Too expensive" or "Don't use the app", they'll receive the promotional offer `Cancellation Retention Discount`. And of course, you can customize these responses and what (if anything) is offered to your liking. - -If your customer selects Refund Request, they'll be given the `Refunds Retention Discount` by default. +![Customer Center Cancellation](/images/customer-center/cancel-subscription.png) -:::warning Offers must be created in App Store Connect -In order for these promotional offers to be given to your customers, they must be first be created in App Store Connect and Google Play Console. [Learn more.](/tools/customer-center/customer-center-integration#setting-up-promotional-offers) -::: +You can check the responses of feedback surveys in the [Customer Center Survey Responses chart](https://app.revenuecat.com/charts/customer_center_surveys). -If your customer selects the "Missing Purchase" option, they'll be prompted to restore purchases. +#### Promotional offers -![Customer Center Missing Purchases](/images/customer-center/restore.png) +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. -### Support email +![Customer Center Promotional Offer](/images/customer-center-promo-offer.png) -The support email is optional and it is the email address that will be used to send emails to your customer in the following cases: - -- If your customer chooses the "Missing Purchase" option, where they can contact you if they have trouble restoring their purchase. -- It is also used if the user is trying to manage a subscription that was purchased on a different store than the one they are currently on, for example a Play Store subscription on an iOS device. +By default, if your customer selects "Too expensive" or "Don't use the app", they'll receive the promotional offer `Cancellation Retention Discount`. And of course, you can customize these responses and what (if anything) is offered to your liking. -The user will only be prompted to contact you if you have configured a support email. +If your customer selects Refund Request, they'll be given the `Refunds Retention Discount` by default. In order for these promotional offers to be given to your customers, they must be first be created in App Store Connect and Google Play Console. -### Update warning +#### Required promotional offers -:::info Update warning support -Displaying a warning to users not on the latest version of your app is not supported on Android and it requires version 5.14.0 or later of the RevenueCatUI iOS SDK. +:::warning Offers must be created in App Store Connect and Google Play Store +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. ::: -![Update warning](/images/customer-center/update-warning.png) +The Customer Center will automatically show offers based on specific user actions. By default we have defined it for refunds and cancellations but it can be modified to any of the defined paths. Here’s how it works: -It is possible to show a warning to users not on the latest version of your app. This can be useful to ensure users are using the latest version of your app to manage their subscriptions. +![Promotional Offers Configuration](/images/customer-center-promo-offers-config.png) -To enable this, you can enable the "Show a warning to users not on the latest version of your app" option in the Customer Center settings. +- **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. -### Purchase history +- **Refund Retention Discount**: By default, when a user requests a refund in iOS, RevenueCat will use a promotional offer that you can customize in the Offers tab of the Customer Center settings. -:::info Purchase history support -Displaying a link to display purchase history is not supported on Android and it requires version 5.15.1 or later of the RevenueCatUI iOS SDK. -::: +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. -![Purchase history](/images/customer-center/purchase-history.png) +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. -The customer center tries to primarily show the details that are most meaningful to the user. But it is possible to show more details on the purchase history to users. +**These promotional offers must be created in App Store Connect and Google Play Store in order to be shown to customers:** -To enable this, you can enable the "Display a link to purchase history in the main screen of the Customer Center" option in the Customer Center settings. This will display a link to the purchase history in the main screen of the Customer Center. - -This view also contains information that is only displayed on debug builds of your app which can be useful to diagnose issues with the purchases history. - -### Color customization +- [Setting up promotional offers in App Store Connect](/tools/customer-center/customer-center-promo-offers-apple#setting-up-promotional-offers) +- [Setting up promotional offers in Google Play Console](/tools/customer-center/customer-center-promo-offers-google#setting-up-promotional-offers) -By default, the Customer Center will use your app's default color scheme throughout, ensuring a native look and feel. +After creating the promotional offers for the cancellation and refund offers in App Store Connect and Google Play Store, they need to be assigned to the particular offer in the Offers tab of the Customer Center settings. -However, you can also customize the colors of the Customer Center through the UI. +For example, if you just created an offer with id `monthly_subscription_refund_offer` in App Store Connect for your monthly subscription product, edit the `Refund Retention Discount` offer in the Offers tab of the Customer Center settings, and assign the id of the promotional offer id to that monthly subscription product. -Here's how the color settings work: +![Assigning an Apple promotional offer](/images/customer-center-assign-promo-offer.png) -- **Accent Color**: This color is used throughout the entire Customer Center for various UI elements like buttons. If not set, the app's default accent color will be used. - -- **Background Color**: This color only applies to the promotional offers views. If not set, the app's default background color will be used. - -- **Text Color**: This color only applies to the text in the promotional offers views. If not set, the app's default text color will be used. - -- **Button Text Color**: This color only applies to the text in the promotional offers button. If not set, the app's default text color will be used. - -- **Button Background Color**: This color only applies to the background of the promotional offers button. If not set, the app's default background color will be used. - -In addition, there are light and dark theme variants available, which you can set in the configuration UI. - -:::tip -Remember, except for the accent color, these color settings only affect the promotional offers views. The rest of the Customer Center will use your app's default colors to maintain consistency with your app's overall design. -::: +You may also customize your configuration to provide other offers, or provide them when the user performs other actions. [Learn more about advanced configuration of the Customer Center.](/tools/customer-center/customer-center-configuration#promotional-offers-1) ## Advanced configuration @@ -149,7 +129,7 @@ You can customize these management options by: - Adding or adjusting promotional offer keys to change or introduce discount offers. - Adding or adjusting feedback survey keys to change or introduce feedback surveys. -#### Feedback surveys +### Feedback prompts Any management option can have a feedback survey attached to it with a question & answers that you configure. You might set one up to: @@ -163,10 +143,24 @@ You can check the responses of feedback surveys in the [Customer Center Survey R Promotional offers can be attached to any feedback survey option or management option to provide an extended trial, discounted price, or another offer of your choosing. +:::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. +::: + +#### 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 Store. + +Promotional offers allow you to provide a custom price or trial for a product to existing or previously subscribed customers. These offers are used in the Customer Center to +incentivize customers to stay subscribed who otherwise intend to cancel their subscription or request a refund. + +- [Setting up promotional offers in App Store Connect](/tools/customer-center/customer-center-promo-offers-apple) +- [Setting up promotional offers in Google Play Store](/tools/customer-center/customer-center-promo-offers-google) + #### Adding promotional offers :::warning Offers must be created in App Store Connect -In order for these promotional offers to be given to your customers, they must be first be created in App Store Connect. [Learn more.](/tools/customer-center/customer-center-integration#setting-up-promotional-offers) +In order for these promotional offers to be given to your customers, they must be first be [created in App Store Connect and Google Play Store](/tools/customer-center/customer-center-configuration#setting-up-promotional-offers) ::: Promotional offers are defined in the Offers tab of the Customer Center settings. Each offer can be referenced from management options or feedback survey options. @@ -193,6 +187,65 @@ For both condition types, you can set the comparison to be either "More than" or By using these eligibility conditions, you can create targeted offers for different segments of your user base, potentially increasing the effectiveness of your retention strategies. +### Support email + +The support email is optional and it is the email address that will be used to send emails to your customer in the following cases: + +- If your customer chooses the "Missing Purchase" option, where they can contact you if they have trouble restoring their purchase. +- It is also used if the user is trying to manage a subscription that was purchased on a different store than the one they are currently on, for example a Play Store subscription on an iOS device. + +The user will only be prompted to contact you if you have configured a support email. + +### Update warning + +:::info Update warning support +Displaying a warning to users not on the latest version of your app is not supported on Android and it requires version 5.14.0 or later of the RevenueCatUI iOS SDK. +::: + +![Update warning](/images/customer-center/update-warning.png) + +It is possible to show a warning to users not on the latest version of your app. This can be useful to ensure users are using the latest version of your app to manage their subscriptions. + +To enable this, you can enable the "Show a warning to users not on the latest version of your app" option in the Customer Center settings. + +### Purchase history + +:::info Purchase history support +Displaying a link to display purchase history is not supported on Android and it requires version 5.15.1 or later of the RevenueCatUI iOS SDK. +::: + +![Purchase history](/images/customer-center/purchase-history.png) + +The customer center tries to primarily show the details that are most meaningful to the user. But it is possible to show more details on the purchase history to users. + +To enable this, you can enable the "Display a link to purchase history in the main screen of the Customer Center" option in the Customer Center settings. This will display a link to the purchase history in the main screen of the Customer Center. + +This view also contains information that is only displayed on debug builds of your app which can be useful to diagnose issues with the purchases history. + +### Color customization + +By default, the Customer Center will use your app's default color scheme throughout, ensuring a native look and feel. + +However, you can also customize the colors of the Customer Center through the UI. + +Here's how the color settings work: + +- **Accent Color**: This color is used throughout the entire Customer Center for various UI elements like buttons. If not set, the app's default accent color will be used. + +- **Background Color**: This color only applies to the promotional offers views. If not set, the app's default background color will be used. + +- **Text Color**: This color only applies to the text in the promotional offers views. If not set, the app's default text color will be used. + +- **Button Text Color**: This color only applies to the text in the promotional offers button. If not set, the app's default text color will be used. + +- **Button Background Color**: This color only applies to the background of the promotional offers button. If not set, the app's default background color will be used. + +In addition, there are light and dark theme variants available, which you can set in the configuration UI. + +:::tip +Remember, except for the accent color, these color settings only affect the promotional offers views. The rest of the Customer Center will use your app's default colors to maintain consistency with your app's overall design. +::: + ### Localization The default configuration has been localized for 32 languages. If you want to customize the strings for a specific language, you can do so by editing them in the Localization tab. diff --git a/docs/tools/customer-center/customer-center-flutter.mdx b/docs/tools/customer-center/customer-center-flutter.mdx index a0fac1fb..296146f9 100644 --- a/docs/tools/customer-center/customer-center-flutter.mdx +++ b/docs/tools/customer-center/customer-center-flutter.mdx @@ -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: @@ -22,4 +33,13 @@ Opening the customer center is as simple as: ```dart await RevenueCatUI.presentCustomerCenter(); -``` \ No newline at end of file +``` + +## 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). diff --git a/docs/tools/customer-center/customer-center-installation.mdx b/docs/tools/customer-center/customer-center-installation.mdx index a6038e6e..b20dea28 100644 --- a/docs/tools/customer-center/customer-center-installation.mdx +++ b/docs/tools/customer-center/customer-center-installation.mdx @@ -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:' -implementation 'com.revenuecat.purchases:purchases-ui:' -``` +- [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) \ No newline at end of file diff --git a/docs/tools/customer-center/customer-center-integration-android.mdx b/docs/tools/customer-center/customer-center-integration-android.mdx index 70713213..def10861 100644 --- a/docs/tools/customer-center/customer-center-integration-android.mdx +++ b/docs/tools/customer-center/customer-center-integration-android.mdx @@ -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:' +implementation 'com.revenuecat.purchases:purchases-ui:' +``` +## 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"; @@ -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) diff --git a/docs/tools/customer-center/customer-center-integration.mdx b/docs/tools/customer-center/customer-center-integration.mdx index a36ab410..da8737b4 100644 --- a/docs/tools/customer-center/customer-center-integration.mdx +++ b/docs/tools/customer-center/customer-center-integration.mdx @@ -13,16 +13,59 @@ import YouTubeEmbed from '@site/src/components/YouTubeEmbed'; 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 two steps to integrate Customer Center in your app: +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 -2. Setting up promotional offers +1. Setting up promotional offers -## Integration +## Installation + +[![Release](https://img.shields.io/github/release/RevenueCat/purchases-ios.svg?style=flat)](https://github.com/RevenueCat/purchases-ios/releases) + +Before integrating the Customer Center in iOS, you need to add the RevenueCatUI SDK 5.14.0 or higher to your app. + +### 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) -:::warning -Before integrating the Customer Center in iOS, you need to add the RevenueCatUI SDK 5.14.0 or higher to your app. Follow the [RevenueCatUI installation guide](/tools/customer-center/customer-center-installation#native-ios-installation) for more information. -::: +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' +``` + +## Integration You can use the `CustomerCenterView` directly: @@ -58,41 +101,12 @@ import customerCenterEventsModifier from "!!raw-loader!@site/code_blocks/tools/c ]} /> -## 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. - -Promotional offers on the App Store allow you to provide a custom price or trial for a product to existing or previously subscribed customers. These offers are used in the Customer Center to -incentivize customers to stay subscribed who otherwise intend to cancel their subscription or request a refund. - -[Learn how to setup promotional offers in App Store Connect here.](/subscription-guidance/subscription-offers/ios-subscription-offers#promotional-offers) - -### Required promotional offers - -:::warning Offers must be created in App Store Connect -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 refunds and 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. - -- **Refund Retention Discount**: By default, when a user requests a refund in iOS, 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. +## Setup promotional offers -:::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. -::: +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. -**These promotional offers must be created in App Store Connect in order to be shown to customers.** After creating a promotional offer for a product in App Store Connect, you have to assign it to a particular offer in the Offers tab of the Customer Center settings. +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 App Store Connect promotional offers](/tools/customer-center/customer-center-promo-offers-apple) for detailed instructions. -For example, if you just created an offer with id "monthly_subscription_refund_offer" in App Store Connect for your monthly subscription product, you would go to the Offers tab of the Customer Center settings and edit the "Refund Retention Discount" offer, and assign the id of the promotional offer id to that monthly subscription product. +Learn more about configuring the Customer Center in the [configuration guide](/tools/customer-center/customer-center-configuration). -![Assigning an Apple promotional offer](/images/customer-center-assign-promo-offer.png) -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) diff --git a/docs/tools/customer-center/customer-center-promo-offers-apple.mdx b/docs/tools/customer-center/customer-center-promo-offers-apple.mdx new file mode 100644 index 00000000..2c218932 --- /dev/null +++ b/docs/tools/customer-center/customer-center-promo-offers-apple.mdx @@ -0,0 +1,58 @@ +--- +title: Configuring Apple Promotional Offers +sidebar_label: Apple Promotional Offers +slug: customer-center-promo-offers-apple +hidden: false +--- + +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. + +The Customer Center will automatically show offers based on specific user actions. By default we have defined it for refunds and 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. + +- **Refund Retention Discount**: By default, when a user requests a refund in iOS, 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. + +**These promotional offers must be created in App Store Connect in order to be shown to customers** + +## Setting up promotional offers + +Promotional Offers are created from within App Store Connect and are included as a pricing option to an existing subscription product. When you click the "+" option next to Subscription Prices, you'll see an option to Create Promotional Offer. + +![Subscription Offers are created as new pricing options in App Store Connect](/images/fd483c8-Screen_Shot_2019-04-17_at_3.32.04_PM_c4771d21690048eaebef7a2b81e1991d.png) + +To create the offer there are two fields that you need to specify: Reference Name, which is just used for your reference, and the Promotional Offer Product Code, which is what you will actually use to activate a specific offer in your app. +![](/images/7c62bd9-Screen_Shot_2019-04-17_at_3.39.20_PM_39ebc63179220e8a87abd77e8c574397.png "Screen Shot 2019-04-17 at 3.39.20 PM.png") +On the next screen you'll select the type of offer you wish to provide. Just like introductory offers, there are three types of Promotional Offers: + +1. **Pay-up-front** — The customer pays once for a period of time, e.g. $0.99 for 3 months. Allowed durations are 1, 2, 3, 6 and 12 months. +2. **Pay-as-you-go** — The customer pays a reduced rate, each period, for a number of periods, e.g. $0.99 per month for 3 months. Allowed durations are 1-12 months. Can only be specified in months. +3. **Free** — This is analogous to a free trial, the user receives 1 of a specified period free. The allowed durations are 3 days, 1 week, 2 weeks, 1 month, 2 months, 3 months, 6 months, and 1 year. + ![](/images/5bf1bca-Screen_Shot_2019-04-17_at_3.44.39_PM_86f3e83ab1dc12e343d91dda88bf48e2.png "Screen Shot 2019-04-17 at 3.44.39 PM.png") + +:::tip +Don't forget to click Save in the upper right after you configure the offer. +::: + +[For more information about how to setup promotional offers in App Store Connect here.](/subscription-guidance/subscription-offers/ios-subscription-offers#promotional-offers) + +## Displaying the promotional offer + +After creating a promotional offer for a product in App Store Connect, it needs to be assigned to a particular offer in the Offers tab of the Customer Center settings. + +For example, if you just created an offer with id `monthly_subscription_refund_offer` in App Store Connect for your monthly subscription product, edit the `Refund Retention Discount` offer in the Offers tab of the Customer Center settings, and assign the id of the promotional offer id to that monthly subscription product. + +![Assigning an Apple promotional offer](/images/customer-center-assign-promo-offer.png) + +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) + +You can customize a promotional offer's eligibility by setting conditions in the eligibility criteria. This allows you to control when and to whom the offer is presented. By using these eligibility conditions, you can create targeted offers for different segments of your user base, potentially increasing the effectiveness of your retention strategies. + +Refer to [Configuring promotional offers](/tools/customer-center/customer-center-configuration#promotional-offers-1) for more configuration options + diff --git a/docs/tools/customer-center/customer-center-promo-offers-google.mdx b/docs/tools/customer-center/customer-center-promo-offers-google.mdx new file mode 100644 index 00000000..077a32f3 --- /dev/null +++ b/docs/tools/customer-center/customer-center-promo-offers-google.mdx @@ -0,0 +1,52 @@ +--- +title: Configuring Google Promotional Offers +sidebar_label: Google Promotional Offers +slug: customer-center-promo-offers-google +hidden: false +--- + +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. + +The Customer Center will automatically show offers based on specific user actions. By default we have defined it for refunds and 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. + +- **Refund Retention Discount**: By default, when a user requests a refund in iOS, 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. + +**These promotional offers must be created in App Store Connect and Google Play Store in order to be shown to customers** + +## 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) + +[For more information about how to setup promotional offers in Google Play Console here.](/subscription-guidance/subscription-offers/google-play-offers) + +## Displaying the promotional offer + +After creating a promotional offer for a product in Google Play Console, it needs to be assigned to a particular offer in the Offers tab of the Customer Center settings. + +For example, if you just created an offer with id `monthly_subscription_refund_offer` in Google Play Console for your monthly subscription product, edit the `Refund Retention Discount` offer in the Offers tab of the Customer Center settings, and assign the id of the promotional offer id to that monthly subscription product. + +![Assigning a Google promotional offer](/images/customer-center-assign-promo-offer.png) + +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) + +You can customize a promotional offer's eligibility by setting conditions in the eligibility criteria. This allows you to control when and to whom the offer is presented. By using these eligibility conditions, you can create targeted offers for different segments of your user base, potentially increasing the effectiveness of your retention strategies. + +Refer to [Configuring promotional offers](/tools/customer-center/customer-center-configuration#promotional-offers-1) for more configuration options diff --git a/docs/tools/customer-center/customer-center-react-native.mdx b/docs/tools/customer-center/customer-center-react-native.mdx index b83ee5cb..c35e89a8 100644 --- a/docs/tools/customer-center/customer-center-react-native.mdx +++ b/docs/tools/customer-center/customer-center-react-native.mdx @@ -4,12 +4,22 @@ sidebar_label: React Native Integration slug: customer-center-react-native 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/react-native-purchases.svg?style=flat)](https://github.com/RevenueCat/react-native-purchases/releases) -- Update your `package.json` to include `react-native-purchases-ui`: +Before integrating the Customer Center in Android, update your `package.json` to include `react-native-purchases-ui` 8.6.0 or higher to your app. + ```json { "dependencies": { @@ -25,4 +35,13 @@ Opening the customer center is as simple as: ```tsx await RevenueCatUI.presentCustomerCenter(); -``` \ No newline at end of file +``` + +## 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). diff --git a/sidebars.js b/sidebars.js index 181bbfd6..4368449f 100644 --- a/sidebars.js +++ b/sidebars.js @@ -331,7 +331,14 @@ const customersCategory = Category({ itemsPathPrefix: "tools/customer-center/", items: [ Page({ slug: "customer-center-installation" }), - Page({ slug: "customer-center-configuration" }), + SubCategory({ + label: "Configuration", + slug: "customer-center-configuration", + items: [ + Page({ slug: "customer-center-promo-offers-apple" }), + Page({ slug: "customer-center-promo-offers-google" }), + ], + }), Page({ slug: "customer-center-integration" }), Page({ slug: "customer-center-integration-android" }), Page({ slug: "customer-center-flutter" }), diff --git a/src/components/CustomerCenter/CustomerCenterSDKTable.tsx b/src/components/CustomerCenter/CustomerCenterSDKTable.tsx index ef4d8e83..a20864e2 100644 --- a/src/components/CustomerCenter/CustomerCenterSDKTable.tsx +++ b/src/components/CustomerCenter/CustomerCenterSDKTable.tsx @@ -3,27 +3,32 @@ import React from "react"; export const CustomerCenterSDKTable: React.FC = () => { const sdkData = [ { - name: "purchases-ios", + name: "Native iOS", + sdk: "RevenueCatUI", link: "https://github.com/RevenueCat/purchases-ios", version: "5.14.0 and higher", }, { - name: "purchases-android", + name: "Native Android", + sdk: "com.revenuecat.purchases:purchases-ui", link: "https://github.com/RevenueCat/purchases-android", version: "8.12.1 and higher", }, { - name: "react-native-purchases-ui", + name: "React Native", + sdk: "react-native-purchases-ui", link: "https://github.com/RevenueCat/react-native-purchases", version: "8.6.0 and higher", }, { - name: "purchases-flutter", + name: "Flutter", + sdk: "purchases_ui_flutter", link: "https://github.com/RevenueCat/purchases-flutter", version: "8.7.0 and higher", }, { - name: "purchases-kmp", + name: "Kotlin Multiplatform", + sdk: "com.revenuecat.purchases:purchases-kmp-ui", link: "https://github.com/RevenueCat/purchases-kmp", version: "Coming soon", }, @@ -33,18 +38,20 @@ export const CustomerCenterSDKTable: React.FC = () => { - + + - {sdkData.map(({ name, link, version }) => ( + {sdkData.map(({ name, sdk, link, version }) => ( + ))}
RevenueCat SDKPlatformPackage Required Version
{name} {sdk} {version}