Better Deep Linking

@TKOTC so I’m not quite sure I understand how deep linking works. Per above, I create a Stripe checkout session link that returns a checkout URL that is opened in my app. Using default Adalo external link method pops open a window in the app and allows user to enter their credit card details.

The checkout session API needs two URLs for success and failure that the checkout page will return to.

I assumed I would simply add your deep linking component on a success and failure page in Adalo and then use those URLs (which I think you said could be anything?) for the required links. But that doesn’t seem to work and the Stripe hosted page fails to get back to Adalo page (it can’t find the URL).

If I need to use the Better WebView component too, what do I use as the success and failure URLs? How exactly do I use it in @HApp process which I think is the same as what I’m trying to do…

Thanks!

The way it works in my App:

I have a 3-d party payment provider that handles the payments. This provider allows me to create custom pages for goods. I have created custom pages that replenish the balance. This page has certain url (for example: https://paytoday.com?50usdtobal)

My payment provider also allows me to create additional 2 custom links for redirects in cases:
1 payments success
2 payment failure

I can create any custom link for success and for failure with any unique words I want.
For example I create links:
payments success - https://paytoday.com?50usdok
payment failure - https://paytoday.com?50usdfail

How to use this concept:

I place Better Webview component on the screen and show the first link for certain goods.
https://paytoday.com?50usdtobal

Then I set the settings of the component to Link to certain page (navigate to certain page in Adalo app) if the link in BetterWebView contains words:

If link contains words: 50ok - navigate to certain Adalo page in my App (already existing page, set up to perforn actions when payment is successful)

If the link contains words: 50fail - navigate to certain Adalo page in my App (already existing page, set up to perforn actions when payment is failed)

We don’t use Deep linking at all! All the navigation is made based on the uniqe words in links for payment sucess and failure!

First user will see the link that shows certain good and will try to pay for it / replenish balance, etc…

Based on the result of user’s action Better Webview Component will navigate user to certain page inside Adalo App (not through deeplinks or url and so on).

1 Like

@HApp Thank you! That makes sense. I will try doing how you suggested.

You can only really test once app is published, correct?

Edit: well it works! Thanks @TKOTC and @HApp!

1 Like

:confetti_ball: :confetti_ball: :confetti_ball: :tada: :tada: :tada:

1 Like

@TKOTC so one teeny tiny little thing… :blush:

The web view screen isn’t centered in the app display, but it’s centered in the designer. Any ideas why it’s offset to the side?

My guess is that it is related to

I think Adalo sticks everything to the top of the screen, so if your screen is longer than the editor screen it will cause this. If you scroll a couple of messages lower in the link above @dilon_perera gives a pretty nice workaround for the problem. However, this only works if the component is full screen.

So, if your better webview component is the entire screen, and the pay button is centered in the webview, the trick Dilon shows should fix the issue (make the screen bigger than a normal screen so Adalo will scale it properly). If you have centered the better webview in the center of the screen so it perfectly shows the pay in the center then this trick will not work.

A very technical solution could be, rather than using a url for the webview, use HTML along side the trick Dilon explains, and it should work. Something like

<div style="width: 100%; height: 100%; display: grid; align-content: center; justify-content: center">
  <iframe src="YOUR_PAYMENT_LINK"></iframe>
</div>

it might take a little adjusting.

If your webview is not the size of the screen, and Dilons trick does not work. It will probably be better to ship as is with it off-center. I do not think you will lose customers over it. Accept it as a limitation to using a No-Code platform.

2 Likes

Awesome, will give that a shot on my next build! Thank you :cocktail:

Sorry for offtopic question…

Can you please help me? I want to use your javascript component to make a script that will play audioplayer (placed on screen) when certain button is pressed but I have problems with that…

Sorry @HApp , I saw your question a few days ago and put this video together, but I was unable to get the screen recorder I was using to record the system audio, then I got sidetracked on other things I was doing.

In the video I use the Arbitrary Javascript component to stream an mp3 from wikipedia and don’t show the who set to true trick I use in most of my components. This should get you going in any case

2 Likes

Thanks for your help!)

@TKOTC can I use your Javascript component to conditionally display an Adalo button?

I want to display a button only if multiple fields in a collection are true/exist/equal something. Basically, can I use it to conditionally display a button with and/or conditions? In Adalo currently I can obviously only set one condition, this would be an awesome workaround!

Thanks!

You certainly can. Have a look at this first and see if it will suit your needs. I think this is a simpler solution. If this does not I can certainly whip up a video showing a complex and/or logic with multiple magic text.

Thanks Steven! Not sure it solves it though? In my case, I want to display a button only if three conditions are met:

  1. Field X in user collection is not empty AND
  2. Field Y in user collection = Field Z in another collection AND
  3. Text field on page (although it could be another field in user collection) = 1 (basically set by a toggle)

Is this a job for Arbitrary Javascript or can it be done natively? Thanks!

Any news about how it can work on web apps?

@TKOTC I remember you told me you will add a deep-ish link for web apps. Any news?

@TKOTC Steven, so I’ve been testing your better deep linking and Webview components and they seem to work well (thank you!), except for two things:

I use your webview component to access Stripe hosted pages. First for a Stripe Connect account setup and second for credit card payments. The Stripe link is generated via API calls, which returns the required URL. In both cases I save the URL in the relevant collection which is then used in the Webview URL magic text field.

However, when launching the web view, I get the follow screen which lasts for a second or two, then actually does open the right screen (this is the Connect account link):

Then on the payments screen, it launches fine, but upon exit, when it navigates back to the success screen, I see this:

I have both a Better Deep Linking link on that page (which is passed to Stripe and which Stripe then attempts to open) and also a link via the “Check which link was clicked” which links to the same modal.

Any thoughts about what’s going on?

Also, not sure if I should be using either better deep linking or just webview or both like I am.

Thanks!

My understanding is this is only for mobile apps and not web apps, correct? Is there a workaround to make this available for web?

@TKOTC Steven could you help with this last issue? I think I’ve managed to fix everything else through trial and error, but this one is stubborn…

I have a series of custom actions to setup a Stripe Connect account. The process generates a link that needs to be displayed to the end user. I save the link that is returned from Stripe in a collection, then open that link from your webview component. However, a screen with an error appears for a couple of seconds first, but then it does successfully navigate to the correct Stripe hosted screen.

Here is the Webview screen

Any ideas why this might be happening?

Thanks!

Hi Kimberly,

This is only for mobile apps. There is no ability to launch a PWA via a custom link because that is managed by the manifest.json from Adalo.

For vanilla websites, depending on what you want to do, there are some things that can help. I am not sure of your technical abilities, so if this is not clear feel free to ask for further clatification.

If you want to link directly into, lets say, a user profile screen on a website you built then you can certainly make links that do that. Here is a simple setup to start testing.

Create a website and publish it on a proper url. I have created one here https://pragmaflow.adalo.com/web-test. I put no effort, please do not judge.
The home screen is at this url
https://pragmaflow.adalo.com/web-test?target=efwzqplp5oy4ugyo8b6h7o559&params={}
Clicking on Screen 1 button will take you to
https://pragmaflow.adalo.com/web-test?target=8i168812vppyh1hf9c82b3c8d&params={}
Clicking on a user email will take you here
https://pragmaflow.adalo.com/web-test?target=0f54kc276e7nplb0hugjsuytn&params={"acqrx6wtn8rudjihrunzsaq3f.t_528a2f29f83c4fabb41b4a8d661e0840"%3A2}

So, there are 2 things we see on a published website. A target and params, these are what you will manipulate for your ‘deep links’. Every screen has an id which is the target, for the app I built these are
Home: efwzqplp5oy4ugyo8b6h7o559
Screen 1: 8i168812vppyh1hf9c82b3c8d
Screen 2: 0f54kc276e7nplb0hugjsuytn

so if I wanted to send a user to screen 1 directly I would give them a link https://pragmaflow.adalo.com/web-test?target=8i168812vppyh1hf9c82b3c8d

Now screen 2 has “Available Data” in the App editor, which means it needs parameters as seen above. If you paste the link into URL Decoder/Encoder and decode the link we see this
https://pragmaflow.adalo.com/web-test?target=0f54kc276e7nplb0hugjsuytn&params={"acqrx6wtn8rudjihrunzsaq3f.t_528a2f29f83c4fabb41b4a8d661e0840":2}

Target is the screen above, but we have params of
acqrx6wtn8rudjihrunzsaq3f.t_528a2f29f83c4fabb41b4a8d661e0840
and
2

this breaks down to the datasource as acqrx6wtn8rudjihrunzsaq3f, and the table where the data is stored t_528a2f29f83c4fabb41b4a8d661e0840, finally the 2 is the record id. In english this equates to “I want a record with id 2 from the users table in my database”

So, if I wanted to deep link someone into record 1, I would change the 2 to a 1
https://pragmaflow.adalo.com/web-test?target=0f54kc276e7nplb0hugjsuytn&params={"acqrx6wtn8rudjihrunzsaq3f.t_528a2f29f83c4fabb41b4a8d661e0840":1} and then encord the params making a final link of
https://pragmaflow.adalo.com/web-test?target=0f54kc276e7nplb0hugjsuytn&params=%7B%22acqrx6wtn8rudjihrunzsaq3f.t_528a2f29f83c4fabb41b4a8d661e0840%22%3A1%7D

Now, if the goal is to add some extra information for a marketing campaign or things like that, we can do that as well. We just append the URL with the extra data like this
https://pragmaflow.adalo.com/web-test?target=8i168812vppyh1hf9c82b3c8d&marketingId=123

So we have a new parameter called marketingId and we can use the Arbitrary Javascript component to grab the marketingId so we can do something with it
https://vimeo.com/manage/videos/664437452

2 Likes

I would need to see what Association link actually is. From the error message the association link is not actually a url.