How To Turn Your Weebly Website Into An App (Step-By-Step Guide)

[Ethan2]

Hey there Weebly! Today, I'll be showing you how to turn your Weebly website into a fullscreen mobile "app". (Hides the address bar) I'll be going over how to do this on Android and on IOS. If you liked the tutorial please let me know and share some feedback, -so I feel motivated to make another

(I'll be using this one my site, sharethespotlight.co)

Step 1

Open up the editor for your site.

Step 2

Click Settings > SEO. Place your cusor over the "Header Code" section as shown below.

Awesome! Great job.

Step 3

Paste this code in your Header Code, save your changes (Bottom right, green button), and publish your site! This will remove the address bar for your site when users either on IOS/Android save your site to their homescreen, giving the app-like feel.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

Step 4

Alright. After your site's published, visit it on your mobile device. Since I have an Iphone, I will be using IOS, but this will work on your Android device too because we used both companies meta tag to convert it. 

(SInce I won't be going over how to add your website to your homescreen on an android device, you can read this article and it will show you what to do)

Click the middle bottom button on the web browser (It looks like a box with an arrow coming out of the top of it) and then "Add to Homescreen". Title it whatever you want. 

You'll be redirected to your homescreen and you'll see the icon for your website. When you click on it, the address bar should be removed giving the app-like feel to it.

Thanks so much for reading everyone! If I get positive feedback I'll be sure to post more tutorials. If you need any help respond below or message me. Rock on Weebly!

Before:                                                                                       After:

[bobafett]

That is very nice Ethan.  Is that your real image?  If so then how old are you?

[Ethan2]

---

@bobafett wrote:

That is very nice Ethan.  Is that your real image?  If so then how old are you?

---

Hey there Boba,

Yes, it is my real image. I'm not sure about saying my age on the community because it's not really relevent, but I feel like I'm a bit "mature" for my age and have already successed multiple businesses through Weebly.

...Anddd, I love your playground! Really cool designs in there, perhaps submitting some to the App Center?

[ecoessays]

Hi Ethan,

I tried this on my new Google Pixel 3a XL Android phone and there was no option for "Add to Homescreen". Any suggestion?

[VectorWarlock]

Neat bit of code. Thanks

[Ethan2]

Welcome, glad I could contribute

[ABHI_SHUKLA]

REALLY FRIEND SO SWEET THIS THING BUT I AM REALLY FIND ONE THAT THING WHICH COUNVERT OUR WEBSITE IN REAL APP!LIKE WE FIND IT ON PLAYSTORE OR ON IOS STORE!

IF U FIND ME THAN MASSAGE ME OR EMAIL ME PLEASE!

CHECK OUT MY SITE : ANDROIE.WEEBLY.COM

BUT THERE SOME ISSUSE SO I CAN'T EDIT MY SITE SO NOT RECANATLY POST ANYTHING!

[dw_nelson]

Hmm... didn't work for me.
Does the header code placement matter? I have mine after the Google Analytics tag code.

[Leatherlips]

That was pretty cool! At first I did not think it worked. I already had my page saved on my homescreen and when I clicked it, it did not do anything different. I then deleted the icon and re added it and voila! It worked! Thanks!

[Ethan2]

Glad I could help you!

[cmrussom]

I am not seeing any differece on Android devices.  Any suggestion?

[pjcads]

Ethan, 

Thanks so much for posting this. This has worked for me (THANKS!), however, as soon as I click on one of my pages it opens the page link in a new tab (effectively removing it from the "web app"). Do you know of a way to keep this from happening? It's not a huge deal, but I would be nice to stay self contained within the web app. Thanks for any insight you could offer.

[pennyashley97]

Hi there, 

Is there anyway to make it so that when you open a new page within your website it doesn't open into a new browser page? I can get it to look like an app with just the home page but not with any other page on my website...

Cheers, 
Ashley

[Adam7]

Hey @pennyashley97! Is that when clicking navigation links on the top of your site, or with links you make with text/images/buttons?

[pennyashley97]

Hi Adam!

It's doing it with both. So as soon as I click on anything it's opening it up with the web browser at the top instead of hiding it if that makes sense...

Ashley

[Adam7]

When you make regular links with text/images/buttons, there should be a checkbox on the link popup to control whether you want it to open in a new tab or not. There isn't a way to control that with navigation links, though, although they aren't supposed to open in a new tab.

What browser are you using? I wonder if you have a setting turned on to open all links in a new tab.

[pennyashley97]

Hi Adam, 

I have made sure that all of the links are set to not open up into a new tab...

I am using Safari on an ipad. Not sure about the settings to open all links in new tabs...didn't know that was such a thing - I will have to try to figure that out haha! Thanks  

Ashley

[Melvin-]

Thank you for the nice tutorial, will it be possible to create it to link up as a native app that can be downloaded from the google play store and Apple store. I was hoping to create a native app that run via  weebly mobile website interface.

[Nelson_]

I seriously love your post and I'm thanking you greatly. I've recently had the desire to convert my site into a web-ready format to publish on google play and the apple store. I hoping what you describe here with tweaks will help me accomplish this... Any further info that can help me accomplish my desired goal is highly appreciated, and if there are any community members with this knowledge I also welcome your input as well. 

Nelson

[10athletes]

OH MY GOD YOU'VE DONE IT!!!

One thing to note: if you already have the shortcut on your phone, you need to delete the app and reinstall it on your home page. Ok now..

I tried a million different codes but none of them worked until yours!!! YES!!!! I spent all day on this seriously hours and didnt think it would work. digging through code. I'm so happy I want to cry

[EdoFromItaly]

Great Tutorial!!! so useful! so simply explained! Thank you very much!!!