Linking phone numbers with HTML
  • chase.mortensen3
    Posts: 3
    Joined: Thu Jul 20, 2017 3:41 pm

    Linking phone numbers with HTML

    by chase.mortensen3 » Wed Aug 09, 2017 1:12 pm

    Hello,

    I am working on a project which requires me to link phone numbers. I've figured out that plaques are the way to go, and those are working fine in this format:

    <a href="tel:1-555-555-5555">Call</a>

    I also need to add links to send sms messages, but when I do this, the link takes me to "+15555555555?game_id=28671" and the messages don't send. I'm using the same format:

    <a href="sms:1-555-555-5555">Text</a>

    Any ideas or suggestions on how to make this work/remove the game id from the link?

    Thanks!
  • cleffingwell
    Posts: 38
    Joined: Tue Feb 14, 2017 7:45 am
    Location: Eau Claire
    Contact:

    Re: Linking phone numbers with HTML

    by cleffingwell » Fri Aug 11, 2017 9:14 am

    The way I was able to do it was to make an external web page with the link on it and then use the ARIS web object to go to the external web page.
    All that was needed on the external page was:

    <html>
    <body>
    <a href="sms:715-555-1234">Text</a>
    </body>
    </html>

    So the hard part about using this work around is having a place to put the external web page. Drop box used to be able to do that, but they disallowed that last year.
  • cleffingwell
    Posts: 38
    Joined: Tue Feb 14, 2017 7:45 am
    Location: Eau Claire
    Contact:

    Re: Linking phone numbers with HTML

    by cleffingwell » Fri Aug 11, 2017 1:28 pm

    So, Iwas discussing an issue with my fellow programmer Ryan, who was having kind of the opposite problem. We had some numbers with dashes in one of our game plaques that the device was automatically making a live link to the device phone/text. (without having it in an <a> tag)

    So I tested just placing the number 715-555-1234 into a plaque by itself with no HTML at all, and lo and behold the device recognized it as a number and linked to the messaging/phone app.

    Long press revealed a menu of either calling, messaging, face-timing or adding to contacts.

    Ryan can post his solution to preventing this behavior....
  • rleduc
    Posts: 16
    Joined: Wed Oct 26, 2016 1:40 pm

    Re: Linking phone numbers with HTML

    by rleduc » Fri Aug 11, 2017 1:28 pm

    You might be able to simply leverage iOS's default functionality to achieve the functionality you want. By default, iOS is programmed to recognize pieces of information, like phone numbers and email addresses, and then modify them to give them functionality.

    In ARISE scenarios, we have simulated Emergency Contact Forms, and iOS recognizes the phone numbers on those plaques and underlines them. Then if a user long presses the phone number, it displays a modal window with options to call the number or send a SMS to that number. This is all just letting the iOS operating system do it's thing, no need for any code on our part.

    I've attached a screenshot below so you can hopefully see what I mean.
    Attachments
    IMG_0001.PNG
    Last edited by rleduc on Fri Aug 11, 2017 1:32 pm, edited 1 time in total.
  • rleduc
    Posts: 16
    Joined: Wed Oct 26, 2016 1:40 pm

    Re: Linking phone numbers with HTML

    by rleduc » Fri Aug 11, 2017 1:31 pm

    I also discovered that you can prevent iOS from underlining phone numbers with the following meta tag:

    <meta name="format-detection" content="telephone=no">

    In your html file, it would be placed here:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="format-detection" content="telephone=no">
    </head>
    <body>
    ....

    Placing the tag both stops iOS from underlining phone numbers and prevents the user from being able to click on it and make phone calls/send SMS messages
  • rleduc
    Posts: 16
    Joined: Wed Oct 26, 2016 1:40 pm

    Re: Linking phone numbers with HTML

    by rleduc » Fri Aug 11, 2017 2:02 pm

    After playing with it for a little bit, I was able to improve the functionality of the <a> tag with the following:

    <a href="sms:1-555-555-5555&body=">Text</a>

    This ends up putting a proper phone number in the "To:" field, and "?game_id=28671" in the message field.

    The &body= is a way of pre-populating a message to be sent when the SMS app is opened. For whatever reason, ARIS is appending the game ID as a GET parameter when the messaging app is opened. By using &body=, this tricks iOS into thinking "?game_id=28671" is the body of the message and puts it in the message field instead of the phone number field.

    You still end up with the GET parameter, and your users will still have to delete it and replace it with their own message, but at least it doesn't show up in the Telephone number field.
  • User avatar
    chrish
    Posts: 211
    Joined: Mon Oct 10, 2016 5:45 pm
    Location: Albuquerque, NM
    Contact:

    Re: Linking phone numbers with HTML

    by chrish » Mon Aug 21, 2017 5:52 pm

    This is pretty cool stuff to know and neat that ARIS now has more native functionality with text. Thanks for working out the details for us!
  • chase.mortensen3
    Posts: 3
    Joined: Thu Jul 20, 2017 3:41 pm

    Re: Linking phone numbers with HTML

    by chase.mortensen3 » Tue Aug 22, 2017 12:29 pm

    This is great! Thank you for all the help!

    I do have one more question though. After I click the link to the phone call/text, the game goes to a blank screen with a back arrow. When I click the back arrow, I go back to the beginning of the conversation. Is there a way to have the game exit to the map after the player has clicked on the call/text link? I've tried using events, but it still isn't working great. Is there a way to have an event that opens a tab (like map)?

    Thanks again everybody!
  • rleduc
    Posts: 16
    Joined: Wed Oct 26, 2016 1:40 pm

    Re: Linking phone numbers with HTML

    by rleduc » Wed Aug 23, 2017 1:42 pm

    Chase,

    I'm not sure if you mean that the app goes to a blank screen when the link is clicked, or after you exit the messsaging app and return to ARIS.

    I had an issue with a blank screen and a back arrow when testing on a device that had no SMS app installed. If the link is opening to a blank screen, I would double check to make sure that the device you are testing on has an SMS app installed.

    I also get a blank screen with a back arrow when I return to ARIS after closing the messaging app. If this is what you are talking about, as far as I can tell, there is no way to immediately send them directly to the Map upon returning to ARIS, but you can do it in a roundabout way:

    1) Make the Map a tab
    2) Create a blank plaque called "Exit to Map" (or whatever you want to call it)
    3) Place the following code in the plaque:

    Code: Select all

    <script type="text/javascript">
    var ARIS = {};
    ARIS.ready = function() {

    ARIS.exitToTab('MAP');

    }
    </script>


    4) Place the "Exit to Map" plaque in a scene.
    5) Place a lock on the "Exit to Map" plaque of "Player has already viewed plaque [name of plaque or object that opens SMS app].

    What this does, is when the user taps the back arrow, the lock causes the "Exit to Map" plaque to pop up and execute the JavaScript to immediately exit and redirect to the Map.