{"id":20049,"date":"2014-05-19T13:01:43","date_gmt":"2014-05-19T05:01:43","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=20049"},"modified":"2025-04-04T01:45:52","modified_gmt":"2025-04-03T17:45:52","slug":"html-checkbox-ios7-switchery-js","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/","title":{"rendered":"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js"},"content":{"rendered":"<p><a href=\"https:\/\/www.hongkiat.com\/blog\/jquery-icheck\/\">Checkboxes<\/a> serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While <a href=\"https:\/\/www.hongkiat.com\/blog\/css3-checkbox-radio\/\">styling checkboxes<\/a> with CSS is straightforward, these changes are limited to the box and tick itself. For a completely unique look, more extensive coding is needed.<\/p>\n<p>Enter <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/abpetkov.github.io\/switchery\/\">Switchery<\/a>. This tool simplifies the process of customizing checkboxes, turning them into sleek iOS7-style switches with ease. These switches can be fine-tuned to seamlessly integrate with your design. Let\u2019s dive in.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-javascript-fallback-methods\/\" class=\"ref-block__link\" title=\"Read More: 10 Useful Fallback Methods For CSS and Javascript\" rel=\"bookmark\"><span class=\"screen-reader-text\">10 Useful Fallback Methods For CSS and Javascript<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-javascript-fallback-methods.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14264 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-javascript-fallback-methods.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">10 Useful Fallback Methods For CSS and Javascript<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tCode fallbacks are the perfect solution for compromising with your many unique visitors. Not everybody on the web...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Starting with Switchery<\/h2>\n<p><strong>Switchery<\/strong> is an independent, free JavaScript library. Setting it up is as simple as incorporating Switchery\u2019s JavaScript and CSS files into your project. You can download both from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/abpetkov\/switchery\">GitHub<\/a>.<\/p>\n<pre>\r\n&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/switchery.css\" \/&gt;\r\n&lt;script type=\"text\/javascript\" src=\"js\/switchery.js\"&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>To transform your traditional checkbox into a modern switch, just pair your checkbox element with a class recognized by Switchery.<\/p>\n<p>Setting the initial state of the checkbox is straightforward as well. This is achieved by adding the <code>checked<\/code> attribute in the HTML to ensure it appears as selected upon first load. For instance, to apply a checked state, we simply include a <code>demo<\/code> class to our checkbox like this:<\/p>\n<pre>\r\n&lt;input type=\"checkbox\" class=\"demo\" checked \/&gt;\r\n<\/pre>\n<p>At this stage, the checkbox has not transformed yet. We must incorporate the following JavaScript code into our HTML. This code specifies the checkbox class and allows for additional options, if necessary.<\/p>\n<pre>\r\n&lt;script&gt;\r\nvar elem = document.querySelector('.demo'); \/\/ referred checkbox class is here\r\nvar init = new Switchery(elem); \/\/ put option after elem attribute\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>And there you have it!<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result.jpg\" alt=\"iOS Style Switch Example\" width=\"500\" height=\"150\"><\/figure>\n<h2>Customizing Your Switch<\/h2>\n<p>Customizing your switch with various options is straightforward and done within the JavaScript. These options can significantly alter the appearance and behavior of the switch. Here are all the options you can use:<\/p>\n<ul>\n<li><code>color<\/code>: Changes the color of the switch element, accepts HEX or RGB values.<\/li>\n<li><code>secondaryColor<\/code>: Alters the color of the \u201coff\u201d state for the switch\u2019s shadow and border.<\/li>\n<li><code>className<\/code>: Allows for customization of the switch element class name as styled in switchery.css.<\/li>\n<li><code>disabled<\/code>: Enables or disables the switch for click events, accepts a boolean value (true or false).<\/li>\n<li><code>disabledOpacity<\/code>: Adjusts the switch\u2019s opacity when <code>disabled<\/code> is set to true, with values ranging from 0 to 1.<\/li>\n<li><code>speed<\/code>: Modifies the transition time length, such as \u20180.1s\u2019, \u20180.5s\u2019, or \u20182.2s\u2019.<\/li>\n<\/ul>\n<p>To apply these options to our switch, for example, changing its primary and secondary colors, simply add the options within curly brackets after the <code>elem<\/code> attribute in the <code>init<\/code> variable like this:<\/p>\n<pre>\r\n&lt;script&gt;\r\n  var elem = document.querySelector('.demo');\r\n  var init = new Switchery(elem, {\r\n    color: '#fec200', \r\n    secondaryColor: '#41b7f1' \r\n  });\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>Here\u2019s what the customization looks like:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result-option.jpg\" alt=\"Customized iOS Style Switch\" width=\"500\" height=\"150\"><\/figure>\n<p>Beyond merely altering the switch\u2019s appearance, a myriad of options exists for functionalities such as displaying multiple switches, linking a switch with other elements, or retrieving its current status. For more details and possibilities, the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/abpetkov.github.io\/switchery\/\">documentation page<\/a> is always a helpful resource.<\/p>\n<h2>Wrapping Up<\/h2>\n<p>Switchery demonstrates how simple it is to incorporate designs from any device into your projects. It is compatible with a wide array of modern web browsers, including Chrome, Firefox, Opera, Safari, and IE8+. For those looking to integrate other iOS 7 style UI elements, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/abpetkov.github.io\/powerange\/\">Powerange<\/a> offers an excellent range slider control.<\/p>\n<p><strong>Note:<\/strong> This article was initially published on May 19, 2014.<\/p>","protected":false},"excerpt":{"rendered":"<p>Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is straightforward, these changes are limited to the box and tick itself. For a completely unique look, more extensive coding is needed. Enter Switchery. This tool simplifies the process of&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[4117,3414],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js - Hongkiat<\/title>\n<meta name=\"description\" content=\"Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js\" \/>\n<meta property=\"og:description\" content=\"Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2014-05-19T05:01:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-03T17:45:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js\",\"datePublished\":\"2014-05-19T05:01:43+00:00\",\"dateModified\":\"2025-04-03T17:45:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/\"},\"wordCount\":489,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-checkbox-ios7-switchery-js\\\/result.jpg\",\"keywords\":[\"Javascripts\",\"toolkit\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/\",\"name\":\"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-checkbox-ios7-switchery-js\\\/result.jpg\",\"datePublished\":\"2014-05-19T05:01:43+00:00\",\"dateModified\":\"2025-04-03T17:45:52+00:00\",\"description\":\"Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-checkbox-ios7-switchery-js\\\/result.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/html-checkbox-ios7-switchery-js\\\/result.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/html-checkbox-ios7-switchery-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js - Hongkiat","description":"Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/","og_locale":"en_US","og_type":"article","og_title":"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js","og_description":"Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is","og_url":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2014-05-19T05:01:43+00:00","article_modified_time":"2025-04-03T17:45:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js","datePublished":"2014-05-19T05:01:43+00:00","dateModified":"2025-04-03T17:45:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/"},"wordCount":489,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result.jpg","keywords":["Javascripts","toolkit"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/","url":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/","name":"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result.jpg","datePublished":"2014-05-19T05:01:43+00:00","dateModified":"2025-04-03T17:45:52+00:00","description":"Checkboxes serve as an easy way for users to make choices. When selected, a tick appears inside a small square. While styling checkboxes with CSS is","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/html-checkbox-ios7-switchery-js\/result.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/html-checkbox-ios7-switchery-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Transforming HTML Checkboxes into iOS-Style Switches with Switchery.js"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-5dn","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=20049"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20049\/revisions"}],"predecessor-version":[{"id":73687,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/20049\/revisions\/73687"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=20049"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=20049"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=20049"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=20049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}