Walkthrough
Overview
A Walkthrough is a scrollable set of pages that covers the entire screen.
The pages of the walkthrough can have different layouts, same as banner:
color_as_background
image_as_background
image_with_text_atop
image_with_text_below
Configuration
Walkthrough may be shown depending on the selected mode
- Automatic mode - It fetches the Walkthrough right away. The Walkthrough will be presented over your current screen after the application launches.
- Manual mode - When you control the Walkthrough manually, you can show it anywhere at any time.
Android
You can specify Walkthrough behavior in the SDK Settings - Enable/disable automatic mode.
Also, you can specify Walkthrough behavior when the SDK initializes:
Synerise.Builder.with(this, syneriseClientApiKey, appId)
.notificationIcon(R.drawable.ic_notification_icon)
.injectorAutomatic(true)
.build();
Methods which fetch walkthrough
Note that the walkthrough is a transparent activity, so your activity’s onStop()
method may not be called.
.injectorAutomatic(true)
- Use this method to fetch the Walkthrough right away. That Walkthrough will be presented the moment it gets loaded, over your current Activity, if the ID of the walkthrough is different from previously presented.- Fetch your Walkthrough manually with
Injector.getWalkthrough()
. The walkthrough activity is launched with theFLAG_ACTIVITY_NEW_TASK
flag, so you can handle your activity stack properly. This method cancels the previous API request (if any) and then starts loading Walkthrough asynchronously. It must be called afterInjector.setOnWalkthroughListener(OnWalkthroughListener)
to receive callbacks properly.
Methods for walkthrough control
-
Injector.isWalkthroughLoaded() - Use this method to check if the walkthrough is loaded. It returns
true
if the Walkthrough is already loaded. -
Injector.isLoadedWalkthroughUnique() - Use this method to verify whether the loaded Walkthrough is different from previously presented. Every time any Walkthrough is presented, its ID is cached locally, so you can control your flow more precisely. The method returns
true
if the loaded Walkthrough is different from previously presented. If the Walkthrough is the same or not loaded, it returnsfalse
. -
Injector.showWalkthrough() - This method shows the Walkthrough if it is loaded. This method may be called anywhere in your application as many times as you want. It also returns
true
if the Walkthrough was loaded.
iOS
You can specify Walkthrough behavior in the SDK Settings - Enable/disable automatic mode.
Methods for walkthrough control
To control this behavior manually, fetch your Walkthrough with Injector.getWalkthrough()
. It must be called after setting up InjectorWalkthroughDelegate
.
You can check if a Walkthrough campaign is already loaded by using one of the following methods:
- Injector.isWalkthroughLoaded()- Use this method to verify if Walkthrough is already loaded. Returns
true
if it is loaded. - Injector.isLoadedWalkthroughUnique()- Use this method to verify whether the loaded Walkthrough is different from previously presented.
Every time any Walkthrough is presented, its ID is cached locally, so you can control your flow more precisely. The method will return
true
if the loaded Walkthrough is different from previously presented, if not the method returnsfalse
or if a Walkthrough is not loaded. - Injector.showWalkthrough()- Use this method to show the Walkthrough if it’s loaded. This method may be called anywhere in your application as many times as you want. It returns
true
if Walkthrough was loaded.
React Native
You can specify Walkthrough behavior in the SDK Settings - Enable/disable automatic mode.
Methods for walkthrough control
-
Synerise.Injector.getWalkthrough() - Use this method to control fetch your walkthrough and control this behavior manually. This method must be called after setting up
IInjectorWalkthroughListener
. -
Synerise.Injector.isWalkthroughLoaded() - Use this method to check if the Walkthrough is already loaded. Returns
true
if the Walkthrough is already loaded. -
Synerise.Injector.isLoadedWalkthroughUnique() - Use this method to check whether the loaded Walkthrough is different from previously presented. Every time any Walkthrough is presented, its ID is cached locally, so you can control your flow more precisely. The method will return
true
if the loaded Walkthrough is different from previously presented,false
if not or if a Walkthrough is not loaded. -
Synerise.Injector.showWalkthrough()- This method shows the Walkthrough if loaded. This method may be called anywhere in your application as many times as you want. It also returns
true
if the Walkthrough was loaded,false
otherwise.
Handling actions from walkthrough
Handling main actions from campaigns depends on a campaign type and operating system and it is described here.
Controlling behavior and actions
You can be notified (in the form of events) about the campaign actions in the following cases:
- When the walkthrough is successfully loaded.
- When the walkthrough could not be loaded and error has occurred.
- When the walkthrough is presented.
- When the walkthrough disappeared.
You can handle walkthrough actions by using:
- OnWalkthroughListener methods for iOS.
- InjectorWalkthroughDelegate methods for iOS.
- WalkthroughListener methods for React Native.
See the following code samples:
Injector.setOnWalkthroughListener(new OnWalkthroughListener() {
// This method is called after a walkthrough is loaded.
@Override
public void onLoaded() {
if (Injector.isLoadedWalkthroughUnique()) {
Injector.showWalkthrough();
//...
}
}
// This method is called when an error occurs while loading a walkthrough.
@Override
public void onLoadingError(ApiError error) {
//...
}
// This method is called after a walkthrough appears.
@Override
public void onPresented() {
super.onPresented();
//...
}
// This method is called after a walkthrough disappears.
@Override
public void onClosed() {
super.onClosed();
//...
}
});
Payload
{
"id": 6906526,
"type": "walkthrough",
"pages": [{
"index": 0,
"type": "color_as_background",
"header": {
"text": "Lorem Ipsum",
"color": "#384350",
"alpha": 1.0,
"size": 35
},
"description": {
"text": "Lorem Ipsum",
"color": "#384350",
"alpha": 1.0,
"size": 20
},
"image": {},
"background": {
"color": "#d377ae",
"alpha": 1.0
},
"button": {
"is_enabled": false,
"text": "CTA",
"text_color": "#384350",
"color": "#dbe0e3",
"corner_radius": 4
},
"close_button": {
"is_enabled": true,
"alignment": "RIGHT"
},
"action": {
"type": "OPEN_APP"
}
}, {
"index": 0,
"type": "image_with_text_atop",
"header": {
"text": " ",
"color": "#384350",
"alpha": 1.0,
"size": 35
},
"description": {
"text": "Lorem Ipsum",
"color": "#e3ebe3",
"alpha": 1.0,
"size": 20
},
"image": {
"url": "<URL>>"
},
"background": {
"color": "#0c0e0e",
"alpha": 1.0
},
"button": {
"is_enabled": false,
"text": "CTA",
"text_color": "#384350",
"color": "#f9fafb",
"corner_radius": 4
},
"close_button": {
"is_enabled": false,
"alignment": "RIGHT"
},
"action": {
"type": "OPEN_APP"
}
}, {
"index": 0,
"type": "color_as_background",
"header": {
"text": "Lorem Ipsum",
"color": "#384350",
"alpha": 1.0,
"size": 35
},
"description": {
"text": "Lorem Ipsum",
"color": "#384350",
"alpha": 1.0,
"size": 20
},
"image": {},
"background": {
"color": "#5e665e",
"alpha": 1.0
},
"button": {
"is_enabled": false,
"text": "CTA",
"text_color": "#384350",
"color": "#f9fafb",
"corner_radius": 4
},
"close_button": {
"is_enabled": true,
"alignment": "RIGHT"
},
"action": {
"type": "OPEN_APP"
}
}],
"is_loop_enabled": false,
"are_indicators_visible": true,
"campaign": {
"hash_id": "<<CAMPAIGN HASH>>",
"variant_id": <<VARIANT ID>>,
"type": "Mobile push",
"title": "<<CAMPAIGN TITLE>>"
}
}