Edit

Launching an Embedded Placement

The Rokt SDK for iOS can be used to display a Rokt placement embedded in your app’s content. These instructions assume that the Rokt SDK for iOS has already been integrated into your application by following steps 1 to 4 here.

Step 5: Modify Storyboard

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, it is recommended to create a height constraint of 0 (zero).

RoktEmbeddedView can only modify the height of itself. It can change the height constraint of itself according to the content of the placement. There is a callback in 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.

• Step 1: Place RoktEmbeddedView as the Class of view and Rokt_Widget as Module
• Steps 2, 3 & 4: Define the top, leading and trailing constraints
• Steps 5 & 6: Define the height constraint
• Step 7: Add constraints to view

The RoktEmbeddedView can also be created in code and included in the layout dynamically.

Step 6: Execute the Rokt SDK for iOS

Execute the Rokt SDK for iOS in your desired ViewController and pass all appropriate consumer attributes. The example code below uses ViewDidLoad to launch the placement.

The Rokt placement displays after a short delay, configurable via the Rokt platform.
The SDK provides optional callback events for when the view loads and unloads.
Your app dictates which consumer attributes are passed through to Rokt. More information on the data fields that are able to be passed through the SDK can be found under the Attributes section. You can add additional code lines into the below sections containing consumer attributes in order to build up the data package that will be sent through to Rokt.

Swift

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
        })
    }
}

Objective-C

#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
    }];
}

If you wish to update the view name (RoktExperience) or placement name (RoktEmbedded1) with a different value, please contact your Rokt account manager to ensure Rokt placements are configured consistently.

Step 7: Build & Run