API & Docs
You can make widgets dynamically by customizing their parameters in your code. This way you don't have to visit our site every time you need to make, edit or remove a counter.
Below you'll find examples and a full description of customizable options. If you have any questions or suggestions, feel free to contact us.
Note: Dynamic widgets will contain a link to TickCounter. If you wish to remove it, please drop us a line.
Demo
Countdown
<a data-type="countdown"
data-name="Sale ends in:"
data-bg_color="#97B8FF"
data-name_color="#008922"
data-border_color="#888888"
data-dt="2025-01-01 12:30:55"
data-timezone="America/Chicago"
style="display: block; width: 100%; position: relative; padding-bottom: 25%"
class="tickcounter"
href="//www.tickcounter.com"
>Countdown</a>
<script>(function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));</script>
Try it out at CodePen Attributes
All fields are optional as each of them has a default value.
Common (all widget types)
| Name | Example value | Default value | Notes |
|---|---|---|---|
| data-type | ticker | countdown |
Widget type. Choices:
|
| data-name | Hello widget! | My Countdown | Name of your widget. Up to 100 characters. |
| data-name_color | rgba(1, 255, 3, 1) | #3B5998 | Widget name color. Use either HEX or RGBA values. |
| data-bg_color | rgba(1, 255, 3, 1) | #FFFFFF |
Widget background color. Use either HEX or RGBA values. For transparent background use: rgba(0,0,0,0) |
| data-border_width | 0 | 1 | Widget border width in pixels. Use 0 to remove border completely. |
| data-border_color | rgba(1, 255, 3, 1) | #E6E6E6 | Widget border color. Use either HEX or RGBA values. |
| data-show_name | false | true | Specifies whether to display the name of the widget. |
| data-layout | horizontal | vertical | Widget layout: vertical or horizontal. |
| data-widget_horizontal_padding | 200px | 0% | Total horizontal padding of the widget. |
Countdown
| Name | Example value | Default value | Notes |
|---|---|---|---|
| data-dt | 2050-01-01 12:30:15 | (next New Year's Eve) | Target date and time. Format: YYYY-MM-DD HH:MM:SS |
| data-timezone | America/New_York | UTC |
Timezone for provided date. Any of IANA codes (column TZ*) |
| data-digits_color | rgba(1, 255, 3, 1) | #000000 | Color of the time units in timer. Use either HEX or RGBA values. |
| data-last_unit_color | rgba(1, 255, 3, 1) | #FF0000 | Color of the last time unit in timer. Use either HEX or RGBA values. |
| data-show_units | false | true | Specifies whether to display unit names in widget. |
| data-on_finish | keep_counting | stop_counting |
|
| data-units | hms | dhms |
Time units to display (joined in one word without spaces). Choices:
|
| data-language | pt_BR | en |
Language in which units are displayed. Choices:
|
| data-font | Arial | Helvetica |
Font style of the widget. Choices:
|
Count-up
| Name | Example value | Default value | Notes |
|---|---|---|---|
| data-dt | 2000-01-01 12:30:15 | (last New Year's Eve) | Target date and time. Format: YYYY-MM-DD HH:MM:SS |
| data-timezone | America/New_York | UTC |
Timezone for provided date. Any of IANA codes (column TZ*) |
| data-digits_color | rgba(1, 255, 3, 1) | #000000 | Color of the time units in timer. Use either HEX or RGBA values. |
| data-last_unit_color | rgba(1, 255, 3, 1) | #FF0000 | Color of the last time unit in timer. Use either HEX or RGBA values. |
| data-show_units | false | true | Specifies whether to display unit names in widget. |
| data-units | hms | dhms |
Time units to display (joined in one word without spaces). Choices:
|
| data-language | pt_BR | en |
Language in which units are displayed. Choices:
|
| data-font | Arial | Helvetica |
Font style of the widget. Choices:
|
Clock
| Name | Example value | Default value | Notes |
|---|---|---|---|
| data-timezone | America/New_York | UTC |
Timezone for the clock. Any of IANA codes (column TZ*) |
| data-twelve_hour_clock | true | false | Specifies whether to display the time in 12-hour clock format. |
| data-show_date | false | true | Specifies whether to display the date string under the clock. |
| data-time_color | rgba(1, 255, 3, 1) | #000000 | Color of the time string. Use either HEX or RGBA values. |
| data-date_color | rgba(1, 255, 3, 1) | #505050 | Color of the date string. Use either HEX or RGBA values. |
| data-font | Arial | Helvetica |
Font style of the widget. Choices:
|
Ticker
| Name | Example value | Default value | Notes |
|---|---|---|---|
| data-equation | (0.8 * step) / 2 | step + 1000 | Formula to be calculated. step variable is the number of the current step. It starts with 0, then it's 1, 2, 3 and so on. |
| data-step_delay | 5 | 1 | Time between steps (in seconds). Defaults to one second. |
| data-dt | 2000-01-01 12:30:15 | (now) | Start date for the ticker. Format: YYYY-MM-DD HH:MM:SS |
| data-timezone | America/New_York | UTC |
Timezone for provided date. Any of IANA codes (column TZ*) |
| data-decimal_places | 4 | 2 |
Number of decimal places to show in a result. Hint: Set it to an empty string to have it auto-calculated (not recommended due to "jumping digits"). |
| data-unit_name | USD, kg, pcs | (empty) | Unit name displayed right after the calculated value. |
| data-thousand_separator | "," (comma) " " (space) | (empty) | Character to be used as a thousands separator. |
| data-decimal_separator | "," (comma) "." (dot) | "." (dot) | Character to be used as a decimal separator. |
| data-value_color | rgba(1, 255, 3, 1) | #000000 | Color of the output value. Use either HEX or RGBA values. |
| data-fraction_color | rgba(1, 255, 3, 1) | #FF0000 | Color of the fraction part in output value. Use either HEX or RGBA values. |
| data-unit_name_color | rgba(1, 255, 3, 1) | #000000 | Color of the unit name. Use either HEX or RGBA values. |
| data-font | Arial | Helvetica |
Font style of the widget. Choices:
|
Tip: Ticker does not work? No value or error is displayed? Most likely your equation field contains an error.
Width
By default, widget width is responsive. You can set it to a static value by changing:
<a class="tickcounter" style="display: block; width: 100%; position: relative; padding-bottom: 25%" ... >
to:
<a class="tickcounter" style="display: block; width: 600px; height: 150px;" ... >
Examples
- Countdown to 2050
- Time passed since World War II (count-up)
- Current time in London (clock)
- Result of 1.37 * sin(step + 0.5) * pi (ticker)