You can look at this example
to get a sense of how easy it is.
Scenario A - Adding an "out of the box" application to your page:
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:
Figure 1: FatSecret Platform application "out of the box"
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
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:
- Include a reference to the FatSecret Platform API using a script tag.
- Create a named element on your page to hold 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
A complete example
Scenario C - Choosing an alternate theme:
In addition to the auto_load
query parameter described above, a number
of FatSecret Platform features and behaviors are enabled by specifying query parameters
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:
Figure 2: FatSecret Platform application in the green theme
See Themes and Styles
for more information.
Scenario D - Changing navigation options:
variable can be used to enable/disable options in the application navigation menu:
fatsecret.variables.navOptions = fatsecret.navFeatures.home | fatsecret.navFeatures.diet_calendar;
A sample of an application using custom navOptions is shown below:
Figure 3: FatSecret Platform application with custom navigation (home and diet calendar)
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.
More advanced features:
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).
features so you can get exactly the right application for your site and users.