webstory inside projects
Hi, I would like to, when opening up my url/domain name, that the desktop created project opens up in a desktop/pc environment and when opening up with the same url/domain, the created webstories info opens up and not the desktop info.
So (on same domain name/url) pc-> opens up the desktop brizy project
Mobile -> opens up the webstory without pressing a link.
I looked at some youtube videos and this help center but couldn't find it.
Thanks for your help!
greetings,
Peter London
-
Hi Peter,
Let me restate what I have understood. When visiting your website URL on a desktop, you see the desktop page design and when visiting the same URL on a mobile, you see the the story (instead of the mobile responsive page)
You cannot implement this design with the native features of Brizy Cloud. However, with the help of a JavaScript code, you can redirect the mobile users to your story URL. Please have a look at https://digital-works.brizy.site/ on a desktop and a mobile.
I pasted this code to the Project Settings - Code Injection - Header of my Brizy Cloud project to implement the redirect. This code redirects my mobile users to the story path https://digital-works.brizy.site/story
<script type="text/javascript">
if (screen.width <= 767 && !localStorage.getItem('redirected')) {
localStorage.setItem('redirected', true);
window.location.href = "https://digital-works.brizy.site/story";
}
</script>0 -
Hi KC George,
Thanks for the input. This is exactly want I want, I really like the output/style from webstories on a mobile.
I inserted your script at your desired location.
The funny thing is, it only works the first on my mobile. The second time and more will show the desktop version on my mobile. I have an iPhone SE (2020). I don't know if it's related to that.
I tried it on a test project :
https://fig321.brizy.site/story
Hope you can help!
Greetings,
Peter
0 -
Hi Peter,
Could you please try this and see if this works for you?
<script type="text/javascript">
if (screen.width <= 767) {
window.location.replace("https://fig321.brizy.site/story");
}
</script>Instead of using "window.location.href() ", we changed it to " window.location.replace ()" function.
Please give it a try and inform me of the results.
Best regards,
Ariel H.0 -
Hi Ariel,
I unfortunately get an error :
'503 Service Temporary Unavailable
nginx'
greetings,
Peter
0 -
Hi Peter,
Could you please confirm if you can reproduce the issue on this website - https://pear16321153.brizy.site/test
I am looking forward to your response.
Best regards,
Ariel H.0 -
Hi Ariel,
The mobile version seems to work now.
I saw you changed my test desktop version. Should I test a new project?
greetings,
Peter
0 -
Hi Peter,
Please try it on a new project.
0 -
Hi Ariel,
Just tested a new test project. I am on blueberry321.brizy.site now but still the 503 error.
0 -
Hi Peter,
It is showing "project not configured" at my end. Please ensure that the page is published not draft.
Please also check if you can reproduce the same issue on this link - https://pear16321153.brizy.site/test
0 -
Hi Ariel, this community post site just gave me an error. Here's the answer (perhaps you already saw it):
The project is published as far as I can see. I cannot choose pear1631153 because error: already exists.
The desktop url was fine in live condition. Also the .../story url works fine on my desktopI did't change the script to the new url. It now doesn't give the "Project not configured" error. My mistake...
But still error 503... (on url: https://pear567.brizy.site/)
0 -
Hi Peter,
Thank you for the update.
The script appears to be unrelated to error 503 in nginx.
I'll consult with a senior support colleague and provide an update soon.
Best regards,
Ariel H.
0 -
Hi Peter,
Thank you for your patience.
It appears that the same script is also found in the code injection tab for the project.
Since you're only redirecting a page, the script should be in the code injection tab for the specific page.Please try it again on your end to confirm that it works.
Best regards,
Ariel H.0 -
Hi Ariel, I only have one page in my test project but I put the script in "custom css".
It didn't work. Where is the specific code injection tab for a specific page?
I also, just to be sure, created a new project : https://papaya123.brizy.site
greetings,
Peter
0 -
Hi Ariel,
I think I found the location : click on "pages" and on the name of the page. Then "code"
I put it in the "Header" field, not the "custom css" field. That works!
Perhaps an idea to put this standard in Brizy Cloud. So that customers can choose a mobile output between the standard one or the webstory. The webstory output has same great advantages.
0 -
I've got two more questions. But first thanks for your help with the script, really happy it works!
Questions:
1:Perhaps an idea to put this standard in Brizy Cloud. So that customers can choose a mobile output between the standard one or the webstory. The webstory output has some great advantages.
2:it would be great to have the "translate element" in webstories.
3:choose where you put the "progress lines" in a webstory (horizontal lines) at the top (I don't know the english word for this, I'm dutch) or at the bottom.
When you view the webstory in desktop mode, the lines are at the bottom. Would be nice to choose top or bottom.0 -
Hi Peter,
Thank you for the update.
Unfortunately, these features are not available at the moment. However, we value your feedback and have taken note of your suggestions, so they maybe be considered for inclusion in future updates.
If you have any further questions, please let us know.
Best regards,
Ariel H.0 -
Hi Ariel,
Ok. Thanks for your help and I wish you a wonderful day!
Greetings,
Peter
0
Please sign in to leave a comment.
Comments
17 comments