From 80020b6605ec45dfc944d8006214b412b44ba4a4 Mon Sep 17 00:00:00 2001 From: Isobelle Lim Date: Tue, 18 Mar 2025 13:38:48 -0400 Subject: [PATCH 1/4] Add In-App Forms to README --- README.md | 47 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b786cb0f..a61fe2c8 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,10 @@ - [Badge Count](#badge-count) - [Tracking Open Events](#tracking-open-events) - [Deep Linking](#deep-linking) + - [In-App Forms](#in-app-forms) + - [Prerequisites](#prerequisites-1) + - [Setup](#setup-1) + - [Behavior](#behavior) - [Troubleshooting](#troubleshooting) - [Contributing](#contributing) - [License](#license) @@ -424,10 +428,11 @@ No additional setup is needed to support rich push on Android. - [iOS](https://github.com/klaviyo/klaviyo-swift-sdk#Rich-Push) #### Badge Count -Klaviyo supports setting or incrementing the badge count on iOS when you send a push notification. + +Klaviyo supports setting or incrementing the badge count on iOS when you send a push notification. To enable this functionality, you will need to implement a notification service extension and app group -as detailed in the [Swift SDK installation instructions](https://github.com/klaviyo/klaviyo-swift-sdk?tab=readme-ov-file#installation). -See the [badge count documentation](https://github.com/klaviyo/klaviyo-swift-sdk?tab=readme-ov-file#badge-count) for more details. +as detailed in the [Swift SDK installation instructions](https://github.com/klaviyo/klaviyo-swift-sdk?tab=readme-ov-file#installation). +See the [badge count documentation](https://github.com/klaviyo/klaviyo-swift-sdk?tab=readme-ov-file#badge-count) for more details. Android automatically handles badge counts, and no additional setup is needed. #### Tracking Open Events @@ -480,6 +485,42 @@ Linking.getInitialURL().then((url) => { }); ``` +## In-App Forms + +[In-app forms](https://help.klaviyo.com/hc/en-us/articles/34567685177883) are messages displayed to mobile app users while they are actively using an app. You can create new in-app forms in a drag-and-drop editor in the Sign-Up Forms tab in Klaviyo. Follow the instructions in this section to integrate forms with your app. The SDK will display forms according to their targeting and behavior settings and collect delivery and engagement analytics automatically. + +### Prerequisites + +- Using Version 1.2.0 and higher +- Import the KlaviyoForms module + +### Setup + +To display in-app forms, add the following code to your application + +``` +import { KlaviyoForms } from "../klaviyo-react-native-sdk"; +... + +// call this any time after initializing your public API key +KlaviyoForms.registerForInAppForms(); +``` + +### Behavior + +Once `registerForInAppForms()` is called, the SDK will load form data for your account and display no more than one form within 15 seconds, based on form targeting and behavior settings. + +You can call `registerForInAppForms()` any time after initializing with your public API key to control when and where in your app's UI a form can appear. It is safe to register multiple times per application session. The SDK will internally prevent multiple forms appearing at once. + +Consider how often you want to register for forms. For example, registering from a lifecycle event is advisable so that the user has multiple opportunities to see your messaging if they are browsing your app for a prolonged period. However, be advised the form will be shown as soon as it is ready, so you may still need to condition this based on the user's context within your application. Future versions of this product will provide more control in this regard. + +| Callback | Description | +| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| `const handleAppStateChange = async (nextAppState: string) => { KlaviyoForms.registerForInAppForms(); }` | Anytime the app is foregrounded, check for forms and show if available. | +| `function App(): JSX.Element { useEffect(() => { KlaviyoForms.registerForInAppForms(); }};` | Show a form upon initial app launch. | + +**Note**: At this time, when device orientation changes any currently visible form is closed and will not be re-displayed automatically. + ## Troubleshooting Use the [troubleshooting guide](Troubleshooting.md) to resolve common issues with the Klaviyo React Native SDK. From b8ca65211d46f1d340d4ff695050542bc222612b Mon Sep 17 00:00:00 2001 From: belleklaviyo Date: Tue, 18 Mar 2025 13:57:17 -0400 Subject: [PATCH 2/4] simplify path of import --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a61fe2c8..c781f2f6 100644 --- a/README.md +++ b/README.md @@ -499,7 +499,7 @@ Linking.getInitialURL().then((url) => { To display in-app forms, add the following code to your application ``` -import { KlaviyoForms } from "../klaviyo-react-native-sdk"; +import { KlaviyoForms } from "klaviyo-react-native-sdk"; ... // call this any time after initializing your public API key From c309c5c183921e63f2be464048e54c5b2f562490 Mon Sep 17 00:00:00 2001 From: belleklaviyo Date: Thu, 20 Mar 2025 11:51:34 -0400 Subject: [PATCH 3/4] reflect simplified Klaviyo module removing KlaviyoForms --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index c781f2f6..7c2b53cc 100644 --- a/README.md +++ b/README.md @@ -492,18 +492,18 @@ Linking.getInitialURL().then((url) => { ### Prerequisites - Using Version 1.2.0 and higher -- Import the KlaviyoForms module +- Import the Klaviyo module ### Setup To display in-app forms, add the following code to your application ``` -import { KlaviyoForms } from "klaviyo-react-native-sdk"; +import { Klaviyo } from "klaviyo-react-native-sdk"; ... // call this any time after initializing your public API key -KlaviyoForms.registerForInAppForms(); +Klaviyo.registerForInAppForms(); ``` ### Behavior @@ -516,8 +516,8 @@ Consider how often you want to register for forms. For example, registering from | Callback | Description | | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -| `const handleAppStateChange = async (nextAppState: string) => { KlaviyoForms.registerForInAppForms(); }` | Anytime the app is foregrounded, check for forms and show if available. | -| `function App(): JSX.Element { useEffect(() => { KlaviyoForms.registerForInAppForms(); }};` | Show a form upon initial app launch. | +| `const handleAppStateChange = async (nextAppState: string) => { Klaviyo.registerForInAppForms(); }` | Anytime the app is foregrounded, check for forms and show if available. | +| `function App(): JSX.Element { useEffect(() => { Klaviyo.registerForInAppForms(); }};` | Show a form upon initial app launch. | **Note**: At this time, when device orientation changes any currently visible form is closed and will not be re-displayed automatically. From dd31338722d6e25c44fbe8651d6b54c5a5ed2933 Mon Sep 17 00:00:00 2001 From: Isobelle Lim Date: Tue, 25 Mar 2025 15:41:39 -0400 Subject: [PATCH 4/4] add Android setup note --- README.md | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7c2b53cc..a3fa15bc 100644 --- a/README.md +++ b/README.md @@ -494,6 +494,28 @@ Linking.getInitialURL().then((url) => { - Using Version 1.2.0 and higher - Import the Klaviyo module +#### Android + +In your Application class you **must** call `Klaviyo.registerForLifecycleCallbacks(applicationContext)`, due to timing issues, this cannot be achieved from the RN layer at this time. + +```kotlin +// Application subclass +import android.app.Application +import com.klaviyo.analytics.Klaviyo +class YourApplication : Application() { + override fun onCreate() { + super.onCreate() + /* ... */ + + // Initialize is required before invoking any other Klaviyo SDK functionality + Klaviyo.initialize("KLAVIYO_PUBLIC_API_KEY", applicationContext) + + // If unable to call initialize, you must at least register lifecycle listeners: + Klaviyo.registerForLifecycleCallbacks(applicationContext) + } +} +``` + ### Setup To display in-app forms, add the following code to your application @@ -514,8 +536,8 @@ You can call `registerForInAppForms()` any time after initializing with your pub Consider how often you want to register for forms. For example, registering from a lifecycle event is advisable so that the user has multiple opportunities to see your messaging if they are browsing your app for a prolonged period. However, be advised the form will be shown as soon as it is ready, so you may still need to condition this based on the user's context within your application. Future versions of this product will provide more control in this regard. -| Callback | Description | -| --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| Callback | Description | +| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | `const handleAppStateChange = async (nextAppState: string) => { Klaviyo.registerForInAppForms(); }` | Anytime the app is foregrounded, check for forms and show if available. | | `function App(): JSX.Element { useEffect(() => { Klaviyo.registerForInAppForms(); }};` | Show a form upon initial app launch. |