Add a placement
Before you begin
Ensure that the Rokt iOS SDK has already been integrated into your application following the steps listed here.
Overlay placements
Execute the Rokt iOS SDK in your desired ViewController
and add all appropriate customer attributes. The example code below uses ViewDidLoad
to display a Rokt overlay placement.
The SDK provides optional callback events for when the view loads and unloads.
- Swift
- Objective-C
- SwiftUI
import Rokt_Widget
class OrderConfirmationViewController: UIViewController {
// call this function when the placement needs to be shown
func showWidget() {
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
Rokt.execute(viewName: "RoktExperience", attributes: attributes, onLoad: {
// Optional callback for when the Rokt placement loads
}, onUnLoad: {
// Optional callback for when the Rokt placement unloads
}, onShouldShowLoadingIndicator: {
// Optional callback to show a loading indicator
}, onShouldHideLoadingIndicator: {
// Optional callback to hide a loading indicator
})
}
}
#import <Rokt_Widget/Rokt_Widget-Swift.h>
// call this function when placement needs to be shown
- (void)showWidget {
NSDictionary *attributes = @{
@"email" : @"j.smith@example.com",
@"firstname": @"Jenny",
@"lastname": @"Smith",
@"mobile": @"(555)867-5309",
@"postcode": @"90210",
@"country": @"US"
};
[Rokt executeWithViewName:@"RoktExperience"
attributes:attributes
placements:nil
onLoad:^{
// Optional callback for when the Rokt placement loads
} onUnLoad:^{
// Optional callback for when the Rokt placement unloads
} onShouldShowLoadingIndicator:^{
// Optional callback to show a loading indicator
} onShouldHideLoadingIndicator:^{
// Optional callback to hide a loading indicator
} onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight) {
// Does not required for Full screen overlay
}];
}
import SwiftUI
import Rokt_Widget
class OrderConfirmationViewController: View {
func showPlacement() {
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
Rokt.execute(viewName: "RoktExperience",
attributes: attributes,
onLoad: {
// Optional callback for when the Rokt placement loads
}, onUnLoad: {
// Optional callback for when the Rokt placement unloads
}, onShouldShowLoadingIndicator: {
// Optional callback to show a loading indicator
}, onShouldHideLoadingIndicator: {
// Optional callback to hide a loading indicator
})
}
}
Optional functions
Function | Purpose |
---|---|
Rokt.close() | Used to auto-close overlay placements. |
Embedded placements
Modify your Storyboard
If you are using SwiftUI, please see the instructions in the SwiftUI table below. If you are not using SwiftUI, please use the following instructions.
In your Storyboard, add a view and put it in your ViewController
:
On the custom
class, set RoktEmbeddedView
as the view's class. Then define top, leading, and trailing constraints to match the place that the embedded placement will be shown. For height, we recommend adding a height constraint of zero.
RoktEmbeddedView
can only modify the its own height according to the content of the placement. There is a callback in the execute
method to notify when the height has changed and return the new height.
The image below illustrates the easiest way to define RoktEmbeddedView
using auto layout.
Place RoktEmbeddedView as the Class of view and Rokt_Widget as Module.
Define the top constraints.
Define the leading constraints.
Define the trailing constraints.
Choose height and width constraints.
Set the height constraint.
Add constraints to view.
The RoktEmbeddedView
can also be created in code and included in the layout dynamically.
Execute the Rokt SDK
Execute the Rokt SDK for iOS in your desired ViewController
and add all appropriate customer attributes. The example code below uses ViewDidLoad
to launch the placement.
The SDK provides optional callback events for when the view loads and unloads.
- Swift
- Objective-C
- SwiftUI
import Rokt_Widget
class OrderConfirmationViewController: UIViewController {
// linked to RoktEmbeddedView created in step 5 or it could be created programmatically
@IBOutlet weak var roktEmbeddedView: RoktEmbeddedView!
...
// call this function when placement needs to be shown
func showWidget() {
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
let placements: [String : RoktEmbeddedView] = ["RoktEmbedded1": roktEmbeddedView]
Rokt.execute(viewName: "RoktEmbeddedExperience", attributes: attributes, placements: placements, onLoad: {
// Optional callback for when the Rokt placement loads
}, onUnLoad: {
// Optional callback for when the Rokt placement unloads
}, onShouldShowLoadingIndicator: {
// Optional callback to show a loading indicator
}, onShouldHideLoadingIndicator: {
// Optional callback to hide a loading indicator
}, onEmbeddedSizeChange: { selectedPlacement, widgetHeight in
// Optional callback to get selectedPlacement and height required by the placement every time the height of the placement changes
})
}
}
#import <Rokt_Widget/Rokt_Widget-Swift.h>
// call this function when the placement needs to be shown
- (void)showWidget {
NSDictionary *attributes = @{
@"email" : @"j.smith@example.com",
@"firstname": @"Jenny",
@"lastname": @"Smith",
@"mobile": @"(555)867-5309",
@"postcode": @"90210",
@"country": @"US"
};
// roktEmbeddedView is @property (weak, nonatomic) IBOutlet RoktEmbeddedView *roktEmbeddedView; in .h which points to roktEmbeddedView defines in step 5 or it could be created programmatically
NSDictionary<NSString *, RoktEmbeddedView *> *placements= [NSDictionary dictionaryWithObject:self.roktEmbeddedView forKey:@"RoktEmbedded1"];
[Rokt executeWithViewName:@"RoktExperience"
attributes:attributes
placements:placements
onLoad:^{
// Optional callback for when the Rokt placement loads
} onUnLoad:^{
// Optional callback for when the Rokt placement unloads
} onShouldShowLoadingIndicator:^{
// Optional callback to show a loading indicator
} onShouldHideLoadingIndicator:^{
// Optional callback to hide a loading indicator
} onEmbeddedSizeChange:^(NSString *selectedPlacement, CGFloat widgetHeight){
// Optional callback to get selectedPlacement and height required by the placement every time the height of the placement changes
}];
}
import Rokt_Widget
import SwiftUI
// creating UIViewRepresentable to connect UIKit with SwiftUI
struct RoktEmbeddedSwiftUIView: UIViewRepresentable {
typealias UIViewType = RoktEmbeddedView
var embedded: RoktEmbeddedView
init() {
embedded = RoktEmbeddedView()
}
func makeUIView(context: Context) -> RoktEmbeddedView {
return embedded
}
func updateUIView(_ uiView: RoktEmbeddedView, context: Context) {
}
}
struct OrderConfirmationViewController: View {
// Create Rokt embedded view
let roktEmbedded1 = RoktEmbeddedSwiftUIView()
@State private var embeddedSize: CGFloat = 0
@State private var placementDisplayed = false
var body: some View {
ScrollView {
VStack(spacing: 0){
// place rokt embedded view where you want
roktEmbedded1
.frame(height: self.embeddedSize, alignment: .center)
}
}.onAppear {
if !placementDisplayed {
// show placement when view appears
showPlacement()
}
}
}
private func showPlacement() {
var placements = [String: RoktEmbeddedView]()
placements["RoktEmbedded1"] = roktEmbedded1.embedded
let attributes = ["email": "j.smith@example.com",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(555)867-5309",
"postcode": "90210",
"country": "US"]
Rokt.execute(viewName: "RoktEmbeddedExperience",
attributes: attributes,
placements: placements,
onLoad: {
// Optional callback for when the Rokt placement loads
self.placementDisplayed = true
}, onUnLoad: {
// Optional callback for when the Rokt placement unloads
}, onShouldShowLoadingIndicator: {
// Optional callback to show a loading indicator
}, onShouldHideLoadingIndicator: {
// Optional callback to hide a loading indicator
}, onEmbeddedSizeChange: { selectedPlacement, widgetHeight in
embeddedSize = widgetHeight
})
}
}
To update the view name RoktExperience
or placement name RoktEmbedded1
with a different value, contact your Rokt account manager to ensure Rokt placements are configured consistently.