Redirecting mobile users

Ask the community
1

I want to have a separate page that is designed only for mobile users, with previews and certain abilities - but also nudging them towards using the desktop full version.

Is there a way of making all mobile users be sent to a certain page when they sign in?

2

Mobile and desktop can both be sent to the same page but see different blocks based on the block visibility configurations for desktop/tablet/mobile.

You can have two pages in 1.

3

I know, but I have a tabs configuration based on M’s code. Would be a big hassle!

4

Then if you have managed to make tabs with custom code, there should be no trouble implementing a small snippet of code on your page that redirects your users based on the browser agent.

5

Ah, so there is code that would redirect…nice! Any idea what it would be?

6

Hi James,
Can you try this code to insert in the header custom code at APP LEVEL

You need to change the two window.location.href = 'https:............ and “useraccounts1” inside window.addEventListener('submit-form-success-useraccounts1' . It should be the ID of your signin form.

<script>
  window.addEventListener('submit-form-success-useraccounts1', () => {
    const currentPageUrl = window.location.href;

    _setCookie('signInUpRedirectionUrl', encodeURIComponent(currentPageUrl), 1);

    setTimeout(() => {
      const isMobileDevice = /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      if (isMobileDevice) {
        window.location.href = 'https://test-play.softr.app/tab-features-only';
      } else {
        window.location.href = 'https://test-play.softr.app/tabs-for-softr-with-var-iterator-js-snippet';
      }
    }, 100);

    function _setCookie(name, value, days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      var expires = "expires=" + date.toUTCString();
      document.cookie = name + "=" + value + ";" + expires + ";path=/;" + 'SameSite=Lax; Secure';
    }
  });
</script>

An other version would be :point_down:
Here it doesn’t rely on a list of possible mobile devices (user agent) but on a maximum browser pixel width size (you can modify it by changing max-width: 768px).
I personally do prefer this browser pixel width size method

<script>
  window.addEventListener('submit-form-success-useraccounts1', () => {
    const currentPageUrl = window.location.href;

    _setCookie('signInUpRedirectionUrl', encodeURIComponent(currentPageUrl), 1);

    setTimeout(() => {
      const isMobileDevice = window.matchMedia('(max-width: 768px)').matches;
      if (isMobileDevice) {
        window.location.href = 'https://test-play.softr.app/tab-features-only';
      } else {
        window.location.href = 'https://test-play.softr.app/tabs-for-softr-with-var-iterator-js-snippet';
      }
    }, 100);

    function _setCookie(name, value, days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      var expires = "expires=" + date.toUTCString();
      document.cookie = name + "=" + value + ";" + expires + ";path=/;" + 'SameSite=Lax; Secure';
    }
  });
</script>

As a reference, all about redirection after signin (or signup) => Complete guide: Redirect users to the page they were before signing up/signing in + onboarding use case

7

Well, that worked perfectly! Thanks, bud.

I used the second one, just so you know.

8

@matthieu_chateau - if I want to redirect them from the time they sign up as well, do I just add an extra line of code to also apply the text to the filling of that particular form too?

9

My advice would be to add the code in the header, at app level, as I wrote and - magic! - name your signup form and signin form exactly the same (same ID), so you don’t have to do anything in the code.

It just needs the signup and signin forms to be in two different pages.

If it doesn’t fit your needs, just tell me.

1 Like