Varioqub UI SDK integration
Varioqub UI SDK allows you to add interactive widgets and manage them through Varioqub experiments.
Key features
- Display dynamic UI components created with DivKit
- Remotely manage widget content through the Varioqub interface
- A/B testing of UI elements
- Display widgets both through configuration flags and direct URLs
System requirements
- iOS version 13 and above.
- Xcode 14.1 and above.
Step 1. Adding the library to your project
Varioqub UI SDK can be integrated in several ways. Choose a convenient integration method — through CocoaPods or Swift Package Manager.
CocoaPods
Swift Package Manager
Open the Podfile file in your project and add the dependency:
pod 'VarioqubUI', '~> 0.8'
Then run the installation command:
pod install
To integrate the library, add the following dependencies to your project's Package.swift file:
targets: [
.target(
name: "MyTarget",
dependencies: [
.product(name: "VarioqubUI", package: "varioqub-sdk-ui-ios"),
]
)
]
dependencies: [
.package(url: "https://github.com/appmetrica/varioqub-sdk-ui-ios", "0.8"..<"2.0.0"),
]
Step 2. Varioqub initialization
Before using UI components, you need to initialize the Varioqub SDK itself.
Follow the instructions from the article SDK Integration.
Step 3. Using varioqub UI with SwiftUI
SwiftUI is a framework for building user interfaces. Varioqub UI SDK integrates with SwiftUI using the VarioqubSwiftUIView.ViewModel component.
Creating a custom widget
import Varioqub
import VarioqubUI
import DivKit
struct CustomContentView: View {
// VarioqubSwiftUIView.ViewModel manages the widget state
@ObservableObject var varioqubUIVM: VarioqubSwiftUIView.ViewModel
init(varioqubUIVM: VarioqubSwiftUIView.ViewModel) {
self.varioqubUIVM = varioqubUIVM
}
var body: some View {
VarioqubSwiftUIView(viewModel: varioqubUIVM)
}
}
Configuring VarioqubSwiftUIView.ViewModel and displaying the widget
import DivKit
import VarioqubUI
// Create a flag for the widget
let widgetFlag = VarioqubFlag(rawValue: "widget_flag")
// Configure DivKit components
let divComponent = DivKitComponents()
// Create VarioqubSwiftUIView.ViewModel to manage the widget
let varioqubUIVM = VarioqubSwiftUIView.ViewModel(
divComponents: divComponents,
cardId: DivCardID(rawValue: "div_id") // Unique card ID
)
// Display the widget to the user
VarioqubUI.shared.applyWidget(
widgetName: widgetFlag, // Flag name from configuration
widgetApplier: varioqubUIVM, // Created VarioqubSwiftUIView.ViewModel
extraParams: nil // Additional parameters (optional)
)
Displaying a widget by URL with additional parameters
Sometimes you need to display a widget not through a configuration flag, but via a direct link. This is convenient for deep linking or displaying content through external links:
// Function to display a widget by URL
func openWidgetFromUrl(url: URL, isEncrypted: Bool) {
varioqubUIVM.applyWidget(
widgetName: widgetFlag,
widgetApplier: varioqubUIVM,
url: url,
paramName: "url_query_parameter", // Parameter name in URL for widget data
isEncrypted: isEncrypted // Whether data in URL is encrypted
)
}
// Example 1: Passing encrypted data through URL
// JSON with additional parameters
let urlQueryParameter = "{ \"extra1\": \"value1\" }"
// Encode in Base64
let urlQueryParameterBase64 = urlQueryParameter.data(using: .utf8)?.base64EncodedString() ?? ""
// Form URL and open widget
openWidgetFromUrl(
url: URL(string: "https://example.com/widget?url_query_parameter=\(urlQueryParameterBase64)")!,
isEncrypted: true
)
// Example 2: Passing open data through URLComponents
// Create URL using URLComponents
let urlComponents = URLComponents(string: "https://example.com/widget")
urlComponents.queryItems = [ URLQueryItem(name: "url_query_parameter", value: urlQueryParameter) ]
// Open without encryption
openWidgetFromUrl(url: urlComponents.url, isEncrypted: false)
Step 4. Using Varioqub UI with UIKit
UIKit is a framework for developing graphical user interfaces in iOS applications.
If you're using UIKit, Varioqub UI SDK also provides convenient tools for integration.
import Varioqub
import VarioqubUI
// Create a flag for the widget
let widgetFlag = VarioqubFlag(rawValue: "widget_flag")
class CustomViewController: UIViewController {
let varioqubUIVM = VarioqubSwiftUIView.ViewModel(
divComponents: divComponent,
cardId: DivCardID(rawValue: "div_id")
)
@IBOutlet private var parentView: UIView!
// Create a special adapter for UIKit
private lazy var varioqubUIKitApplier = VarioqubUIKitViewApplier(
parentView: parentView, // Parent container for the widget
divComponents: DivKitComponents(), // Components for rendering
cardId: DivCardID(rawValue: "div_id") // Card ID
)
override func viewDidLoad() {
super.viewDidLoad()
variqubUIKitApplier.applyWidget(
widgetName: widgetFlag,
widgetApplier: varioqubUIKitApplier,
extraParams: nil
)
}
// Function to display a widget by URL
func openWidgetFromUrl(url: URL, isEncrypted: Bool) {
VarioqubUI.shared.applyWidget(
widgetName: widgetFlag,
widgetApplier: varioqubUIKitApplier,
url: url,
paramName: "url_query_parameter",
isEncrypted: isEncrypted
)
}
}
Displaying a widget by URL with additional parameters
// Encrypted parameters
let urlQueryParameter = "{ \"extra1\": \"value1\" }"
let urlQueryParameterBase64 = urlQueryParameter.data(using: .utf8)?.base64EncodedString() ?? ""
viewController.openWidgetFromUrl(url: URL(string: "https://example.com/widget?url_query_parameter=\(urlQueryParameterBase64)")!, isEncrypted: true)
// Unencrypted parameters
let urlComponents = URLComponents(string: "https://example.com/widget")
urlComponents.queryItems = [ URLQueryItem(name: "url_query_parameter", value: urlQueryParameter) ]
viewController.openWidgetFromUrl(url: urlComponents.url, isEncrypted: false)