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

    • Rokt
    • Attributes
    • CartItem
    • Configuration
    • Placement
    • Subscriber
    • TriggerPageChangeOptions
    • Unsubscriber

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
  • 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
  • Security
Edit

Launching an embedded placement

For Rokt partners, the Rokt SDK for React Native can be used to display embedded placements within your application’s content.

Before you begin

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

Importing the Rokt SDK into the JavaScript file

Import the Rokt SDK into the JavaScript file:

import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";

Creating a placeholder reference

Create a placeholder reference in your JavaScript file:

 constructor(props){
    super(props);
    this.placeholder1 = React.createRef();
  }

Adding RoktEmbeddedView to your view

Add RoktEmbeddedView into render(). The Rokt embedded placement will be injected into this placeholder when the execute method is called:

<RoktEmbeddedView ref={this.placeholder1} placeholderName={"RoktEmbedded1"} ></RoktEmbeddedView>

Executing the Rokt React Native SDK

Execute the SDK at the desired point by sending the appropriate customer attributes. The Rokt placement then display after a short delay that is configurable via the Rokt platform.

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 sample below.

placeholders = {
      "RoktEmbedded1": findNodeHandle(this.placeholder1.current)
}

attributes = {
      "email": "j.smith@example.com",
      "firstname": "Jenny",
      "lastname": "Smith",
      "mobile": "(323) 867-5309",
      "postcode": "90210",
      "country": "US"
}
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders,  () => console.log("Placement Loaded"));

Note: The ViewName (“RoktEmbeddedExperience”) can be modified when executing the SDK in multiple locations. This configuration allows you to display a different experience according to the context of where in the app the SDK is being executed. If modifying the ViewName, please work with the Rokt team to ensure matching adjustments are made within the Rokt system.

← Launching an overlay placementRecording a brand conversion →
  • Before you begin
  • Importing the Rokt SDK into the JavaScript file
  • Creating a placeholder reference
  • Adding RoktEmbeddedView to your view
  • Executing the Rokt React Native SDK
RESOURCES
DocumentationUser GuideSDKAPIIntegration PartnersHelp
COMPANY
About UsContact UsCareersEngineering Blog
Rokt Documentation
Copyright © Rokt 2021 - All Rights Reserved