# API Reference for Blank Canvas {% hint style="warning" %} You are reading the **Classic Widget Documentation** Classic widgets are a previous widget version for onsite widgets created before September 23rd. From September 23rd 2025, all new widgets created will be NextGen. Please check your widget version on the **Widget List page** to see if it is **Classic** or **NextGen** widget. You can read the [Nextgen widget documentation here](/ugc/guides/widgets-nextgen/typescript-api-guides/how-to-use-the-sdk.md). {% endhint %} * [Setting Object](#setting-object) * [Methods](#methods) * [Sample Usage](#helper-methods-sample-usage) * [Tile Properties](#helper-methods-tile-properties) ## Setting Object (Read-only) In our Blank Canvas Widget, you can access the widget setting configuration by checking the `window.Stackla.widgetOptions` global variable. The following table lists useful properties. | Property Name | Type | Description | | --------------------- | -------- | ----------------------------------------------------------------- | | custom\_css | {String} | Compiled Custom CSS for Inline Tile | | custom\_js | {String} | Source Custom JavaScript for Inline Tile | | custom\_tile | {String} | Custom Template in Mustache syntax for Inline Tile | | filter\_id | {String} | ID of selected filter | | guid | {String} | A hash code representing unique Widget ID (Widget ID replacement) | | id | {String} | Widget ID | | lightbox\_custom\_css | {String} | Compiled Custom CSS for Expanded Tile | | lightbox\_source\_css | {String} | Source Custom CSS in LESS syntax for Expanded Tile | | slug | {String} | Widget Domain | | source\_css | {String} | Source Custom CSS in LESS syntax for Inline Tile | | stack\_id | {Number} | Stack ID | | short\_name | {String} | Short name of current Stack | | style.name | {String} | Name of your Widget | ## Methods To ease the pain of building a widget from scratch, we've provided some methods for you. | Method Name | Arguments | Return Value | Description | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Stackla.loadTilesByFilter |

  1. options {Object} (optional)

  2. callback {Funciton} (optional)

|

$.Deferred

|

Loads tiles data from the selected filter in Widget edit page (Settings > Select Filter)

| | Stackla.render |

  1. data {Object} (required)

  2. options {Object} (optional)

  3. callback {Funciton} (optional)

|

$.Deferred

|

Renders the layout template by provided data and outputs it on page.

The following lists the details for the optional options object.

| | Stackla.expandTile |

  1. tileData {Object} (required)
  2. expandType {String} (optional)
| void | Displays the Expanded Tile by providing the tile data. You can specify `portrait` or `landscape` as expand type. Also other options to control what to show, `show_products` `show_shopspots` and `show_caption` | | | | | | | | | | | ### Sample Usage #### Using Callback You can use old school callback. ``` Stackla.loadTilesByFilter(function (tiles, dataFilter) { Stackla.render({tiles: tiles}); }); ``` #### Using jQuery Deferred Or use the modern Promise-style way. ``` Stackla.loadTilesByFilter() .then(function (tiles, dataFilter) { Stackla.render({tiles: tiles}); }); ``` #### Adjusting Options You can adjust the request parameters by providing options object. ``` // Using jQuery Deferred Stackla.loadTilesByFilter({filter_id: 1234, page: 2}) .then(function (tiles) { Stackla.render({tiles: tiles}); }); // Or using tranditional callback Stackla.loadTilesByFilter({filter_id: 1234, page: 2}, function (tiles) { Stackla.render({tiles: tiles}); }); ``` #### Customized Rendering You can render the widget according to your needs. ``` Stackla.loadTilesByFilter().then(function (tiles) { Stackla.render({tiles: tiles}, { auto_resize: false, // Handle the iframe resizing by yourself renderer: function (data, options, templates) { // Render the HTML var html = Mustache.render(options.template, data, templates); console.log(options.template, data, templates); // Create a wrapper instead of appending to body directly. $wrapper = $('
'); $wrapper.html(html); $(document.body).prepend($wrapper); // Adjust the viewport height manually since I set auto_resize to false. Stackla.postMessage('resize', {height: $('body').height()}); return html; } }); }); ``` #### Fetching Extra Data You can load your own data. ``` $.when( Stackla.loadTilesByFilter(), yourExtraDataRequest() ).then(function (tilesResponse, extraDataResponse) { Stackla.render({ tiles: tilesResponse[0], extra: extraDataResponse[0] }); }); ``` #### Config Expanded Tile You can customize what to show on expanded tile. 
Stackla.expandTile(data.tiles[$(this).attr("tileInnerID")],{
        layout: 'landscape',
        show_shopspots: true,
        show_products: true,
        show_caption: true
}
### Tile Properties You can use all of the following properties in both your JavaScript and Tile Template. | Property Name | Type | Description | | ------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------- | | anonymous | {Boolean} | `true` if this tile doesn't display both user avatar and name. Only Custom Tile would set this property to `true` | | avatar | {String} | Avatar URL | | avatars | {Object} | Different avatar sizes including L, M, S, XL, and XS | | caption | {String} | Parsed message | | claimed | {Boolean} | `true` if this tile is being claimed | | class\_names | {String} | Default CSS class names which should be added to tile wrapper element | | comments | {Array} | Comment list | | competitions | {Array} | Competition list | | content\_only | {Boolean} | `true` if this tile doesn't display anything except content. Only Custom Tile would set this property to `true` | | created\_at | {Number} | The timestamp of Nosto's UGC ingestion | | downs | {Array} | Dislike list | | emoji | {Function} | The lambda for converting Emoji unicode to images, which is useful in Mustache. | | has\_avatar | {Boolean} | Indicates if this tile has an user avatar | | has\_image | {Boolean} | Indicates if this tile has an image | | has\_image\_dimension | {Boolean} | Indicates if the tile image has dimension saved in Nosto's UGC | | has\_title | {Boolean} | Indicates if the tile has a title | | has\_video | {Boolean} | Indicates if the tile has a video | | height\_ratio | {Number} | The ratio of image height | | html | {String} | Tile message in HTML (not always available) | | id | {String} | Tile ID | | image | {String} | Image URL | | image\_thumbnail\_url | {String} | A smaller (400px) and optimised version of image URL | | image\_alt\_text | {String} | Image alternative text | | image\_max | {String} | Large image URL | | image\_max\_height | {Number} | Large image height | | image\_max\_width | {Number} | Large image width | | is\_ecal | {Boolean} | Indicates if it's an ECal tile | | is\_firefox | {Boolean} | Indicates if user's browser is Firefox | | is\_gif\_video | {Boolean} | Indicates if it's a GIF video tile | | is\_ie8 | {Boolean} | Indicate if user's browser is IE8 | | is\_pin | {Boolean} | indicate if it's an pinned tile | | is\_stackla\_feed | {Boolean} | Indicate if it's a stackla feed | | is\_video | {Boolean} | Indicate if it's a video | | is\_winner | {Boolean} | Indicate if it's a winner tile for competition | | lang | {String} | Detected language code | | media | {String} | Media type. The value could be `image`, `video`, or `text` | | message | {String} | Tile message | | numComments | {Number} | The amount of comments | | numDowns | {Number} | The amount of down (dislike/vote) | | numQueuedComments | {Number} | The amount of queued comments | | numUps | {Number} | The amount of up (like/vote) | | numVotes | {Number} | The amount of vote | | original\_link | {String} | The URL of original post | | original\_url | {String} | The URL of original post | | replies | {Array} | Comment replies list | | score | {Number} | Like/Dislike Score | | source | {String} | Source media name such as `rss`, `sta_feed`, `twtiter` and so on | | source\_created\_at | {Number} | Creation timestamp of original post | | source\_user\_id | {String} | Creation User ID in source website | | stackla\_sentiment\_score | {Number} | Sentimental score | | tag\_class\_names | {String} | CSS class names which should be added to tile wrapper element | | tag\_id\_list | {String} | Tag ID list which is separated by comma | | tag\_name\_list | {String} | Tag name list which is separated by comma | | tags | {Array} | Tag ID array | | tags\_extended | {Array} | Extended tag data | | term\_meta | {Array} | Aggregation terms meta | | terms | {String} | Aggregation terms list which is separated by comma | | time\_phrase | {String} | Time format 1. ex. "10 Dec" | | timephrase | {String} | Time format 2. ex. "2 weeks ago" | | title | {String} | Tile title | | updated\_at | {Number} | Last updated timestamp | | ups | {Array} | Up list of like/dislike | | user | {String} | User handle | | user\_link | {String} | User URL of source website | | vd | {Boolean} | Visible on Desktop | | ve | {Boolean} | Visible on Eventscreen | | via\_source | {String} | Same with `source` | | mp4\_url | {String} | Video URL | | vm | {Boolean} | Visible on mobile | | vote\_id | {String} | Vote ID | | voted\_competition | {Boolean} | Indicates if current user has voted for competition. | | votes | {Array} | Vote list | | vw | {Boolean} | Visible on Widget | | width\_ratio | {Number} | Width ratio | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.nosto.com/ugc/api-docs/javascript/widgets/blank-canvas.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.