Canvas 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:

<script type="text/javascript">
// Listen to events
window.addEventListener("message", (event) => {
runNativeFunctions(event);
}, false);

// Function that runs when the event is triggered
function runNativeFunctions(event) {
try {

// Check if the native functions are ready to be used
if (event.data && event.data == 'nativeFunctionsLoaded') {
// Native function can be called here
nativeFunctions.onesignalSetExternalUserId("1");
}

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

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 Canvas platform:

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");