Amazing User Agent API with userstack

By  on  

We do our best to design and code websites so that they look and perform the way they should regardless of device or browser, but the truth is we sometimes we need to code for specific device, browser, or crawler. Whether it's a quick hack or a simply wanting to display different content for a given device, you eventually need that information. apilayer has created an amazing api, userstack, to help you!

userstack animation

Quick Hits

  • All you need to do is provide the user agent to get a detailed summary of the user's device
  • The userstack API is free to use
  • Supports multiple output formats (json and xml)
  • Provides bulk lookup as well as single lookup
  • Trusted by ZenDesk, Amazon, Apple, and Lyft
  • Created by apilayer, creators of other amazing APIs like currencylayer, mailboxlayer, eversign, and more

Using userstack

Start by signing up for your free API key at userstack. Once you have your API key, you can start using the simple but very useful userstack API.

All you need to do is send the API key and user agent to the endpoint and you'll get a logical, informative object that describes the user device, browser, and more:

curl https://api.userstack.com/api/detect
    ?access_key=MY_API_KEY
    &ua=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3672.0 Safari/537.36
{  
   "ua":"Mozilla\/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/73.0.3672.0 Safari\/537.36",
   "type":"browser",
   "brand":"Apple",
   "name":"Mac",
   "url":"https:\/\/www.google.com\/about\/company\/",
   "os":{  
      "name":"macOS 10.14 Mojave",
      "code":"macos_10_14",
      "url":"https:\/\/en.wikipedia.org\/wiki\/MacOS_Mojave",
      "family":"macOS",
      "family_code":"macos",
      "family_vendor":"Apple Inc.",
      "icon":"https:\/\/assets.userstack.com\/icon\/os\/macosx.png",
      "icon_large":"https:\/\/assets.userstack.com\/icon\/os\/macosx_big.png"
   },
   "device":{  
      "is_mobile_device":false,
      "type":"desktop",
      "brand":"Apple",
      "brand_code":"apple",
      "brand_url":"http:\/\/www.apple.com\/",
      "name":"Mac"
   },
   "browser":{  
      "name":"Chrome",
      "version":"73.0.3672.0",
      "version_major":"73",
      "engine":"WebKit\/Blink"
   },
   "crawler":{  
      "is_crawler":false,
      "category":null,
      "last_seen":null
   }
}

The returned object provides a wealth of information, parsed and placed into logical sections:

  • device: is_mobile_device is a very useful property to incorporate for your design layouts
  • browser: providing version information
  • crawler: lets you know if it's a webcrawer or bot, and which bot you are

You can provide additional parameters to specify just the information you want returned from the API:

curl https://api.userstack.com/api/detect
    ?access_key=MY_API_KEY
    &ua=...
    &fields=device,browser.version

Like other apilayer APIs, userstack allows you to use JSONP:

curl https://api.userstack.com/api/detect
    ?access_key=MY_API_KEY
    &ua=...
    &callback=MY_FUNCTION_NAME

What I love about apilayer APIs is that they're always simple to use and were constructed for a very specific purpose. What userstack provides is so useful and I can trust it to be accurate and maintained. Give userstack a look -- it's worth your time to get accurate, usable useragent information!

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

Incredible Demos

  • By
    jQuery Countdown Plugin

    You've probably been to sites like RapidShare and MegaUpload that allow you to download files but make you wait a specified number of seconds before giving you the download link. I've created a similar script but my script allows you to animate the CSS font-size...

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...