IOS Part:

The custom screen feature in our iOS SDK is a versatile tool that allows you to integrate unique designs and functionalities into your onboarding sequence that are not natively supported by our system. Here’s how you can effectively use and customize the custom screen:

Setting Up a Custom Screen:

Screen Positioning in the Theme Template:

Find the custom screen at the end of the list next to the Flow screen.
Drag and drop the custom screen template onto the flow to place it at the beginning, middle, or end of the onboarding sequence.
Connect Custom screen with others

Customizing Parameters on the Screen:

Screen Name:

Rename the screen in your SDK to match the title used in the code (details on renaming in a specific article).

Inputs List Definition:

Purpose: Manage user transitions based on their input on the custom screen and collect analytics.

Adding Inputs:

Click "ADD" in the Input row
Enter the input name.
Select the input type (string, int, or double).
Click "ADD" to finalize

Note: Add as many inputs as needed, each with a unique name. To edit an input, delete and add it again.

User Input Handling: Inputs are managed by the service (see SDK integration guide for technical details).

Labels List Definition:

Purpose: If your custom screen supports text, name its label and add the same name in the service for online configuration.

Adding Labels:

Click "ADD" in the labels row
Enter the label name.
Click "ADD" to finalize.

Text Element Handling: Text elements are managed by the service (see SDK integration guide for technical details).

Text Configuration: Here you can specify the text that will be displayed on that label on your custom screen by entering text in the text field and adjust the visual aspects of your text (refer to the related article for more details).

Note: Add as many labels as needed, each with a unique name. To edit an input, delete and add it again.

Web:

1. Screen Positioning in the Theme Template:

Find the custom screen at the end of the list next to the Flow screen.
Drag and drop the custom screen template onto the flow to place it at the beginning, middle, or end of the onboarding sequence.
Connect Custom screen with others

2. Open the template editing and select the platform type as "web".

3. Add a web template.

4. Select the template type: HTML or URL.

5.1 If you want to add the HTML type, click the "EDIT HTML" button.

- Review the example and guidelines.

- Insert your script.

- Save the script.

- Check the display on different types of devices (since you are implementing the logic for screen display and behavior, we are not responsible for it).

!!! Don’t forget to implement the logic to hand over control to the onboarding process(next screen action) after your custom code receives the necessary trigger from the user (e.g., button click, server response, timer, etc.).

Embedding and Headers Requirements

For work involving URL, it is necessary to provide the ability to embed the page on our domain web.onboarding.online or on a custom project domain.

Access-Control-Allow-Origin: web.onboarding.online

Content-Security-Policy: frame-ancestors 'self' https://web.onboarding.online

X-Frame-Options: ALLOW-FROM https://web.onboarding.online

This will allow us to embed your page in an iframe of our service and exchange data.

If the onboarding is served on a custom domain (e.g., custom.domain), the headers should be as follows:

Access-Control-Allow-Origin: custom.domain

Content-Security-Policy: frame-ancestors 'self' https://custom.domain

X-Frame-Options: ALLOW-FROM https://custom.domain

Please note that all resources used in the HTML section (including those accessed via URL) must also be available for embedding on the domain web.onboarding.online or the project's custom domain.

Custom Screens via URL

If you are using custom screens via URL, it is necessary to embed the following code to accept parameters from the main flow and send the results back:


<!-- DO NOT REMOVE THIS CODE -->

<script>

  window.onboardingOnlineCustomScreenData = {

    inputs: {},

    labels: {},

    userData: {},

    customData: {}

  };

  window.leaveCustomScreen = () => {};

  window.onmessage = (event) => {

    if (typeof (event.data) === 'object' && event.data.eventName === 'InitCustomScreen') {

      window.onboardingOnlineCustomScreenData.inputs = event.data.args.inputs;

      window.onboardingOnlineCustomScreenData.labels = event.data.args.labels;

      window.onboardingOnlineCustomScreenData.userData = event.data.args.userData;

      window.onboardingOnlineCustomScreenData.customData = event.data.args.customData;

      window.onboardingOnlineCustomScreenData.webOnboarding = event.data.args.webOnboarding;

      window.onboardingOnlineCustomScreenData.incomeUserData = event.data.args.incomeUserData;

      window.onboardingOnlineCustomScreenData.language = event.data.args.language;

      window.onboardingOnlineCustomScreenData.screenId = event.data.args.screenId;

      const port = event.ports[0];

      if (port) {

        window.leaveCustomScreen = (args) => {

          port.postMessage({

            eventName: 'LeaveCustomScreen',

            args,

          }, []);

        };

      }

    }

  };

</script>

<!-- OO-PORT-MESSAGE-HANDLER-END -->

Incoming Parameters

This code accepts incoming parameters from the onboarding flow and initializes the function to exit the screen.

List of incoming parameters:

- inputs - list of parameters for the current custom screen

- labels - list of labels for the current custom screen

- userData - current list of user responses across screens

- customData - custom user parameters

- webOnboarding - original onboarding flow

- incomeUserData - IP + User Agent

- language - current language

- screenId - current Screen ID

Inputs

This section allows you to add parameters that the custom screen will return as a result. These parameters can then be used in the rules system.

For example, if the custom screen includes a field for email and you need to return this in userData for use in navigating to the next screen:

You need to create a new input named email and specify its type as string (supported types are string, int, double).

Then, once the user has completed the custom screen, you need to return control to the onboarding flow by calling the function:

leaveCustomScreen({ email: '{UserEmail}' })

and passing the email information (the names must match).

Next, click save and exit to the flow. By adding a new screen linked to the custom screen, you will see that conditions can be added using the data from the custom screen.

Labels

This section transmits additional text elements of the screen with settings. However, this is more useful for iOS and may not be relevant for the web.

UserData

This will include the result of the entire user survey across screens.

For example, if there is a table on screen2, the user's selection from the table will be available at userData.screen2.list.

Or if there are subscriptions on screen1, the user's selection will be available at userData.screen1.subscriptions.

CustomData

Here, the user is given the ability to use any parameters.

5.2 If you want to add the URL type:

- Add the URL.

- Check the display on different types of devices (since you are implementing the logic for screen display and behavior, we are not responsible for it).

6. Save the template.

7. Create or update the onboarding link.

8. Check the display across different resolutions, browsers, and operating systems.

Testing and User Segmentation:

Testing Custom Screen: For guidance on testing your custom screen in the app, refer to a dedicated article.
User Segmentation: Learn how to segment users based on their input in another detailed article.

By following these guidelines, you can create a tailored onboarding experience that aligns perfectly with your app's needs, offering custom functionalities and designs that enrich user interaction and engagement.