Login

Learning & Support

Documentation

Custom URL Schemes: How to use the HTML articles in the Browser Client?

Twixl Support Team Updated: - Created :

We support the vast majority of Custom URL Schemes for article-based apps, but you'll need to adapt your code if you want them to work in the Browser Client. This KB-article explains how to do this.

Suppose you have this basic HTML-article:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Browser Client Test</title>
</head>
<body>

    <h1 id="title">show collection</h1>

    <script>

        function isBrowserClient() {
            try {
                if (window.name.slice(0, 4) == "twx-") {
                    return true;
                } else if (window.location.hostname.indexOf("twixlmedia.com") > 0) {
                    return true;
                }
            } catch (exception) {
                return false;
            }
        }

        function goToURL(url) {
            if (isBrowserClient()) {
                twxHandleURL(url);
            } else {
                window.location.href = url;
            }
        }

        var title = document.getElementById("title");
        title.addEventListener('click', function() {
            goToURL("tp-collection://hidden-collection");
        });

    </script>

</body>
</html>

When you want to support the Custom URL Schemes in a HTML document, you will need to use JavaScript to load the URL. We've made two extra functions in the sample below to help with this:

function isBrowserClient() {
    try {
        if (window.name.slice(0, 4) == "twx-") {
            return true;
        } else if (window.location.hostname.indexOf("twixlmedia.com") > 0) {
            return true;
        }
    } catch (exception) {
        return false;
    }
}

This function checks if the HTML is loaded via the Browser Client or if it's loaded in a mobile app.

function goToURL(url) {
    if (isBrowserClient()) {
        twxHandleURL(url);
    } else {
        window.location.href = url;
    }
}

This function is a helper to make loading a URL work in both the mobile apps and in the browser client. If it's the Browser Client, we need to use the function twxHandleURL (which is always available in the browser client). If it's a mobile app, you can just navigate to the new URL.

The last piece will depend on how you've constructed the HTML:

var title = document.getElementById("title");
title.addEventListener('click', function() {
    goToURL("tp-collection://hidden-collection");
});

In our example, we are using plain JavaScript to handle the click event on the title element. When the user taps or clicks on the title element, it will navigate to the Collection named hidden-collection.

Was this article helpful?

0 out of 0 found this helpful