Svoboda | Graniru | BBC Russia | Golosameriki | Facebook
Toggle menu

API & Docs

You can create widgets dynamically by customizing their parameters in your code. This way you don't have to visit our site every time you need to create, 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 at [email protected].

Note: At this moment all dynamic widgets contain a link to TickCounter. Currently, there is no way to remove our link in this kind of widgets.

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="2022-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:
  • countdown
  • countup
  • clock
  • ticker
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.

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
  • stop_counting will stop counting on 0
  • keep_counting will start to count up the missed time (with a minus sign)
data-units hms dhms Time units to display (joined in one word without spaces). Choices:
  • y (years)
  • m (months)
  • w (weeks)
  • d (days)
  • h (hours)
  • m (minutes)
  • s (seconds)
data-language pt_BR en Language in which units are displayed. Choices:
  • zh_CN (Chinese Simplified)
  • zh_TW (Chinese Traditional)
  • cs (Czech)
  • da (Danish)
  • nl (Dutch)
  • en (English)
  • fr (French)
  • de (German)
  • he (Hebrew)
  • it (Italian)
  • ja (Japanese)
  • ko (Korean)
  • nb (Norwegian)
  • pl (Polish)
  • pt_BR (Portuguese)
  • ru (Russian)
  • es (Spanish)
  • sv (Swedish)
  • th (Thai)
  • tr (Turkish)

Countup

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:
  • y (years)
  • m (months)
  • w (weeks)
  • d (days)
  • h (hours)
  • m (minutes)
  • s (seconds)
data-language pt_BR en Language in which units are displayed. Choices:
  • zh_CN (Chinese Simplified)
  • zh_TW (Chinese Traditional)
  • cs (Czech)
  • da (Danish)
  • nl (Dutch)
  • en (English)
  • fr (French)
  • de (German)
  • he (Hebrew)
  • it (Italian)
  • ja (Japanese)
  • ko (Korean)
  • nb (Norwegian)
  • pl (Polish)
  • pt_BR (Portuguese)
  • ru (Russian)
  • es (Spanish)
  • sv (Swedish)
  • th (Thai)
  • tr (Turkish)

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.

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.

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

Why TickCounter

  • Cross-browser and responsive
  • Multiple languages supported
  • Easy integrations
  • SSL encryption
  • Trusted by 1.5+ million sites

Hot counters

Info