"Add Icon to homescreen" Web-app>Smartphone homepage?

Need help
1

Hi everyone,

I want my URL visitors to be prompted with a “Add this page to your home screen” option; so that they have a quick access point via their smartphone app(s) screen.

I have found this JavaScript widget at: http://cubiq.org/add-to-home-screen

I am still trying to figure out how to use it properly…

Has anyone done this with their bubble web-app; if so, is there a simple way to do this?

Cheers,

2 Likes
2

So you could add that as the custom html that you can put in your page (until we add this as a plugin). You can double click on the page area and see a text box where you can copy paste html. Make sure you paste the right code though, this can break your page quite easily :slight_smile:

1 Like
3

I couldn’t get it to work unfortunately. I will ask a friend of mine for help.
Thanks for getting back to me! I do think it would make a good plugin.

4

Can you share a link to the editor?

5

Here is my index page in the editor -

The HTML looks like it is searching for the source of a css and a JavaScript file… but I don’t know where to put the actual sources so that the HTML works.

Also my custom images and custom styles (using images) are not showing up on my app right now :frowning: but they are still viewable at there amazon-ws URL…?

  • Is Bubble updating or something right now, or did I horribly destroy my app with the wrong html hahah…

Cheers

6

where did you put the html?

7

Hey Emmanuel

Sorry, I removed the html for now; I didn’t want it to mess anything up.

Basically this is to be placed in the header:

link rel=“stylesheet” type=“text/css” href="…/…/style/addtohomescreen.css"
script src="…/…/src/addtohomescreen.js">/script
script
addToHomescreen();
/script

addtohomescreen.css and addtohomescreen.js - Can be downloaded from the link above, in this thread.

  • But I don’t know where to put the content of these two files^ so that the html can actually execute.

If you think there is something fairly simple I can do, let me know.
Otherwise, I’m holding off on it for a bit, rather than me carelessly pasting code all over the place haha

Thanks!

8

So your issue here, given the HTML you pasted is that the path to the actual file is relative. When you see something like …/path/file.js, it’s looking for the file on the same server as the current page. The page being hosted by Bubble, and since we don’t have the file on our servers, that won’t work.

What you should try to do is to find a location for the file (usually, such plugins have a location on a CDN you can use for free), and use this absolute path. It should look like https://differentpath/file.js.

Once you have that, pasting this in the section ‘Header’ of the property editor should do it.

9

Awesome! Thanks Emmanuel, I will try that.

10

I would very much like this to be a plugin that I could add to my app. I tried using @jordanfaucet 's HTML, but, as a total newbie, I couldn’t get it to display my custom app icon, and it disabled the “hide Safari menus” option. Any chance we could get this as a downloadable plugin?

1 Like
11

@jordanfaucet
did u manage to get this to work ?

1 Like
12

It seems like this thing, albeit seemingly small and easy to implement, would be an important part of the “push for mobile” that Bubble is seeking.

1 Like
13

Hey guys! Sorry - I forgot to reply to this.:sweat_smile:

No - I ended up abandoning this all together. Although I don’t disagree that it could be a good plugin for mobile sites.

A) I decided I didn’t want to go through the hassle of figuring out how to host the script on some other server - and I didn’t really like the default design.

B) I figured a custom designed imitation could be built natively in bubble (with some limitations of course - such as determining whether the app has been added to the users home screen yet or not).

I think if you design a group, with text that says “Download this to your home screen etc + the little icon” - then you can associate some conditions to the group and a yes/no data field on the user. So that it shows to a user once - and then once they interact with it in some way - then it gets hidden.

^ with that though - you would have to take into account that, the process of adding a mobile site to a users home screen - may be different on iOS/Safari then it is with Android.

14

For me even the original demo from the developer is not working

http://lab.cubiq.org/addtohome/demos/simple/

So I believe it has nothing to do witth Bubble…anyway, is there another way to achieve this? Is there a PlugIn available in the meantime?

Thank you!

15

This would make a fantastic plugin.

1 Like
16

Just wanted to share that I got it working based on this (at least for Chrome and Android)


If anyone needs support let me know and I can try to help out…

18

I agree this would make a great plugin.

1 Like
19

Hi there, has this been added as a plugin anywhere by any chance? @emmanuel

Thanks! V

20

Hey @cajudick could you please share how you make it work? Thanks a lot!

21

hi any luck on this?