Create deeplinks on Webflow hosted website

Hello guys.

We need to update our website to handle deeplinks in our app. The idea is to use the website to, first, redirect people than don’t have the app yet to the app store / play store or open the app for the guys who ave the app installed. Basically, our deeplinks will look like this “tribe://addcontact/XXXX”. So we would like to first redirect people here “http://tribe.pm/pin/XXXX”. On this page, we detect whether the user have the app installed or not and then redirect him to app store or “tribe://addcontact/XXXX”

Is this something you are familiar to ? How should I proceed to create new functions to the website ?

Thank you guys.

Hi @laurentdesserre

On your “http://tribe.pm/pin/XXXX” page, have you tried adding a custom script to the head tag to detect the app?

Can I give access to a friend to edit the “Custom code” section ? Can’t find how.

Sorry :frowning: You cannot. The custom code is only editable by the site admin/designer through the Designer tool. Not the front-end CMS editor panel.

Hey @PixelGeek, @cyberdave, @vincent !

Sorry for the late reply. We’ve been experimenting.

Everything we tried worked. But with an URL that looks like this: tribe.pm/?pin=0003.
We’ve been able to detect URL parameters and use them to redirect.

What we want now is to move to an URL that looks like this: tribe.pm/pin/0003.

Any idea how we could make it automatically?

Thank you very much.

FYI, here is below the code used to detect the parameters:

 function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

Hi @laurentdesserre

This article may help:
http://stackoverflow.com/questions/7573566/iphone-browser-checking-if-iphone-app-is-installed-from-browser

Also, try to add this in a EMBED component:

<script type="text/javascript">
window.onload = function() {
	// Deep link to your app goes here
	document.getElementById("l").src = "my_app://";
            setTimeout(function() {
			// Link to the App Store should go here -- only fires if deep link fails                
			window.location = "https://itunes.apple.com/us/app/my.app/id123456789?ls=1&mt=8";
		}, 500);
	};
</script>
<iframe id="l" width="1" height="1" style="visibility:hidden"></iframe>

@PixelGeek

Now I’m facing a new issue. If it try to use url like this “/pin/XXXX” instead of “/?pin=XXXX”, my code to redirect doesn’t seem to be executed. Indeed, the page “pin”, doesn’t exist on the website so the code in “custom code” section is not executed. Is there a way to achieve that ? I mean catching all the URL that start with http://tribe.pm/ (for instance http://tribe.pm/any/page/linked) and programmatically handle deeplinks to our app.

Thank you very much

@PixelGeek

Can we use the 301 Redirect feature maybe?

Thanks!

Hi @laurentdesserre, the 301 redirects probably will not work in this case, as the redirect path does not support characters, i.e. the “?” is one that is not supported yet. See more here: 301 redirects and query string parameters - Product feedback - Forum | Webflow

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.