Tagalys Widgets are loaded by reading data attributes on HTML tags. You place a line of HTML code with your requirements where you want the widget to appear and Tagalys will load this content asynchronously.
In all these examples, data-tagalys-widget-opts-per-page should be a valid JSON string, where each key is a browser window size in pixels and value is the number of visible product tiles at that size. You can use custom pixel sizes, but Tagalys internally sets the keys 300, 600, 900, and 1200 so you should also overwrite these if you want them to be different from the defaults mentioned below.
Bestsellers (see note for how to make this specific to a category)
<div id="tagalys-namespace" class="tagalys-namespace"
data-tagalys-widget="bestsellers"
data-tagalys-widget-opts-heading="Bestsellers"
data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
data-tagalys-widget-opts-hide-if-results-under="10">
</div>
Most Viewed (see note for how to make this specific to a category)
<div id="tagalys-namespace" class="tagalys-namespace"
data-tagalys-widget="most_viewed"
data-tagalys-widget-opts-heading="Most Viewed"
data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
data-tagalys-widget-opts-hide-if-results-under="10">
</div>
New Arrivals
<div id="tagalys-namespace" class="tagalys-namespace"
data-tagalys-widget="new_arrivals"
data-tagalys-widget-opts-heading="New Arrivals"
data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
data-tagalys-widget-opts-hide-if-results-under="10">
</div>
Top Discounts - By Percentage
<div id="tagalys-namespace" class="tagalys-namespace"
data-tagalys-widget="top_discounts_percentage"
data-tagalys-widget-opts-heading="Top Discounts"
data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
data-tagalys-widget-opts-hide-if-results-under="10">
</div>
Top Discounts - By Amount
<div id="tagalys-namespace" class="tagalys-namespace"
data-tagalys-widget="top_discounts_amount"
data-tagalys-widget-opts-heading="Biggest Savings"
data-tagalys-widget-opts-per-page='{"300":2,"600":3,"900":4,"1200":5}'
data-tagalys-widget-opts-hide-if-results-under="10">
</div>
Note
For Bestsellers and Most Viewed recommendation widgets, there is an extra parameter data-tagalys-widget-opts-f which can be dynamically set to a category or some other attribute to allow category-specific widgets. For example: data-tagalys-widget-opts-f='{"__categories":["3"]}'. It should be a valid JSON string following the same filter format as the search API uses.