Rokt Documentation
  • Documentation
  • User Guide
  • SDK
  • API
  • Third-Party Integrations
  • Help

›Integrating the SDK

Getting Started

  • Introduction

Web SDK

  • Overview
  • Architecture
  • Integrating the Web SDK
  • Integration Examples

    • Confirmation Page Integration
    • Preparative Iframe
    • Page Identifier
    • Single Page Applications
    • Brand Conversion Integration
    • In Transaction/Cart Integration
    • Event-based Integration
    • Sandbox Integration
  • Integration Best Practices
  • Attributes
  • Security
  • Mobile In-App Web Pages
  • API

    • README
    • Globals

    Enumerations

    • FailureReason

    Interfaces

    • Attributes
    • Cart
    • CartItem
    • PlacementCloseEvent
    • Rokt
    • RoktConfiguration
    • Widget

iOS SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration
  • Attributes
  • Security

Android SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration

    Attributes

    • Core Attributes
    • Vertical Attributes
  • Security

React Native SDK

  • Overview
  • Version
  • Integrating the SDK

    • Integrating and Initializing the SDK
    • Launching an Overlay Placement
    • Launching an Embedded Placement
    • Recording a Brand Conversion
    • Sandbox Integration

    Attributes

    • Core Attributes
    • Vertical Attributes
  • Security
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:

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

RoktEmbeddedView

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

← Launching an Overlay PlacementRecording a Brand Conversion →
  • Step 5: Modify Storyboard
  • Step 6: Execute the Rokt SDK for iOS
  • Step 7: Build & Run
RESOURCES
DocumentationUser GuideSDKAPIIntegration PartnersHelp
COMPANY
About UsContact UsCareersEngineering Blog
Rokt Documentation
Copyright © Rokt 2021 - All Rights Reserved