### Install Zipy in iOS App Source: https://context7_llms Guide on how to integrate the Zipy SDK into an existing iOS mobile application. This typically involves adding the SDK as a dependency and initializing it within your app's lifecycle. ```swift import UIKit import Zipy @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // Initialize Zipy SDK with your API key Zipy.initialize(apiKey: "YOUR_ZIPY_API_KEY") // Other setup code... return true } } ``` -------------------------------- ### Network Call Capture Example with Interceptor (Kotlin) Source: https://docs.zipy.ai/android-setup/network-calls An example in Kotlin showing the implementation of OkHttpClient with the NetworkInterceptor within an AppCompatActivity. This setup allows for monitoring network activities within the activity's lifecycle. ```kotlin class NetworkDemoActivity : AppCompatActivity() { private lateinit var tvResult: TextView private val client by lazy { OkHttpClient.Builder() .addInterceptor(NetworkInterceptor()) .build() } ``` -------------------------------- ### Install and Initialize Zipy via npm Source: https://docs.zipy.ai/getting-started/install-zipy Installs the Zipy module using npm and then imports and initializes it within your application's JavaScript files, such as _app.js. This method is suitable for projects managed with npm and requires the project's SDK key for initialization. ```bash npm i zippyai ``` ```javascript import zipy from 'zipyai'; zipy.init('YOUR_PROJECT_SDK_KEY'); ``` -------------------------------- ### Install and Initialize Sumo Logic Logger with Zipy Session URL (JavaScript) Source: https://docs.zipy.ai/integration/sumo-logic This snippet demonstrates how to install the Sumo Logic Logger package, retrieve the current Zipy session URL, and initialize the logger with this URL. Ensure the 'sumo-logger' package is installed via npm or yarn. The zipySessionUrl is expected to be available globally via `window.zipy.getCurrentSessionURL()`. ```javascript const SumoLogger = require('sumo-logger'); const zipySessionUrl = window.zipy.getCurrentSessionURL(); const logger = new SumoLogger({ sessionKey: zipySessionUrl }); // Example of logging a message logger.log('message'); ``` -------------------------------- ### Initialize Zipy Flutter Plugin Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/install-flutter Imports and initializes the Zipy Flutter plugin in your application's entry point. This requires ensuring Flutter bindings are initialized and providing your unique API key. This setup is crucial for enabling Zipy's features, including session replay. ```dart import 'package:zipy_flutter/zipy_flutter.dart'; // import void main() { WidgetsFlutterBinding.ensureInitialized(); // Initialize the binding. Zipy.init(key: 'YOUR_API_KEY'); runApp(MyApp()); } ``` -------------------------------- ### Initialize Zipy SDK using NPM Source: https://docs.zipy.ai/configure/identifying-users This snippet demonstrates initializing the Zipy SDK when installed via NPM. First, the `zipyai` module is installed using npm, then imported and initialized with the project's SDK key in a suitable application file like `_app.js`. ```shell npm i zipyai ``` ```javascript import zipy from "zipyai"; zipy.init("YOUR_PROJECT_SDK_KEY"); ``` -------------------------------- ### Initialize New Session with Zipy SDK Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/session-recording-control Start a new session using your provided API key. This function is necessary to begin capturing events after a session has been stopped or for the initial setup. ```dart Zipy.init(key: 'YOUR_API_KEY'); ``` -------------------------------- ### Install Zipy via npm Source: https://docs.zipy.ai/integration/rb2b Install the zipyai module using npm and initialize Zipy in your application's entry file (e.g., _app.js). This method is suitable for projects managed with npm. ```bash npm i zipyai ``` ```javascript import zipy from 'zipyai'; zipy.init('YOUR_PROJECT_SDK_KEY'); ``` -------------------------------- ### Install Zipy in Android App Source: https://context7_llms Instructions for installing the Zipy SDK in your Android mobile application. This involves adding the dependency and initializing the SDK during your application's startup. ```java package com.example.myapp; import androidx.multidex.MultiDex; import androidx.appcompat.app.AppCompatActivity; import android.app.Application; import com.zipy.android.Zipy; public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); MultiDex.install(this); // Initialize Zipy SDK with your API key Zipy.initialize(this, "YOUR_ZIPY_API_KEY"); } } ``` -------------------------------- ### Get Help for Zipy CLI Source: https://docs.zipy.ai/configure/source-maps Display help information for the zipy-cli command to understand all available options and parameters. ```bash zipy-cli --help ``` -------------------------------- ### Advanced HTTP GET with Headers using ZipyHttpClient (Dart) Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/http-network-calls Shows how to perform an HTTP GET request with custom headers using ZipyHttpClient. This example includes setting 'Content-Type' and 'Authorization' headers and basic error handling with a try-catch block. It requires the zipy_flutter package. ```dart final client = ZipyHttpClient(); const String url = 'url'; final Map headers = { 'Content-Type': 'application/json', 'Authorization': 'Bearer your_api_key', }; try { final response = await client.get( Uri.parse(url), headers: headers, ); } catch (e) { print(e); } ``` -------------------------------- ### Zipy Web SDK (NPM) Source: https://context7_llms Documentation for Zipy Web SDK NPM releases starting from version 1.0.36. Details changes, improvements, and installation instructions for integrating Zipy via the NPM package manager. ```javascript // Install the Zipy Web SDK via npm npm install @zipy/web-sdk // Import and initialize in your application import Zipy from '@zipy/web-sdk'; Zipy.init({ apiKey: 'YOUR_ZIPY_API_KEY', // other configurations... }); ``` -------------------------------- ### Install TrackJS JavaScript Snippet Source: https://docs.zipy.ai/integration/trackjs This snippet installs the TrackJS library into your application. Ensure you replace '' with your actual TrackJS token. This is a prerequisite for all subsequent steps. ```javascript window.TrackJS && TrackJS.install({ token: "" }); ``` -------------------------------- ### Start/Resume Zipy Recording (JavaScript) Source: https://docs.zipy.ai/configure/zipy-recording-control This snippet shows how to restart or resume Zipy recording by reinitializing the SDK. Calling `zipy.init()` with your API key starts a new session and enables recording again. This is necessary after a page refresh, as recording stops automatically upon refresh. ```javascript zipy.init(""); ``` -------------------------------- ### Install Zipy AI React Native Module Source: https://docs.zipy.ai/zipy-for-mobile/react-native-setup/install-react-native Installs the main Zipy AI SDK package for React Native using npm. This is the first step in integrating Zipy's session replay and analytics capabilities. ```javascript npm install zipyai-react-native ``` -------------------------------- ### Install Zipy CLI Package Source: https://docs.zipy.ai/configure/source-maps Globally install the zipy-cli package using npm. This package is essential for uploading source maps to the Zipy server. ```bash npm i -g zipy-cli ``` -------------------------------- ### Basic HTTP GET and POST with ZipyHttpClient (Dart) Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/http-network-calls Demonstrates the basic usage of ZipyHttpClient for making GET and POST requests. It requires importing the zipy_flutter package. The client instance is used to call `get` or `post` methods with a URL. ```dart import 'package:zipy_flutter/zipy_flutter.dart'; final client = ZipyHttpClient(); client.get(url); or client.post(url); ``` -------------------------------- ### Add Zipy iOS SDK Dependency to Package.swift Source: https://docs.zipy.ai/ios-setup/install-in-an-ios-app This code snippet shows how to add the Zipy iOS SDK as a dependency in your project's Package.swift file. It specifies the repository URL and the version range to be used. Swift Protobuf will be automatically installed as a dependency. ```swift dependencies: [ .package(url: "https://github.com/zipyinc/zipy-ios-sdk.git", from: "1.0.0") ] ``` -------------------------------- ### Install Zipy via JavaScript SDK Source: https://docs.zipy.ai/getting-started/install-zipy Embeds the Zipy JavaScript SDK directly into the HTML head section of your web application. This method requires including a script tag for the SDK and a subsequent script tag to initialize it with your project's SDK key. Ensure the SDK is loaded before initialization, especially if using lazy loading. ```html ``` -------------------------------- ### Initialize Zipy AI SDK in React Native Source: https://docs.zipy.ai/zipy-for-mobile/react-native-setup/install-react-native Imports and initializes the Zipy AI SDK in your React Native application's entry point. Replace 'YOUR_API_KEY' with your actual Zipy API key to enable SDK functionality. ```javascript import zipy from 'zipyai-react-native'; zipy.init('YOUR_API_KEY'); ``` -------------------------------- ### Using ZipyDioClient for GET Requests with Headers (Dart) Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/dio-network-calls Illustrates how to perform a GET request using ZipyDioClient, including setting custom headers for authentication or content type. Handles potential errors during the request. ```dart final dioClient = ZipyDioClient(); const String url = 'url'; final Map headers = { 'Content-Type': 'application/json', 'Authorization': 'Bearer diogetCalls', }; try { final Response response = await dioClient.get( url, options: Options(headers: headers), ); } catch (e) { print(e); } ``` -------------------------------- ### Start/Initialize New Session - Swift Source: https://docs.zipy.ai/ios-setup/session-recording-control Initialize a new session with your API key using the Zipy SDK. This function is used to start capturing events again after a session has been stopped. ```swift Zipy.init("YOUR_API_KEY") ``` -------------------------------- ### Dio Interceptor Example for Network Logging (Dart) Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/dio-network-calls Shows how to use Dio interceptors, specifically NetworkLogger, to intercept and log network requests and responses. This is useful for debugging network activity. ```dart final Dio dio = Dio(); dio.interceptors.add(NetworkLogger()); final Uri todosUri = Uri.parse('url'); final Map headers = { 'Content-Type': 'application/json', 'Authorization': 'Bearer your_api_key', }; final Map postData = { 'title': '2', 'body': '33', 'userId': 4343, }; try { final response = await dio.post( todosUri.toString(), data: postData, options: Options(headers: headers), ); } catch (e) { print('Error posting data: $e'); } ``` -------------------------------- ### Initialize Zipy SDK in Android Application Source: https://docs.zipy.ai/android-setup/install-in-an-android-app This Java code demonstrates how to initialize the Zipy SDK within your Android Application class. It requires providing the application context and your unique API key. ```java import com.zipy.zipyandroid.Zipy; public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); // Provide application context Zipy.setApplicationContext(application); // Initialize with API Key Zipy.init("YOUR_API_KEY"); } } ``` -------------------------------- ### Zipy Web SDK (Script) Source: https://context7_llms Documentation for Zipy Web SDK script releases starting from version 1.0.48. Covers updates, new features, and bug fixes for the script-based integration of Zipy into web applications. ```html ``` -------------------------------- ### Initialize Zipy SDK in AppDelegate Source: https://docs.zipy.ai/ios-setup/install-in-an-ios-app This Swift code demonstrates how to initialize the Zipy SDK within the `application(_:didFinishLaunchingWithOptions:)` method of your AppDelegate. Early initialization is recommended for optimal performance and complete session capture. Replace 'YOUR_API_KEY' with your actual Zipy API key. ```swift import ZipyiOS class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // Initialize Zipy SDK Zipy.initialize("YOUR_API_KEY") return true } } ``` -------------------------------- ### Initialize Zipy SDK Source: https://docs.zipy.ai/configure/release-version Initializes the Zipy SDK with your project's SDK key and optional parameters, including the release version. ```APIDOC ## Initialize Zipy SDK ### Description Initializes the Zipy SDK with your project's SDK key and begins recording session replays. The release version of your application can be captured during initialization. ### Method `zipy.init(sdk_key, options)` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body - **sdk_key** (string) - Required - Your project SDK key. - **options** (object) - Optional - A JSON object specifying optional parameters for initialization. - **releaseVer** (string) - Optional - The release version of your project. ### Request Example ```javascript zipy.init("YOUR_PROJECT_SDK_KEY", { releaseVer: "0.1.0" }); ``` ### Response #### Success Response (200) This method typically does not return a value but initializes the SDK for subsequent operations. #### Response Example None ``` -------------------------------- ### Retrieve Current Session URL with Zipy (JavaScript) Source: https://docs.zipy.ai/zipy-for-mobile/react-native-setup/session-url-retrieval This snippet demonstrates how to use the `zipy.getCurrentSessionUrl()` function to get the current session's URL. This is useful for dynamically accessing and utilizing the session URL, for example, in tracking user behavior. ```javascript const url = zipy.getCurrentSessionUrl(); console.log('Current session URL:', url); ``` -------------------------------- ### Anonymize User with Zipy SDK (Kotlin) Source: https://docs.zipy.ai/android-setup/identify-users Clears all user-identifying information and starts a new anonymous session. This method should be called when a user signs out of the application to ensure subsequent activity is not mistakenly linked to the previous user. It requires the Zipy SDK to be installed and imported. ```kotlin import com.zipy.zipyandroid.Zipy // Clears all user-identifying information and creates a new session Zipy.anonymize() ``` -------------------------------- ### Install React Native File System Dependency Source: https://docs.zipy.ai/zipy-for-mobile/react-native-setup/install-react-native Installs the 'react-native-fs' package, which is a required dependency for the Zipy AI SDK to function correctly within a React Native environment. This package handles file system operations. ```javascript npm install react-native-fs ``` -------------------------------- ### Initialize Zipy SDK with Release Version Source: https://docs.zipy.ai/configure/release-version Initializes the Zipy SDK with a project SDK key and an optional release version. This helps in identifying the specific release associated with recorded sessions or captured errors. The 'releaseVer' option is a string representing the project's version. ```javascript zipy.init("YOUR_PROJECT_SDK_KEY", { releaseVer: "0.1.0" }); ``` -------------------------------- ### Initialize Zipy SDK in SceneDelegate Source: https://docs.zipy.ai/ios-setup/install-in-an-ios-app This Swift code shows how to initialize the Zipy SDK within the `scene(_:willConnectTo:options:)` method of your SceneDelegate. This is an alternative to initializing in AppDelegate, suitable for apps using scene-based lifecycle management. Ensure 'YOUR_API_KEY' is replaced with your actual key. ```swift import ZipyiOS class SceneDelegate: UIResponder, UIWindowSceneDelegate { func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) { // Initialize Zipy SDK Zipy.initialize("YOUR_API_KEY") } } ``` -------------------------------- ### Initialize Zipy SDK using Script Tag Source: https://docs.zipy.ai/configure/identifying-users This snippet shows how to include the Zipy SDK in your web application using a script tag. It requires adding two lines of JavaScript in the section of your HTML. The SDK is initialized with a project-specific SDK key. ```html ``` -------------------------------- ### Manual Screen Tagging with Zipy SDK (Swift) Source: https://docs.zipy.ai/ios-setup/screen-tracking-and-tagging Demonstrates how to manually tag screen names using Zipy's SDK in Swift. This is useful for tracking custom views, popups, tab changes, or updating screen names for dynamic content. It requires importing the ZipyiOS library. ```swift import ZipyiOS class ProfileViewController: UIViewController { override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) Zipy.tagScreenName("UserProfile") } func showCustomPopup() { // Tag custom popup view Zipy.tagScreenName("ProfileSettings-Popup") // Show popup logic } func onTabChanged(index: Int) { // Tag different tabs let tabName = ["Overview", "Details", "Settings"][index] Zipy.tagScreenName("Profile-\(tabName)Tab") } } ``` -------------------------------- ### Dynamic Content Screen Tagging with Zipy SDK (Swift) Source: https://docs.zipy.ai/ios-setup/screen-tracking-and-tagging Shows how to dynamically tag screen names based on real-time content using Zipy's SDK in Swift. This allows for more granular analytics by including contextual information like product categories in screen names. It requires the ZipyiOS library. ```swift func showProductDetails(product: Product) { Zipy.tagScreenName("ProductDetails-\(product.category)") } ``` -------------------------------- ### Add Zipy Flutter Dependency Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/install-flutter Adds the zipy_flutter package as a dependency to your Flutter project. This command modifies your pubspec.yaml file and fetches the package. Ensure you have Flutter installed and configured. ```dart flutter pub add zipy_flutter ``` -------------------------------- ### Initialize DevRev SDK with App ID and Session Token (JavaScript) Source: https://docs.zipy.ai/integration/devrev This code snippet shows how to initialize the DevRev SDK. It requires your unique application ID and a session token obtained from the identify user API response. The `app_id` is found in DevRev settings, and the `session_token` is dynamically provided. ```javascript window.plugSDK.init({ app_id: '', session_token: '' /* You will get this session token in the response of identify user api.*/ }); ``` -------------------------------- ### Get Current Zipy Session URL (Asynchronous - JavaScript) Source: https://docs.zipy.ai/configure/support-integration Retrieves the current Zipy session URL asynchronously. This is useful for scenarios requiring other operations before accessing the session URL. The function returns a Promise that resolves with the session URL. ```javascript window.zipy.getCurrentSessionURLAsync().then((sessionUrl) => { console.log("Session URL: ", sessionUrl); // Use this URL in form submission or send it to your support desk. }); ``` ```javascript const handleLogin = (data) => { window.zipy.getCurrentSessionURLAsync().then((sessionURL) => { console.log("sessionURL", sessionURL); setLoading(true); // Now, send this session URL along with login details or include it in the support ticket }); }; ``` -------------------------------- ### Initialize Zipy for iFrame Content Recording (JavaScript) Source: https://docs.zipy.ai/product-features/iframe-support This snippet initializes Zipy with a project SDK key and enables recording only for iframe content. It's used when the parent page embeds an iframe and you want to capture only the iframe's application content. Ensure you replace 'YOUR_PROJECT_SDK_KEY' with your actual key. ```javascript zipy.init("YOUR_PROJECT_SDK_KEY", {recordOnlyIframe : true}); ``` -------------------------------- ### Get Current Zipy Session URL (Synchronous - JavaScript) Source: https://docs.zipy.ai/configure/support-integration Retrieves the current Zipy session URL synchronously. This function can be called from any active Zipy page and returns the ongoing session URL. The returned URL can be included in form submissions or sent to support desks. ```javascript const sessionUrl = window.zipy.getCurrentSessionURL(); /* You can send this URL in an email/chat that is sent on form submission. */ ``` ```javascript const handleLogin = (data) => { let sessionURL = window.zipy.getCurrentSessionURL(); console.log("sessionURL", sessionURL); setLoading(true); }; ``` -------------------------------- ### Initialize Zipy with Root Domain for Session Stitching (JavaScript) Source: https://docs.zipy.ai/configure/session-stitching-rootdomain Initializes the Zipy SDK with a project key and configures session stitching by specifying the rootDomain. This parameter determines whether sessions across subdomains are merged or kept separate. Ensure 'YOUR_PROJECT_SDK_KEY' is replaced with your actual key. ```javascript window.zipy.init('YOUR_PROJECT_SDK_KEY', { rootDomain: 'example.com' }); ``` -------------------------------- ### Initialize Zipy with useEffect in ReactJS Source: https://docs.zipy.ai/troubleshooting/errors-in-npm This method leverages the 'useEffect' hook from React to initialize the Zipy SDK. The 'useEffect' hook ensures that the initialization code runs only after the component has mounted and rendered on the client-side, thus avoiding SSR-related 'window is not defined' errors. It requires the 'react' and 'zipyai' packages. ```javascript import React from "react"; import zipy from "zipyai"; React.useEffect(() => { zipy.init("APIKEY"); }); ``` -------------------------------- ### Import Zipy SDK for React Native Source: https://docs.zipy.ai/zipy-for-mobile/react-native-setup/identify-users This snippet shows how to import the zipy-react-native library. Ensure you have installed the SDK before using this import statement. ```javascript import zipy from 'zipyai-react-native'; ``` -------------------------------- ### Initialize ZipyDioClient for Network Calls (Dart) Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/dio-network-calls Demonstrates the basic initialization of ZipyDioClient for making GET or POST requests in a Flutter application. This client simplifies network operations. ```dart import 'package:zipy_flutter/zipy_flutter.dart'; final dioClient = ZipyDioClient(); dioClient.get(url); or dioClient.post(url); ``` -------------------------------- ### Configure Release Version Source: https://context7_llms Capture the release version of your application for each recorded session replay. This helps in correlating issues with specific application builds and tracking down regressions. ```javascript import Zipy from '@zipy/web-sdk'; // Set the release version during SDK initialization or configuration Zipy.init({ apiKey: 'YOUR_ZIPY_API_KEY', releaseVersion: '1.2.3', // other configurations... }); // Alternatively, you might set it dynamically later: // Zipy.setReleaseVersion('1.2.3'); ``` -------------------------------- ### Control Session Recording (Flutter) Source: https://context7_llms Manage the recording of user sessions in Flutter applications. This includes starting, pausing, resuming, and stopping the recording of events as needed for debugging and analysis. ```dart import 'package:zipy_flutter_sdk/zipy_flutter_sdk.dart'; // To start recording await ZipyFlutterSdk.startRecording(); // To pause recording await ZipyFlutterSdk.pauseRecording(); // To resume recording await ZipyFlutterSdk.resumeRecording(); // To stop recording await ZipyFlutterSdk.stopRecording(); ``` -------------------------------- ### Resolve 'ReferenceError: window is not defined' in Zipy npm Source: https://context7_llms This troubleshooting guide addresses the common 'ReferenceError: window is not defined' warning encountered with Zipy npm packages. It provides solutions to ensure the Zipy SDK integrates correctly in server-side rendering (SSR) or build environments where the 'window' object is not available. The solution typically involves conditional checks. ```javascript if (typeof window !== 'undefined') { // Code that relies on the window object // e.g., Zipy.init(); } // Alternatively, ensure Zipy is only initialized on the client-side. ``` -------------------------------- ### Resume Session Recording with Zipy SDK Source: https://docs.zipy.ai/zipy-for-mobile/flutter-setup/session-recording-control Continue capturing events after a pause. If the session has timed out (e.g., paused for 30 minutes or a configured duration), this function will start a new session. ```dart Zipy.resume(); ```