{"id":748,"date":"2013-06-19T23:15:12","date_gmt":"2013-06-19T15:15:12","guid":{"rendered":"http:\/\/passkit.com\/blog\/?p=748"},"modified":"2013-06-19T23:15:12","modified_gmt":"2013-06-19T15:15:12","slug":"display-links-with-custom-text-on-the-back-of-a-passbook-pass-ios7","status":"publish","type":"post","link":"https:\/\/passkit.com\/blog\/display-links-with-custom-text-on-the-back-of-a-passbook-pass-ios7\/","title":{"rendered":"Display links with custom text on the back of a Passbook Pass (iOS7)"},"content":{"rendered":"<p>In iOS6, Apple allows you to add hyperlinks on the back of the Pass that are automatically displayed as clickable and allow the Pass owner to click on the link and visit that URL. \u00a0This provides much convenience for the Pass owner, and also a great way for merchants and businesses to help and encourage their customers to &#8220;find out more&#8221;, &#8220;top up&#8221; their stored value card, cross sell, &#8220;buy online&#8221; or indeed connect their customers to any associated URL that they feel the would add value.<br \/>\nThe only trouble has been that these URLs can be quite ugly and not always self explanatory! We are all used to an internet world where we are links are &#8220;built into&#8221; text or buttons. Like &#8220;<a title=\"PassKit\" href=\"http:\/\/passkit.com\">click here<\/a>&#8221; or &#8220;<a title=\"PassKit Pass Designer\" href=\"http:\/\/app.passkit.com\">visit this page<\/a>&#8221; for more. Some of our clients have got round the ugly, long URLs by using short codes but these are not always the most friendly URLs and feedback from clients has been they&#8217;d prefer links were embedded in appropriate words.<br \/>\nWell, we are pleased to say that Apple has responded to this feedback.<br \/>\n<strong>In iOS7 you can add custom text to a hyperlink.<\/strong><br \/>\nHow do you do this?<br \/>\nIn exactly the same way you use hyperlink in HTML. \u00a0For example &#8220;&lt;a href=&#8217;https:\/\/www.facebook.com\/groups\/webwednesdayhk\/&#8217;&gt;Facebook Group&lt;\/a&gt; would allow the user to click on the words <a title=\"PassKit facebook\" href=\"http:\/\/facebook.com\/pkpass\" target=\"_blank\" rel=\"noopener\">Facebook Group<\/a> and it would take them to that URL.<br \/>\nImportant : Please note the use of single quotes in the HTML attribute. \u00a0Using double quotes may result in the link not working.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/safaripush.com\/wp-content\/uploads\/2013\/11\/passdesigner-for-htmlhref1.png\" target=\"_blank\" rel=\"noopener\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-753\" src=\"http:\/\/safaripush.com\/wp-content\/uploads\/2013\/11\/passdesigner-for-htmlhref1.png\" alt=\"Custom text on back links on Passbook Pass\" width=\"568\" height=\"484\" title=\"\"><\/a><\/p>\n<p><a title=\"PassKit homepage\" href=\"http:\/\/PassKit.com\" target=\"_blank\" rel=\"noopener\">PassKit<\/a> will automatically convert so it displays correctly on iOS6 and iOS7 devices.<br \/>\nNow, iOS7 is only available in beta and only available to Apple Developers but we are opening this feature to all allow developers the ability to play with this new feature. \u00a0We want you to be ready and played with the many possibilities ready for the public launch of iOS7 later this year.<br \/>\nYou simply use basic HTML Link Syntax in the <a title=\"PassKit Pass Designer\" href=\"http:\/\/app.passkit.com\" target=\"_blank\" rel=\"noopener\">The PassKit Portal<\/a> (in the Back Content tab) and it will display correctly on the developer&#8217;s iOS7 device. But, here&#8217;s the clever part, if someone receives this Pass and are using an iOS6 device &#8211; which can only show the URL link and not custom text &#8211; the Pass will show the actual URL and the custom text will not be clickable. Ingenious hey?<br \/>\nIt&#8217;s best explained with a picture.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/safaripush.com\/wp-content\/uploads\/2013\/11\/passback-ios6vios7.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-749\" src=\"http:\/\/safaripush.com\/wp-content\/uploads\/2013\/11\/passback-ios6vios7.png\" alt=\"passback-ios6vios7\" width=\"569\" height=\"600\" title=\"\"><\/a><\/p>\n<p>And then next best is to give it a go.<br \/>\nSo, if you are an Apple Developer and have iOS7 installed on one of your devices, go to the\u00a0<a title=\"Passbook Pass Designer\" href=\"http:\/\/app.passkit.com\">The PassKit Portal<\/a>, create a Pass (or even use one of the templates from the\u00a0<a title=\"PassKit HomePage\" href=\"http:\/\/PassKit.com\" target=\"_blank\" rel=\"noopener\">PassKit homepage<\/a>) with some links on the back (using standard href HTML markup) and then see how it displays on your iOS7 device and also on iOS6 devices.<br \/>\nYou will also notice that the text is larger in iOS7; again this has been widely applauded by our partners and clients. Now Pass owners won&#8217;t need glasses to read the back of the Pass!<br \/>\nEveryone can look forward to enjoying this feature in iOS7 Passbook when it&#8217;s released this fall. Until then we welcome all developers to explore the new features of iOS7 using the <a title=\"PassKit Pass Designer\" href=\"http:\/\/app.passkit.com\">PassKit Pass Designer<\/a> and the <a title=\"PassKit API documentation\" href=\"http:\/\/passkit.com\/api\">PassKit API<\/a>.<br \/>\nPlease leave comments below. Let us know how you get on and what you think of this enhancement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In iOS6, Apple allows you to add hyperlinks on the back of the Pass that are automatically displayed as clickable and allow the Pass owner to click on the link and visit that URL. \u00a0This provides much convenience for the Pass owner, and also a great way for merchants and businesses to help and encourage [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":13754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-748","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/posts\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/comments?post=748"}],"version-history":[{"count":0,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/posts\/748\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/media\/13754"}],"wp:attachment":[{"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/media?parent=748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/categories?post=748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/passkit.com\/blog\/wp-json\/wp\/v2\/tags?post=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}