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 the FLAG_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 after Injector.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 returns false.

• 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 returns false 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();
    //...
  }
});

Injector.setOnWalkthroughListener(object : OnWalkthroughListener() {
  // This method is called after a walkthrough is loaded.
  fun onLoaded() {
    if (Injector.isLoadedWalkthroughUnique()) {
      //...
    }
  }

  // This method is called when an error occurs while loading a walkthrough.
  override fun onLoadingError(error: ApiError) {
    //...
  }

  // This method is called after a walkthrough appears.
  override fun onPresented() {
    super.onPresented()
    //...
  }

  // This method is called after a walkthrough disappears.
  override fun onClosed() {
    super.onClosed()
    //...
  }
})

// MARK: - InjectorWalkthroughDelegate

// This method is called after a walkthrough is loaded.
// This method is invoked when the method 'SNR_walkthroughDidLoad:' is not implemented.
func snr_walkthroughDidLoad() {
  if Injector.isWalkthroughLoaded() {
    if Injector.isLoadedWalkthroughUnique() {
      Injector.showWalkthrough()
      //...
    }
  }
}

// This method is called after a walkthrough is loaded.
func snr_walkthroughDidLoad(walkthroughDictionary: [AnyHashable: Any]) {
  if Injector.isWalkthroughLoaded() {
    if Injector.isLoadedWalkthroughUnique() {
      Injector.showWalkthrough()
      //...
    }
  }
}

// This method is called when an error occurs while loading a walkthrough.
func snr_walkthroughLoadingError(error: Error) {
  print(error.localizedDescription)
  //...
}

// This method is called after a walkthrough appears.
func snr_walkthroughDidAppear() {
  //...
}

// This method is called after a walkthrough disappears.
func snr_walkthroughDidDisappear() {
  //...
}

#pragma mark - SNRInjectorWalkthroughDelegate

// This method is called after a walkthrough is loaded.
// This method is invoked when the method 'SNR_walkthroughDidLoad:' is not implemented.
- (void)SNR_walkthroughDidLoad {
  if ([SNRInjector isWalkthroughLoaded]) {
    if ([SNRInjector isLoadedWalkthroughUnique]) {
      [SNRInjector showWalkthrough];
      //...
    }
  }
}

// This method is called after walkthrough is loaded.
- (void)SNR_walkthroughDidLoad:(NSDictionary*)walkthroughDictionary {
  if ([SNRInjector isWalkthroughLoaded]) {
    if ([SNRInjector isLoadedWalkthroughUnique]) {
      [SNRInjector showWalkthrough];
      //...
    }
  }
}

// This method is called when an error occurs while loading a walkthrough.
- (void)SNR_walkthroughLoadingError:(NSError*)error {
  NSLog(error.localizedDescription);
  //...
}

// This method is called after a walkthrough appears.
- (void)SNR_walkthroughDidAppear {
  //...
}

// This method is called after a walkthrough disappears.
- (void)SNR_walkthroughDidDisappear {
  //...
}

Synerise.onReady(function() {
  Synerise.Injector.setWalkthroughListener({
    // This method is called after a walkthrough is loaded.
    onLoad: function() {
      //...
    },
    // This method is called after a walkthrough appears.
    onPresent: function() {
      //...
    },
    // This method is called after a walkthrough disappears.
    onHide: function() {
      //...
    },
    // This method is called when an error occurs while loading a walkthrough.
    onLoadingError: function(error) {
      //...
    }
  })
});

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>>"
  }
}