Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Countdown

...

Introduction

...

timers boost engagement by attracting the viewer's attention and improving page performance. Use the Countdown macro to drive a sense of urgency in different ways, including the promotion of a big product launch or a deadline for a webinar application.

...

Examples

...

CountDownTimer
backgroundColor#ffc300
borderColor#172b4d
timerTypeBOX_FILLED
defaultDaysRemaining189
format24
lineColor#DFE1E6
time2022-04-21T08:30+0200
alignmentcenter
titleHappy Birthday
fontColor#172b4d
CountDownTimer
backgroundColor#00badd
borderColor#172b4d
timerTypeBOX_BORDERED
defaultDaysRemaining163
format24
lineColor#DFE1E6
time2022-03-25T22:30+0100
alignmentcenter
titleTeam Event
fontColor#172b4d
CountDownTimer
backgroundColor#DFE1E6
borderColor#172b4d
timerTypeLINES
defaultDaysRemaining48
format24
lineColor#ffc300
time2021-12-01T10:30+0100
alignmentcenter
titleWebinar
fontColor#0052CC

How to use

...

Countdown v2

...

backgroundColor#0052CC
borderColor#FF8B00
timerTypeCIRCLES
defaultDaysRemaining77
format24
lineColor#DFE1E6
time2021-12-30T10:00+0100
alignmentcenter
titleRelease Date
fontColor#0052CC
data{"overline":"Special offer","title":"Coming soon!","text":"Curabitur lobortis id lorem id bibendum. Ut id consectetur magna.","time":"2023-11-30T23:23+0000","format":"24","alignment":"center","timerType":"PANEL","countdownSize":100,"defaultDaysRemaining":31,"borderRadius":3,"timerLayout":[{"label":"Title","value":"title"},{"label":"Text","value":"text"}],"colorFields":{"Title":"#414142","Timer":"#0065FF","Overline":"#414142"}}

...

How to use

To add the Countdown macro to a Confluence page: 

...

  • Choose “+” in the Confluence editor

...

  • Search the “cards” and select the MacroSuite - Countdown

...

  • .

Alternatively, type '/'

...

on the Confluence page to see a list of suggestions and

...

type 'Countdown.'

...

Intuitive configuration dialogue helps users to create and

...

After selecting the Countdown macro, there is an empty live preview.

...

customize buttons fast and easily.

Countdown type

Choose from four different countdown types.

Countdown alignment

Select a countdown alignment. By default, the countdown macro is left aligned.

Title

Add a countdown title with a click on the Countdown Title. The character limit is 40. If you want to add emoji in the title, type “:”.

...

...

Add date and time

Add a date and time in to start the countdown and see the preview.

Colour

Choose a fill, font and border colours from the Atlassian primary and secondary colour palette. If you want to add more colours, add a HEX value to the custom field.

...

...

Roadmap

The Countdown macro will receive updates to improve performance and user experience. We will introduce the following features soon:

  • Select the smallest time units (e.g., days only) 

  • Add an icon within the countdown

...

  • title

...

  • Repeat countdown

  • Change the countdown title after the time is up

...

If you have any questions, need more detailed information, or would like to share feature suggestions, please

...

get in touch with us via our service desk.

Button macro
buttonTextSuggest new feature
isButtonShadowOn

...

true
emoji{}
buttonColor

...

#0052CC
buttonBorderColortransparent
buttonBorderHoverColortransparent
buttonNewTabtrue
buttonFontColor#ffffff
buttonSize

...

medium
buttonIconColor#ffffff
buttonWidthDetection280
buttonHoverColor

...

transparent
buttonFontHoverColortransparent
buttonIconHoverColortransparent
buttonIcon

...

bootstrap/

...

CloudsFill
buttonType

...

text
buttonLink{"link":"https://caelor.atlassian.net/servicedesk/customer/portal/1/group/1/create/8","source":"direct"}
buttonRadius3

...

buttonNewLink

...

emojiEnabled

...

false
buttonWidth

...

280

...