{"id":66327,"date":"2024-09-30T09:25:45","date_gmt":"2024-09-30T03:55:45","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=66327"},"modified":"2024-10-02T17:47:27","modified_gmt":"2024-10-02T12:17:27","slug":"vizio-smart-tv-a-comprehensive-guide-to-start-initial-app-development","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/vizio-smart-tv-a-comprehensive-guide-to-start-initial-app-development\/","title":{"rendered":"Vizio Smart TV: A Comprehensive Guide To Start Initial App Development"},"content":{"rendered":"<h3>Introduction<\/h3>\n<p>Vizio (Vizio Holding Corp.) is an American company that designs and sells TVs, sound bars, and more. Founded in 2002 and headquartered in Irvine, California, Vizio also offers viewer data and advertising services. Television is the primary product of this company, and in 2007 it became the largest TV seller in North America. This blog delves into the technical aspects of Vizio Smart TVs and the <a href=\"https:\/\/www.tothenew.com\/digital-engineering\/mobility\">development of their apps<\/a>, highlighting the evolution and impact on user experience.<\/p>\n<h3>Vizio Developer Ecosystem<\/h3>\n<p>The Vizio Developer Ecosystem provides open API access, enabling developers to create custom apps and integrations. Vizio collaborates with content and technology partners to offer unique apps and services. Comprehensive support includes detailed documentation, technical assistance, and development tools.<\/p>\n<p><strong>Vizio TV Platform for Apps<\/strong><\/p>\n<ul>\n<li><strong>Chromium-Based:<\/strong> TV apps run on a Chromium browser optimized for a 10-foot user interface.<\/li>\n<li><strong>Remote Debugging:<\/strong> Utilize Chromium\u2019s remote debugging tools.<\/li>\n<li><strong>HTML5 Apps:<\/strong> Built for the 10-foot experience, running in the Chromium environment.<\/li>\n<li><strong>Deep Linking:<\/strong> Launch content from Vizio Mobile directly into HTML5 apps.<\/li>\n<li><strong>JavaScript Library:<\/strong> Apps must integrate with Vizio\u2019s library for IR remote control and platform compliance.<\/li>\n<\/ul>\n<h4>Read More: <a href=\"https:\/\/www.tothenew.com\/blog\/best-practices-for-developing-an-ott-app-on-roku\/\">Best Practices for Developing an OTT App on Roku<\/a><\/h4>\n<h3>App Development for Vizio Smart TV<\/h3>\n<h4>Registration and Access<\/h4>\n<p>Before beginning development, clients must register their applications with Vizio to access the companion library functionality. They need to provide both the pre-prod and prod URLs for their HTML5 TV app during this process. These URLs are essential for authentication within the Vizio framework.<\/p>\n<p><strong>Note:<\/strong> You will need a username and password to access App submission form which will be provided by Vizio during registration or It will be available in the documents shared by Vizio.<\/p>\n<h4>Integration of the Vizio Library<\/h4>\n<p>To access the Companion Library use the following URL on the local server:<\/p>\n<pre><span style=\"color: #666699;\">\"https\/\/:\"+\"localhost:12345\/scfs\/cl\/js\/vizio-companion-lib.js\"<\/span><\/pre>\n<p><strong>Note:<\/strong> The above URL is written in two parts, concatenate it while using it in the code.<\/p>\n<p><strong>IMPORTANT:<\/strong> The app must initialize and bind all callbacks, including the primary <span style=\"color: #333399;\">VIZIO_LIBRARY_DID_LOAD<\/span> event, before loading the companion library. This ensures that all handlers are ready when the event triggers. Simply place your app&#8217;s JavaScript calls before loading the companion library.<\/p>\n<pre><span style=\"color: #666699;\"><strong>\/\/---Vizio Library Integration------\/\/<\/strong>\r\n\r\nfunction loadVizioSDK(callback: any) {\r\n var script = document.createElement(\"script\");\r\n script.src = \"https\/\/:\" + \"localhost:12345\/scfs\/cl\/js\/vizio-companion-lib.js\";\r\n document.body.appendChild(script);\r\n script.onload = callback;\r\n}\r\n\r\nloadVizioSDK(function() {\r\n \u00a0\u00a0\u00a0\u00a0document.addEventListener(\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"VIZIO_LIBRARY_DID_LOAD\",\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0function(e) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Closed Captions\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.VIZIO.setClosedCaptionHandler(function(isCCEnabled: any) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.VIZIO.setClosedCaptionHandler(function(isCCEnabled) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isCCEnabled) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"Closed captioning enabled\");\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\"cc-state\").innerHTML = \"ON\";\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(\"Closed captioning disabled\");\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\"cc-state\").innerHTML = \"OFF\";\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ Device ID\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.VIZIO.getDeviceId(function(deviceId: any) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0localStorage.setItem(\"deviceid\", deviceId);\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0true\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ TTS\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.addEventListener(\"VIZIO_TTS_ENABLED\", function(e) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(e, \"TTS ENABLED\");\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\"tts-state\").innerHTML = \"ON\";\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, false);\r\n\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.addEventListener(\"VIZIO_TTS_DISABLED\", function(e) {\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(e, \"TTS DISABLED\");\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0document.getElementById(\"tts-state\").innerHTML = \"OFF\";\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}, false);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});<\/span><\/pre>\n<h3>App Installation and Debugging in Vizio TV<\/h3>\n<p>The VIZIO platform uses a custom version of the Chromium browser. Smart Cast apps are built with HTML5 and JavaScript. For testing, the app&#8217;s full code must be hosted either publicly or locally, and the app URL can be launched in the browser for the target TV.<\/p>\n<h4>Enable Developer Mode on Vizio TV<\/h4>\n<ul>\n<li>To enable dev mode contact your VIZIO AIM and provide the TV&#8217;s serial number (from the System Information pane).<\/li>\n<li>Request to switch the TV to a developer configuration.<\/li>\n<li>Once confirmed, the TV will show &#8220;Checking for updates&#8221; or &#8220;Software Update.&#8221;<\/li>\n<li>After the update, reboot the TV from the System pane.<\/li>\n<\/ul>\n<h4>App Installation In Vizio TV<\/h4>\n<ol>\n<li>Make sure both your TV and laptop are connected to the same Wi-Fi.<\/li>\n<li>Launch the Chrome browser (Other browsers can be used, but Chrome is recommended for the best experience) on your laptop and open the following <a href=\"https:\/\/vizio-pm.s3-us-west-1.amazonaws.com\/conjure-launcher.html\">URL<\/a>.\n<div id=\"attachment_67816\" style=\"width: 1389px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/Vizio_App_Launcher.png\"><img aria-describedby=\"caption-attachment-67816\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-67816 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/Vizio_App_Launcher.png\" alt=\"Vizio_Devic_Pairing_Screen\" width=\"1379\" height=\"656\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/Vizio_App_Launcher.png 1379w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Vizio_App_Launcher-300x143.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Vizio_App_Launcher-1024x487.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Vizio_App_Launcher-768x365.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Vizio_App_Launcher-624x297.png 624w\" sizes=\"(max-width: 1379px) 100vw, 1379px\" \/><\/a><p id=\"caption-attachment-67816\" class=\"wp-caption-text\">Screen to enter TV&#8217;s IP Address<\/p><\/div>\n<p>&nbsp;<\/li>\n<li>Enter your TV&#8217;s IP address (found in the TV\u2019s network settings) and click &#8220;Start Pairing&#8221;.\n<div id=\"attachment_67825\" style=\"width: 228px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information.jpg\"><img aria-describedby=\"caption-attachment-67825\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-67825 size-medium\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information-218x300.jpg\" alt=\"TV_Information\" width=\"218\" height=\"300\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information-218x300.jpg 218w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information-745x1024.jpg 745w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information-768x1056.jpg 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information-1117x1536.jpg 1117w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information-624x858.jpg 624w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/TV-Information.jpg 1263w\" sizes=\"(max-width: 218px) 100vw, 218px\" \/><\/a><p id=\"caption-attachment-67825\" class=\"wp-caption-text\">Pick TV&#8217;s IP Address from here<\/p><\/div>\n<p>&nbsp;<\/li>\n<li>Now, enter the PIN shown on your TV and click to pair.<\/li>\n<li>Enter the hosted app\u2019s URL in the input box which will come just after the devices are paired and click &#8220;Launch&#8221; to start the app on your TV.\n<p><div id=\"attachment_67817\" style=\"width: 1261px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/image-14.png\"><img aria-describedby=\"caption-attachment-67817\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-67817 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/image-14.png\" alt=\"Enter URL Screen\" width=\"1251\" height=\"503\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/image-14.png 1251w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/image-14-300x121.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/image-14-1024x412.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/image-14-768x309.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/image-14-624x251.png 624w\" sizes=\"(max-width: 1251px) 100vw, 1251px\" \/><\/a><p id=\"caption-attachment-67817\" class=\"wp-caption-text\">Enter App URL here<\/p><\/div><\/li>\n<\/ol>\n<h4>How to Open Debugger<\/h4>\n<ol>\n<li>After the app is installed in Vizio TV, Open a new tab in your browser and enter the following URL: \u201c<strong>http:\/\/[TV_IP_ADDRESS]:9555\/<\/strong>\u201d<br \/>\n<strong>Example:<\/strong> http:\/\/182.16.26.91:9555\/<\/p>\n<p><div id=\"attachment_67995\" style=\"width: 1154px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/Debugging-URL-1.png\"><img aria-describedby=\"caption-attachment-67995\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-67995 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/Debugging-URL-1.png\" alt=\"Debugging_URL\" width=\"1144\" height=\"411\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/Debugging-URL-1.png 1144w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Debugging-URL-1-300x108.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Debugging-URL-1-1024x368.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Debugging-URL-1-768x276.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/Debugging-URL-1-624x224.png 624w\" sizes=\"(max-width: 1144px) 100vw, 1144px\" \/><\/a><p id=\"caption-attachment-67995\" class=\"wp-caption-text\">Page having URL to open debugger<\/p><\/div><\/li>\n<li>Now click on the URL starting with &#8220;<strong>devtools:\/\/<\/strong>&#8221; to open the debugger for the app.<\/li>\n<\/ol>\n<h3>App Submission to Vizio store<\/h3>\n<ul>\n<li>Ensure that all required feature integrations are implemented and the app is fully tested on VIZIO TVs before submission.<\/li>\n<li>Contact your App Integration Manager (AIM) for the latest pre-certification checklist for self-testing.<\/li>\n<li><strong>New App Submission<\/strong><br \/>\nWhen ready to submit a new app for VIZIO verification, complete the submission form <a href=\"https:\/\/platform.vizio.com\/docs\/app_submission.html\">here<\/a>.<\/li>\n<\/ul>\n<div id=\"attachment_67818\" style=\"width: 1368px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/App-Submission-Page.png\"><img aria-describedby=\"caption-attachment-67818\" decoding=\"async\" loading=\"lazy\" class=\"wp-image-67818 size-full\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2024\/09\/App-Submission-Page.png\" alt=\"App_Submission_Page\" width=\"1358\" height=\"664\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2024\/09\/App-Submission-Page.png 1358w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/App-Submission-Page-300x147.png 300w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/App-Submission-Page-1024x501.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/App-Submission-Page-768x376.png 768w, \/blog\/wp-ttn-blog\/uploads\/2024\/09\/App-Submission-Page-624x305.png 624w\" sizes=\"(max-width: 1358px) 100vw, 1358px\" \/><\/a><p id=\"caption-attachment-67818\" class=\"wp-caption-text\">Enter App details here to store upload<\/p><\/div>\n<ul>\n<li><strong>Assets-Only Submission<\/strong><br \/>\nFor existing apps needing new assets (e.g., on-device icons or app details), use the provisional form <a href=\"https:\/\/platform.vizio.com\/docs\/app_submission_provisional.html\">here<\/a>.<\/li>\n<\/ul>\n<h3>Conclusion<\/h3>\n<p>Vizio Smart TVs offer a rich platform for both developers and users, combining advanced hardware with a<a href=\"https:\/\/www.tothenew.com\/media-and-entertainment-solutions\"> flexible development environment<\/a>. By understanding the technical details and following the proper procedures for development, installation, and submission, you can leverage Vizio\u2019s ecosystem to create impactful apps and deliver enhanced user experiences. TO THE NEW is your one-stop shop for all your OTT development, Smart TV, and media monetization services. <a href=\"https:\/\/www.tothenew.com\/contact-us\">Talk to our experts<\/a> today.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Vizio (Vizio Holding Corp.) is an American company that designs and sells TVs, sound bars, and more. Founded in 2002 and headquartered in Irvine, California, Vizio also offers viewer data and advertising services. Television is the primary product of this company, and in 2007 it became the largest TV seller in North America. This [&hellip;]<\/p>\n","protected":false},"author":1972,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2563},"categories":[3477],"tags":[3629,6711,6532,6545],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66327"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1972"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=66327"}],"version-history":[{"count":27,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66327\/revisions"}],"predecessor-version":[{"id":68085,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/66327\/revisions\/68085"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=66327"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=66327"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=66327"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}