How to Add Mobile App links on Website Home Page if user access website from Android / ios

[ajay]

Now a days many users are accessing website from Android, ios. If there is the App for Android, ios ; i want to add on the website page if user has accessed from android / ios. 

eg: is Amazon.com.  access from ios, / android it will show the app link on the top for user to install app.. 

Please suggest how to add those links ?

[scrambler]

You can simply add a class to you link, and then use weaver mobile classes to only show the links on specific devices.

For example

<a class=”myandroidlink” href=”…”>Link content</a>

<a class=”myioslink” href=”…”>Link content</a>

Then place the rules below in Main options > Fonts & Custom > Custom CSS Rule box

.myandroidlink, myioslink {display:none;}
.myandroidlink, .myioslink {display:none;}

.is-android .myandroidlink {display:inline-block;}
.is-ios .myioslink {display:inline-block;}

You can find all the mobile classe in the help file under the “Weaver Xtreme Helper Classes” section

[ajay]

@scrambler Please tell how to add a class to you link. 

Where should i put the Class code like in example you have mentioned: Main options > Fonts & Custom > Custom CSS Rule box

[scrambler]

I told you all that so let me try again.

You create your link in you content using HTML. You insert a class in your HTML as in the example I gave you (in yellow)

For your android link you would use something like
<a class=”myandroidlink” href=”…”>Link content</a>

For you IOS link you would use something like
<a class=”myioslink” href=”…”>Link content</a>

If you do not understand what an HTML luink is then explain how you are creating your links right now and provide a link to you site with a page that has these links.

Once you have added the classes (in yellow) to your links, then you hide them / show them on the various devices using CSS rules (below in blue) that you place in Main options > Fonts & Custom > Custom CSS Rule box

.myandroidlink, myioslink {display:none;}

.myandroidlink, .myioslink {display:none;}

.is-android .myandroidlink {display:inline-block;}
.is-ios .myioslink {display:inline-block;}

If you are still not following, you need to elaborate on what it is you don’t understand

[ajay]

I have put this code ( TEXT OPTION ) in the Home Page of site. http://jaimadhesh.com/welfare/

<a class=”myandroidlink” href=”https://play.google.com/store/apps/details?id=com.madhesh“>Android Madhesh App</a>

<a class=”myioslink” href=”https://itunes.apple.com/us/app/amazon-app-shop-browse-scan/id297606951?mt=8“>iOS Amazon App</a>

Now in Main options > Fonts & Custom > Custom CSS Rule box; i have put these code. 

.myandroidlink, myioslink {display:none;}

.is-android .myandroidlink {display:inline-block;}
.is-ios .myioslink {display:inline-block;}

But the problem is it always shows the App links whether site is accessed from IOs / Android. I want to put the Android app on Home page only if the Site is accessed from Android App. 

Attached is SS for Amazon.com Site. http://jaimadhesh.com/welfare/?attachment_id=65

2. Also the objective is to have the Android / IOS App on TOP OF page as shown in Screenshot. There the amazon app comes on top with Cross Mark for user. 

[scrambler]

Sorry I had a typo in my rule (missing a dot in front of the ios class). Below are the corrected rules

.myandroidlink, .myioslink {display:none;}

.is-android .myandroidlink {display:inline-block;}
.is-ios .myioslink {display:inline-block;}

The HTML could be inserted in many different areas. Have a look at the insertion are demo site page

Insertion Areas

Depending if you have the “plus” plugin or not you will have more or less choices. You can always use the HEader widget area

[ajay]

@scrambler Thanks. it worked now for the device OS type ios / ANdroid. 

I want to put the App links on the Top of Home Page as Pop up. Any idea how to show it as pop up. 

Currently it shows the static Text. on the Page NOT on the TOp as the Pop up. 

Attached is Sample SS where it shows Amazon app as the pop up in website home page. amazon.com

http://jaimadhesh.com/welfare/?attachment_id=65

[scrambler]

I am not following. The image you show has 3 different Amazon “boxes, so I am not sure what you mean. 

If you want your link to be at the top, you need to be more precise. In your page I see the page Title and tagline , and below that the header image. Do you want your link button to be above the title and tagline or somewhere else.

If you want that above everything, you could use the Header widget area in Main option > Header > Header Widget Area.

You place a text widget in Appearance > Widgets > HEader widget area, and put the HTML for your links there.

If by popup you mean you want your link to look like a button, This is an HTML question that would be better answered on an HTML reference site. You basically need to add the styling that your want in the CSS rule I gave you like

.is-android .myandroidlink {display:inline-block;background-color:blue;padding:10px;border-radius:10px;}
.is-ios .myioslink {display:inline-block;background-color:yellow;padding:10px;border-radius:10px;}

[Author]

Posts