Category: Development

Vendrux apps include a Javascript API built into their source code, allowing your website to trigger certain in-app actions using Javascript functions.

The Native Functions are not available for use until your page is fully loaded within the app, for that reason when a page loads in the app we trigger an event, which tells us that the Javascript API is ready to be used. You will want to listen to that event to make sure the functions are called at the right time, preventing errors in your application.

Here you can see an example of how to listen to the event triggered by the app:

>
try {
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();

    // Check if the user agent contains the string "canvas"
    if (userAgent.indexOf('canvas') > -1) {
        // Run the code only if "canvas" is present in the user agent
        nativeFunctions.onesignalSetExternalUserId("1");
    }

} catch (ex) {
    // Log any error messages for easier debugging
    console.log(ex.message);
}

We have also prepared a sample page that can be used in your app for testing the native functions, or if you prefer, you can copy its code and add it to your website directly, you can find the page here: https://mobiloudsupport.github.io/nativefunctions/

Below you can find a list of all the available native functions in the Vendrux platform:

>
try {
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();

    // Check if the user agent contains the string "canvas"
    if (userAgent.indexOf('canvas') > -1) {
        // Run the native functions only if "canvas" is present in the user agent
        nativeFunctions.login();
        nativeFunctions.logout();
        nativeFunctions.onesignalSendTags("1", "2");
        nativeFunctions.onesignalDeleteTags("1", "2");
        nativeFunctions.onesignalSetEmail("user@email.com");
        nativeFunctions.onesignalLogoutEmail();
        nativeFunctions.onesignalRemoveExternalUserId("user ID");
        nativeFunctions.onesignalSetExternalUserId("user ID");
    }

} catch (ex) {
    // Log any error messages for easier debugging
    console.log(ex.message);
}

If you would like to remove the external user ID from a user profile in OneSignal you can trigger the nativeFunctions.onesignalRemoveExternalUserId() function.

This can be helpful in case you don’t want users that are not logged in to receive push notifications, for example.

If that is the case, whenever you log a user out of his account you would also call the nativeFunctions.onesignalRemoveExternalUserId() function, as follows:

>
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();
    
    // Set the user ID
    var userId = "1";

    try {
        // Check if the user agent contains the string "canvas"
        if (userAgent.indexOf('canvas') > -1) {
            // Native function can be called here
            nativeFunctions.onesignalRemoveExternalUserId(userId);
        }
    } catch (ex) {
        // Log any error messages for easier debugging
        console.log(ex.message);
    }

Welcome to our Vendrux documentation area, here you will learn more about how to trigger actions programmatically inside the app, and find guides and resources on how to take the most out of your app.

This area is dedicated to developers and users with some familiarity with programming languages.

If you are looking for a way to customize the design of your website inside the app, check out our “Custom CSS” guide.

Otherwise, if you want to trigger specific actions inside the app start by looking into our guide about “Native functions”.

If your app is configured to require users to log in before they can access the content, and you are already using the nativeFunctions.login() to log users in, you will want to implement the nativeFunctions.logout() function as well.

When triggered, the nativeFunctions.logout() will clear all cookies and sessions in the app, and reload the app, taking the user back to the login screen.

Imagine a situation where while browsing your app the user gets logged out because his cookies expired, if the nativeFunctions.logout() function is not triggered the user will see your website’s error messages for blocked content, and the user experience might get confusing for the user.

Instead, you should take the user to the login screen so he can provide his credentials and re-login accordingly.

You can call the nativeFunctions.logout() after you have confirmed that the user is not logged in:

>
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();

    // Log the user out directly if the user agent contains 'canvas'
    function appLogout() {
        try {
            // Check if the user agent contains the string "canvas"
            if (userAgent.indexOf('canvas') > -1) {
                nativeFunctions.logout();
            }
        } catch (ex) {
            console.log(ex.message);
        }
    }

Vendrux allows you to display a login screen when the app is opened, requiring users to log in before they can access the app content.

In order to dismiss the login screen after a successful login, you can use the “login” native function.

By calling the nativeFunctions.login() function the app will immediately dismiss the login screen and reload the app, updating all the content for the user who is now logged in.

Here is an example of how to use the login native function:

>
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();
    
    // Set the user ID
    var userId = "1";

    // Log the user in directly if the user agent contains 'canvas'
    function loginApp() {
        try {
            // Check if the user agent contains the string "canvas"
            if (userAgent.indexOf('canvas') > -1) {
                nativeFunctions.login();
            }
        } catch (ex) {
            console.log(ex.message);
        }
    }


button onClick="loginApp()">Log me inbutton>

Keep in mind that dismissing the login screen and updating the content is all that the app does in this case, cookies and sessions should still be managed by your website.

You will also want to trigger the “logout” event when a page is loaded and the user is logged out, so the app can display the login screen again.

Vendrux allows you to pull certain information from the current user programmatically using an object that is generated on every page load inside the app.

The object name is called “mobiloudAppInfo” and you can call it using the following piece of code:

>
    var userObject = window.mobiloudAppInfo;
    console.log('User Push Token: ' + userObject.pushToken);

Alternatively, if you prefer to use native functions to request the user information, you can use the following piece of code:

>
    var userObject = nativeFunctions.getDeviceInfo();
    console.log('User Push Token: ' + userObject.pushToken);

The parameters that are available in that object will look as follows:

var mobiloudAppInfo = {
    appId: string,
    appVersion: string,
    brand: string,
    hardware: string,
    manufacturer: string,
    model: string,
    nameos: string,
    osVersion: string,
    platform: string,
    pushSubscribed: boolean,
    pushToken: string,
    pushUserId: string,
    timeZone: string
};

If you would like to remove tags from a user profile in OneSignal you can call the nativeFunctions.onesignalDeleteTags() function.

When a user opts out of notifications for promotional content, for example, you can call the nativeFunctions.onesignalDeleteTags() function, as follows:

>
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();

    // Remove a tag directly if the user agent contains 'canvas'
    function removeTag() {
        try {
            // Check if the user agent contains the string "canvas"
            if (userAgent.indexOf('canvas') > -1) {
                nativeFunctions.onesignalDeleteTags("promotions");
            }
        } catch (ex) {
            console.log(ex.message);
        }
    }

Note that you can also delete multiple tags at once, using nativeFunctions.onesignalDeleteTags(“tag1”, “tag2”, “tag3”)

If you’d like to be able to segment your users based on specific interests or categories when sending push notifications you can use the nativeFunctions.onesignalSendTags() functions to add tags to your users in OneSignal.

If a user enables an option on your website, to receive promotional messages, for example, you could trigger the native function to add the “promotions” tag into his OneSignal profile.

Later on, when sending promotions to your users, you would then be able to target all those users who have the “promotions” tag in their profiles.

Here is an example on how to trigger the native function:

>
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();

    // Add a tag directly if the user agent contains 'canvas'
    function addTag() {
        try {
            // Check if the user agent contains the string "canvas"
            if (userAgent.indexOf('canvas') > -1) {
                nativeFunctions.onesignalSendTags("promotions");
            }
        } catch (ex) {
            console.log(ex.message);
        }
    }

You can find more details on how to use tags in OneSignal, here: https://documentation.onesignal.com/docs/add-user-data-tags

In order to be able to send transactional, or user-specific notifications to your users, you will need a way to identify which device belongs to each which user.

The nativeFunctions.onesignalSetExternalUserId() function allows you to assign a custom ID to the device in OneSignal, which can be the same ID used on your website to identify users, making it very easy for you to know to whom a specific device belongs, and allowing you to send user-specific notifications to that user.

We recommend triggering this function whenever you perform a check to see if the user is logged-in, so you can assign his user ID to OneSignal accordingly, here is an example of how to implement the Javascript code:

>
    // Get the user agent and convert it to lowercase for case-insensitive comparison
    var userAgent = navigator.userAgent.toLowerCase();
    
    // Get the user ID
    var userId = "1";

    try {
        // Check if the user agent contains the string "canvas"
        if (userAgent.indexOf('canvas') > -1) {
            // Native function can be called here
            nativeFunctions.onesignalSetExternalUserId(userId);
        }
    } catch (ex) {
        // Log any error messages for easier debugging
        console.log(ex.message);
    }

OneSignal has a nice guide with more details on how to send those push notifications using the OneSignal REST API, you can find it here: https://documentation.onesignal.com/docs/transactional-messages