Login
Status page

Help

Documentation

  1. Twixl Help
  2. More features
  3. Advanced navigation and actions: Custom URL schemes

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

Twixl Support Team Updated: - Created :

    We support the vast majority of Custom URL Schemes for apps in the Browser client, but you'll need to make changes to your code if you want them to work for the Browser Client. This article shows you how to.

    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.

    Reminder: The Twixl Browser Client is a very easy, quick and cheap solution to have an internet extension of your app so users can share your app content with others that don't have your app or to simply view app content while using a computer. However, the Twixl Browser Client does not replace fully designed websites nor has the same specific functionalities as your app might have. In case you want all features on your website, we recommend to use website builders.