Better Deep Linking

¯_(ツ)_/¯

I need more details to know if this will work. To be frank, I’m not sure what @HApp did… I saw his message, took a guess, and guessed right it sounds like.

What are you trying to do?

Are you using the Adalo standard Stripe checkout? With Stripe connect? Native or web?

A little more information about what you are doing, how you are doing it, and what you want the results to be will be very helpful in answering your question.

I will make a topic about what I did with your component, thanks again!

By the way, sorry for off topic question… is it technically possible to make text component with text options 1,2,3,4 etc. and different conditions for displaying 1,2,3,4

Now it is a huge problem in adalo because in order to show different texts in different conditions one have to add a lot of text components to the screen and play with Visibility of the component… This makes the small app screen visually overwhelmed and hard to manage…

Thanks in advance!

With just a little touch of Javascript you can accomplish this easy, something like

1 Like

Thanks a lot! I will try this! Thanks for your work!

Great work! Can this deep linking be used for notifications?
I want to take my user to a particular list item for which the notification was triggered.

Steven,

So I’m building out full Stripe payment integration via APIs (you may recall). I’m using Stripe Checkout to create a hosted payment session. The API creates a payment session hosted by Stripe and returns the URL. I’m then opening the webpage URL which opens from the Adalo app. Upon payment completion or cancelation the Stripe page returns to specified (success or cancel) URL. The Stripe API doc is here: Stripe API reference – Create a Session – curl

I was planning on using your deep linking component to return back to my Adalo app. But if your Better Webview component works better, then I’d use that.

I’m on vacation currently so haven’t been able to test it, but will when I can. But thought I’d ask if you think your component would work.

Edit: The Stripe checkout page link does not seem to display correctly in Better Webview (at least in preview mode). Note it does load in a standalone browser window.

Thanks!

If you are using the Better WebView for checkout, then certainly what HApp did will work for your case. I will have a look at the current webview, I am pretty sure I made them identical but gave extra features, but I might have missed something. I will let you know. Enjoy your vacation and I will see you in 2022

1 Like

No, this does not really work for notifications. I did draft a proper notification system that supports deep link notifications and the other cool stuff like images and colors, but I don’t think Adalo would appreciate me completing the project as it is pretty invasive to their current system.

All that to say, I think you will need to wait until Adalo implements deep linking and then deep linking for notifications before you will be able to do that.

1 Like

@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.