Quick Start

The easiest way to get a FatSecret Platform application on your web page is to embed the JavaScript API in your page using a script tag. You can look at this example to get a sense of how easy it is.

The "https://platform.fatsecret.com/js" URL contains all the JavaScript needed to run an application. By adding the query parameter "auto_load=true" the application will automatically load and show to users in the position that you place this script tag on your web page:

Please note that every reference to "https://platform.fatsecret.com/js" must include a valid Access Key. Be sure to register and Sign Up for an Access Key if you would like to include a FatSecret Platform JavaScript application in your web page. For more information, see the key Script URL parameter reference.

Unless an application is automatically loaded (as above), you must take care of a few steps to get the application correctly set-up and displaying on your web page:

1. Include a reference to the FatSecret Platform API using a script tag.
2. Create a named element on your page to hold your application.
3. Initialize your application using JavaScript.

1. Include a reference to the FatSecret Platform JavaScript:

As shown below, the Platform JavaScript library is loaded by including a script tag that references the URL "https://platform.fatsecret.com/js", using your API Key. This JavaScript file loads all the necessary functions and variables for your application:

2. Create a named element to hold your application:

Each FatSecret Platform application runs within a container, typically a div element in the browser's document object model (DOM). You can create and place this element anywhere within your page (for more information see How It Works). Adding the CSS class fatsecret_container to the container element ensures that the application themes and styles are recognized:

3. Initialize your application using JavaScript:

With two JavaScript API calls we establish a reference to the named element (container) and initialize the application:

A complete example of the loading an application using JavaScript is shown here.

In addition to the auto_load query parameter described above, a number of FatSecret Platform features and behaviors are enabled by specifying query parameters with the script URL. For instance, to change the theme of your application the theme query parameter would be used:

A sample of an application using the green theme is shown below:

See Themes and Styles for more information.

A number of JavaScript functions and properties may be used to change the behavior of your application. For instance, the fatsecret.variables.navOptions variable can be used to enable/disable options in the application navigation menu:

A sample of an application using custom navOptions is shown below:

Note that you can also switch off the application navigation and provide your own, using the auto_nav query parameter. See Managing Navigation for more information.

This quick start guide covers very basic configuration of a FatSecret Platform application but there are plenty of additional configurable options you can use including:

• Managing your own user profiles by overriding the profile.sign_in canvas (see Authentication).
• Overriding the templates of other canvases to provide your own canvas layout. Choose which features you want and where you want to show them (see Manually Loading Content).
• Creating your own style sheets for a customized theme (see Themes and Styles).
• Customizing or creating your own navigation by responding to navigation changed events (see Managing Navigation).

Please take the time to read through the JavaScript API documentation – we've made it very easy to set up FatSecret Platform applications but we've also added a lot of advanced features so you can get exactly the right application for your site and users.