- 1.0 App Submission & Approval Process
- 2.0 API Documents
- 3.0 Integrating Your App Into Viggle Show Pages
- 4.0 Changing User Settings
- 5.0 Canvas
- 6.0 Top Bar
- 7.0 Navigation
- 8.0 Images
- 9.0 External Links
- 10.0 Developer Support
- 11.0 Some Legal Information
1.0 App Submission & Approval Process
Prior to beginning development on an app, please submit your concept by clicking here.
Once your app is complete and ready for launch, just provide us with a URL to your app by clicking here. We will complete our review within 5-10 business days.
2.0 API Document
Click here to view the Viggle Platform API Document.
3.0 Integrating Your App Into Viggle Show Pages
When your app is approved for release, we will coordinate a launch date with you. Your app will be deployed onto the “Show Page” for the shows and/or genres that you’ve designated and will appear similar to the following:
When submitting your app, you can also specify if you’d like your app to only appear on the “Show Page” when the respective show is on air.
4.0 Changing User Settings
You must confirm with the user any time your app will be changing a user’s Viggle profile settings. This includes, but is not limited to, changing a user’s likes and setting a reminder.
Your app will be used on both iPhone and Android devices. iPhones have a consistent screen size, but Android devices vary in both size and aspect ratio. Please take this into account and optimize your front-end for the best user experience, regardless of the device.
For the best user experience on iOS devices, optimize for the following screen sizes when developing your app:
- iPhone 5 screens are 640 x 1136
- iPhone 4/4S screens are 640 x 960
- iPhone & iPod Touch are 320 x 480
You will need to account for the carrier bar, as well as the purple “Viggle bar” which appears on all Viggle pages and apps. This is 128px.
Therefore, if developing for the iPhone 5, your app should have a canvas of 640 pixels wide X 1008 pixels long. The length is fluid, meaning that you can develop apps that are longer than the screen height, but the user will be required to scroll down to view all of the content. Content that appears “below the fold” is often viewed or engaged with less than content that’s “above the fold.”
For the best user experience on Android devices, optimize for the following screen sizes when developing your app:
- X-large screens are at least 720 x 960
- Large screens are at least 480 x 640
- Standard screens are at least 320 x 470
- Small screens are at least 320 x 426
Because of the variance in Android devices, we cannot provide an exact canvas size. As a general guideline, the carrier bar and the purple “Viggle bar” will account for 15% of the screen length. As with the iPhone, the canvas length is fluid.
6.0 Top Bar
In order to maintain consistency throughout a user’s experience, Viggle’s purple header bar will be automatically displayed on each page (see Canvas section above). The Viggle API allows you to customize this header by including your own logo and adding plain text.
If you will be using a LOGO:
- LOGO should be transparent as it will sit on a purple background
If PLAIN TEXT is used:
- Character limit
7.0 Navigation & Buttons
You must account for navigation within your app separate of Viggle’s standard navigation elements. In particular, the “back” button in the Top Bar will take the user back to the referring page within Viggle. It will NOT take the user to the previous page within your app. This means that its possible for the user to exit your app at any point, and your app experience will need to take that into consideration.
Your app’s navigation and individual buttons should be simple and easy for the user to distinguish as an interactive element on the screen. For the best user experience, the navigation and individual buttons should look sharp and tactile.
- To increase clarity, choose only elements that are necessary. Make your navigation sections large and avoid unnecessary options. If needed, create additional screens with fewer options.
A few guidelines to keep in mind:
- Generally, straying from the conventions established in the Viggle UI makes your application less intuitive. Over-stylized controls look out of place and require users to re-learn how they work.
Fingers are not mouse pointers.
- Size: Buttons should have a minimum height of 72px (retina) 36px (non retina) for usability purposes. Anything smaller can be difficult for some users to press accurately.
- Reduce the number of options on the screen and make the selection process sequential.
- Labeled buttons should use a font that is easy to read and should be in a color that does not compromise legibility.
Many users will be on a 3G/4G wireless network instead of WiFi. To ensure images load quickly over cellular networks all images that do not contain transparent pixels should be saved in a .JPG format with compression setting optimized for web and mobile devices.
9.0 External Links
If linking out is a necessary function within your app, you should ensure that links are mobile optimized and displayed within the Viggle webview, as described in the API.
10.0 Developer Support
Should you need any help while developing your VApp, ask a question in our developer forum. It is monitored by Viggle Engineers and they will help you out if the community doesn’t beat us to it.
11.0 Some Legal Information