Axure RP 9 or 10 adds a prototype icon on the phone's home screen

Introduction

In Axure RP 8, you can add custom icons to the mobile desktop for quick access. However, it was cancelled on Axure RP 9 and 10.
However, you can do this by adding code to the prototype in the Axure cloud.

Pre-Requisite

1. You need to publish the prototype to the Axure cloud.
2. You need a place to save the URL of the custom icon.

Add Plugin to Your Prototype

1. Log in to your Axure cloud dashboard and go to the project for which you want to add an icon.

Add Plugin

2. Click the Advanced tab, and then click Add plugin.


3. Set the code insertion location to "bottom of < body > < /body > and paste below codes:

 <script>
(function($) {
$(document).ready(function() {
let url = 'https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
$('head', window.parent.document).append('<link rel="apple-touch-icon" sizes="128x128" href="'+url+'">');
$('link[rel="shortcut icon"]', window.parent.document).attr("href", url);
});
})(jQuery);
</script>

Add custom code

4. Change the url to your own icon url.


5. Set Add the Plugin to all pages.

Add Custom Icon to Mobile Phone Home Screen

 

1. Copy your demo address: If it's an Apple phone, Paste and open it in Safari, then tap the share icon at the bottom. Click [Add to Home Screen], you will see the custom icon in your home screen.

Home screen

2. Android is a similar approach.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.


Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.