Edit

Launching an embedded elacement

The Rokt SDK for iOS can be used to display a Rokt placement embedded in your app’s content.

Before you begin

Ensure that the Rokt Android SDK has already been integrated into your application following the steps listed here.

Modifying your 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, 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.

1. Place RoktEmbeddedView as the Class of view and Rokt_Widget as Module.

2. Define the top constraints.

3. Define the leading constraints.

4. Define the trailing constraints.

5. Choose height and width constraints.

6. Set the height constraint.

7. Add constraints to view.

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

Executing the Rokt SDK for iOS

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.

You can dictate what customer attributes are shared with Rokt. More information on available data fields can be found on the Attributes page. If you want to share more attributes, you can add additional lines of code for each new attribute to the samples below.

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.

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

Note: If you wish 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.