Adding a placement

The Rokt SDK for Flutter can be used to display the overlay placement on top of your app's content.

Before you begin

Ensure that the Rokt Flutter SDK has already been integrated into your application.

Overlay placements

Importing the SDK

Import the SDK into your application's dart file:

import 'package:rokt_sdk/rokt_sdk.dart';

Executing the SDK

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

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

void executeRokt() {    // Replace RoktExperience with your viewName    RoktSdk.execute(                    viewName: "RoktExperience",                    attributes: {"email": "j.smith@example.com",                        "firstname": "Jenny",                        "lastname": "Smith",                        "mobile": "(555)867-5309",                        "postcode": "90210",                        "country": "US"},                    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                    });}

note

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

Embedded placements

Importing the SDK

Import the Rokt SDK into the JavaScript file:

import 'package:rokt_sdk/rokt_sdk.dart';

Adding RoktWidget to your view

Add RoktWidget into build function of your view. The Rokt widget will be injected into this placeholder when the execute method is called:

const RoktWidget(placeholderName: "RoktEmbedded1")

Please make sure that the view is created on the visible area of the screen and then call showWidget. RoktWidget has a callback to notify when widget is created which could be utilized.

RoktWidget(placeholderName: "RoktEmbedded1", onWidgetCreated: () { showWidget() })

Executing the Rokt Flutter 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 included in your Rokt integration. More information on available data fields can be found on the attributes page. If you want to integrate more attributes, you can add additional lines of code for each new attribute to the samples below.

void executeRokt() {    // Replace RoktExperience with your viewName    RoktSdk.execute(                    viewName: "RoktEmbeddedExperience",                    attributes: {"email": "j.smith@example.com",                        "firstname": "Jenny",                        "lastname": "Smith",                        "mobile": "(555)867-5309",                        "postcode": "90210",                        "country": "US"},                    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                    });}

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 or placeholderName ("RoktEmbedded1"), please work with the Rokt team to ensure matching adjustments are made within the Rokt system.