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?
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.
I know, but I have a tabs configuration based on M’s code. Would be a big hassle!
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.
Ah, so there is code that would redirect…nice! Any idea what it would be?
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 
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
Well, that worked perfectly! Thanks, bud.
I used the second one, just so you know.
@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?
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.
Hi
I have this JS code:
<script>
function isMobileDevice() {
return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
if (isMobileDevice()){
window.location.href = 'https://promo.lokalnionline.pl/x2' // modify this for the "mobile" kite url
} else {
window.location.href = 'https://informatorparafialny.pl/parafiawegry' // modify this for the "desktop" kite url
}
</script>
He causes from smartphone and desktop level the pages open, and from tablet level the page does not open.
What should I add in this code to make the page from the desktop open on the tablet?
You can try this one, I did not test it though.
<script>
function isMobileDevice() {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function isTablet() {
return /iPad|Android|Tablet/i.test(navigator.userAgent);
}
if (isMobileDevice()) {
if (isTablet()) {
window.location.href = 'https://tablet-url.example.com';
} else {
window.location.href = 'https://smartphone-url.example.com';
}
} else {
window.location.href = 'https://desktop-url.example.com';
}
</script>
Replace the whole url (https://…) by the url you need
How will I know which url is for a tablet, which for a smartphone, which for a desktop?
For a tablet, could you paste a url like this into this code: https://wp.pl
If it’s a tablet, it redirects to https://tablet-url.example.com/ (change it by your url).
If it’s a mobile device but not a tablet, it redirects to https://smartphone-url.example.com (change it by your url, here: https://wp.pl/).
If it’s neither a mobile device nor a tablet (in other words, if it’s a desktop or an unidentified device), it redirects to https://desktop-url.example.com (change it by your url).
I did as you wrote.
Everything works as it should except that if I paste some url for the smartphone then on the smartphone the link from the tablet appears to me.
Tablet and desktop works fine.
Let me test it on my end so I can debug it properly.
Do you test it with a real tablet or in the preview mode of the Softr studio?
On a real Apple tablet
ok, do the tests
You can try this one:
<script>
function isMobileDevice() {
return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function isTablet() {
return /iPad/i.test(navigator.userAgent) || /(tablet|ipad|playbook|silk)|(android(?!.*mobile))/i.test(navigator.userAgent);
}
if (isMobileDevice()) {
if (isTablet()) {
window.location.href = 'https://tablet-url.example.com';
} else {
window.location.href = 'https://smartphone-url.example.com';
}
} else {
window.location.href = 'https://desktop-url.example.com';
}
</script>
Or this one:
<script>
function isMobileDevice() {
return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function isTablet() {
return /iPad|Android(?!.*Mobile)/i.test(navigator.userAgent);
}
if (isMobileDevice()) {
if (isTablet()) {
window.location.href = 'https://tablet-url.example.com';
} else {
window.location.href = 'https://smartphone-url.example.com';
}
} else {
window.location.href = 'https://desktop-url.example.com';
}
</script>
The previous code took Ipad as a mobile device.
So you can also try this one (I just removed iPad from the first return line)
<script>
function isMobileDevice() {
return /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
function isTablet() {
return /iPad|Android|Tablet/i.test(navigator.userAgent);
}
if (isMobileDevice()) {
if (isTablet()) {
window.location.href = 'https://tablet-url.example.com';
} else {
window.location.href = 'https://smartphone-url.example.com';
}
} else {
window.location.href = 'https://desktop-url.example.com';
}
</script>
In the first version you posted today, the smartphone and desktop work but the tablet, on the other hand, displays what the desktop displays