AlertTicker-Card

# AlertTicker Card for Home Assistant

A custom Lovelace card to display alerts and notifications based on entity states. Supports 52 visual themes (including 4 dedicated timer themes, 8 spectacular 3D themes, and 2 weather forecast themes), 12 transition animations, card interactions, entity filter, device class auto-discovery, grouped alerts with expand/collapse, alert history, snooze, secondary entity values, timer countdown, full Jinja2 template support, vertical layout, HA global theme adaptation, global overlay/toast notifications visible from any dashboard view, per-alert time windows, per-alert user visibility, manual alert navigation, animated weather/clock clear widget, 7-day weather forecast widget, media player mode with album art and playback controls, Text-to-Speech announcements (standard TTS, Alexa, Google Home), mobile push notifications, live camera snapshots in the overlay banner, and a complete visual editor — all without writing a single line of YAML.

☕ If you enjoy this card and it saves you time, consider buying me a coffee — it keeps the updates coming!

Community Contributors

A special thank you to @edwardtich1 for contributing the full Russian (RU) language translation — covering all card labels, editor UI, theme defaults, and operator names. (#53)

A special thank you to @vdt2210 for contributing the Vietnamese (VI) language translation. (#12)

A special thank you to @kgn3400 for contributing the full Danish (DA) language translation — covering all card labels, editor UI, theme defaults, operator names, and overlay strings. (#57)

A special thank you to @feixm1 for contributing the full Czech (CS) language translation — covering all card labels, editor UI, theme defaults, operator names, and overlay strings. (#74)

A special thank you to @Bsector for contributing the Portuguese / pt-BR language translation — providing the core card runtime strings that formed the basis of the full pt-BR support now included in the card. (#90)

A special thank you to @yunusuztr for contributing the full Turkish (TR) language translation — covering all card labels, editor UI, theme defaults, TTS prefixes, operator names, and overlay strings. (#134)

Video Tutorial

A big thank you to SmartHomeJunkie for making a dedicated video about AlertTicker Card!

Features at a Glance

🔊 Text-to-Speech Announcements (new in 1.2.2)

Make Home Assistant read your alerts aloud the moment they trigger — on any speaker, Alexa Echo device, or Google Home.

# Standard HA TTS (media_player + TTS engine)
alerts:
  - entity: binary_sensor.smoke_detector
    state: "on"
    message: "Smoke detected!"
    theme: fire
    tts: true                            # enable TTS for this alert
    tts_entity: media_player.living_room # speaker to use
    # tts_engine: tts.google_en_com      # auto-detected if omitted

# Alexa Echo (via notify service)
alerts:
  - entity: binary_sensor.front_door
    state: "on"
    message: "Front door open"
    tts: true
    tts_notify_service: alexa_media_echo_dot_kitchen
    tts_message: "Attention — the front door is open"   # optional custom sentence

How it works

• Enable tts: true on any individual alert.
• If no tts_message is set, the card auto-generates a natural sentence from a built-in dictionary in 10 languages, based on the alert's theme category. For example, a critical theme in Italian produces "Allarme critico: Sensore fumo cucina".
• The spoken language is read from hass.language and falls back to English automatically.
• Set a global master toggle (tts_enabled: false) in the General tab to disable all TTS at once without losing per-alert settings.

TTS service options

Per-alert fields override global card-level defaults, so you can have one speaker for most alerts and a different one for critical alerts.

Card-level TTS options

Per-alert TTS options

📱 Mobile Push Notifications (new in 1.3)

Send a push notification to any Home Assistant notify.* service the moment an alert fires — works with the HA Companion App, Telegram, Pushover, and any other notify integration.

alerts:
  - entity: binary_sensor.front_door
    state: "on"
    theme: door
    message: "Front door open"
    push_notify: true
    push_notify_service: mobile_app_my_phone         # required
    push_notify_title: "🚪 Door Alert"               # optional, Jinja2
    push_notify_message: "Door opened — {state}"     # optional, Jinja2

How it works

• Enable push_notify: true on any individual alert.
• If no push_notify_title is set, the card uses the alert's badge label (or name if set).
• If no push_notify_message is set, the card uses the alert's display message (same text shown in the ticker).
• Both fields support {state}, {name}, {entity}, {device} placeholders and full Jinja2 templates.
• Set a global master toggle (push_notify_enabled: false) in the General tab → 📱 Push Notifications to disable all push notifications at once without touching individual alerts.

Per-alert push notification options

🎵 Music Player Mode (new in 1.2.6)

Turn any media_player.* entity into a full graphical player card. When show_player_controls: true is set and the entity is a media player, the music theme renders a cinematic player UI instead of the default floating notes.

alerts:
  - entity: media_player.spotify_davide
    theme: music
    show_player_controls: true
    music_player_color: "#e040fb"   # optional accent color

What the player shows

Accent color

All colors in the player UI (buttons, glow, equalizer, vinyl ring, accent line) are driven by a single --mu-accent CSS custom property, set from music_player_color. Change it from the editor's color picker to instantly retheme the entire player:

music_player_color: "#00e5ff"   # cyan
music_player_color: "#69f0ae"   # green
music_player_color: "#ff4081"   # pink

Auto-setup in the editor

Selecting a media_player.* entity in the visual editor automatically:

• Sets theme to music
• Enables show_player_controls
• Sets state: playing and operator: =

Switching back to a non-media-player entity reverts to emergency.

Player-mode options

📷 Camera in Overlay Banner & Card Background (snapshot: 1.2.2 · live stream + card bg: 1.3.1)

Attach a camera image to an alert — either as a snapshot in the overlay banner, a live stream in the banner, or a background layer behind the alert card slide.

alerts:
  - entity: binary_sensor.front_door_motion
    state: "on"
    message: "Motion at front door"
    theme: intruder
    camera_entity: camera.front_door     # required for all camera features
    overlay_mode: true                   # show overlay banner at card level
    camera_live: true                    # live stream in banner (default: false = snapshot)
    camera_in_card: true                 # camera background in the card slide

• The snapshot/stream appears below the alert header row inside the overlay toast. Its height scales proportionally with overlay_scale.
• camera_in_card uses the entity's entity_picture attribute as a CSS background image, visible across the full card behind a semi-transparent overlay. Works with all 50 themes.
• If a snapshot fails to load, the image is silently removed and the banner stays intact.
• camera_live requires a camera entity with HLS or WebRTC stream support. Falls back to static snapshot when the <ha-camera-stream> component is not yet loaded.

Themes

🚨 Critical

⚠️ Warning

ℹ️ Info

✅ OK / All Clear

🎨 Style

⏱️ Timer (available for `timer.entities and sensors withdevice_class: timestamp`)*

All timer themes transition green → orange → red as the remaining time decreases. When using a device_class: timestamp sensor (e.g. an Alexa/Echo timer sensor), the progress bar is hidden since no total duration is known — the countdown still shows.

Note: The clear_theme accepts any theme from the ✅ OK category: success, check, confetti, heartbeat, shield, power, sunrise, plant, lock.

How It Works

Alert lifecycle

1. Configure one or more alerts, each linked to an entity + condition
2. When an entity matches the condition (and any extra conditions rules), the alert becomes active
3. Active alerts are sorted by priority (1=most critical)
4. The card displays the current alert and auto-cycles through multiple active alerts
5. Use ◀ / ▶ buttons (or swipe) to jump between alerts manually
6. Tap or hold the card to execute configured actions
7. Snooze any alert with 💤 — one tap for fixed duration, or choose from the menu
8. 📋 opens the alert history with timestamps
9. When no alerts are active and show_when_clear: true, the card shows the all-clear state (message, clock, or weather)

Transition animations

When multiple alerts are active, the card cycles using the selected animation:

Manual alert navigation

When 2 or more alerts are active, ◀ and ▶ buttons appear on the left/right edges on hover (first touch on mobile). Clicking jumps to the previous/next alert and resets the auto-cycle timer. On mobile, left/right swipe also navigates (if swipe_to_snooze is enabled, left-swipe keeps its snooze behaviour and only right-swipe navigates).

Secondary entity value

Display a live entity value as a second line below the alert message:

- entity: sensor.open_zones
  operator: "!="
  state: "0"
  message: "Zones open"
  secondary_entity: sensor.open_zones_list
  secondary_attribute: zone_names   # optional — read an attribute instead of state

tap_action / hold_action / double_tap_action

Standard Lovelace interactions — tap, hold (500 ms), or double-tap the whole card to trigger any action:

- entity: binary_sensor.front_door
  state: "on"
  message: "Front door open"
  tap_action:
    action: more-info
    entity_id: binary_sensor.front_door
  hold_action:
    action: navigate
    navigation_path: /lovelace/security
  double_tap_action:
    action: call-service
    service: lock.lock
    target:
      entity_id: lock.front_door

When double_tap_action is set, a single tap waits 300 ms to distinguish the two gestures.

Supported action types: call-service, navigate, more-info, url, none.

on_change — trigger on any state change

Fire an alert whenever an entity changes state, regardless of the operator/state condition. The alert stays visible until the next state change, or auto-dismisses after auto_dismiss_after seconds:

- entity: media_player.living_room
  on_change: true
  auto_dismiss_after: 15
  message: "Now playing: {state}"
  theme: notification

time_range — restrict to a time window

Show an alert only within a specific time window. Supports midnight crossing:

- entity: binary_sensor.front_door
  state: "on"
  message: "Door open at night!"
  time_range:
    from: "22:00"
    to: "07:00"
  theme: intruder

The card re-evaluates at each minute boundary so alerts appear and disappear on time without any entity state change. Leave both fields empty for always-active.

visible_to — per-alert user filter

Restrict an alert to specific Home Assistant users without separate cards or conditional wrappers:

- entity: sensor.server_load
  state: "high"
  message: "Server load critical"
  visible_to: admin          # admin | non_admin | "John" | ["John", "Maria"]

device_class — auto-discover by device class

Instead of listing individual entities or writing a text filter, specify a HA device class. The card auto-discovers every entity with that class and creates one alert per match:

- device_class: smoke
  state: "on"
  message: "Smoke detected: {name}"
  theme: fire
  priority: 1

- device_class: battery
  attribute: battery_level
  operator: "<="
  state: "15"
  message: "Low battery: {name} ({state}%)"
  theme: battery
  device_class_exclude:
    - sensor.battery_test_device

Supports the same include/exclude panel as entity_filter and all the same message placeholders ({name}, {state}, {entity}, {device}).

Jinja2 in the state trigger field

The trigger threshold itself can be a Jinja2 template — useful when the threshold is stored in a helper entity:

- entity: sensor.outdoor_temperature
  operator: ">"
  state: "{{ states('input_number.temp_alert_threshold') }}"
  message: "Temperature too high: {state}°"

Any HA template that evaluates to a string or number works here.

All-clear widget (clock / weather / forecast)

When show_when_clear: true is set and no alerts are active, the card can show an animated clock, live weather display, or 7-day forecast instead of a plain text message:

show_when_clear: true
clear_display_mode: weather_forecast   # see modes below
clear_weather_entity: weather.home

Weather modes show full animated particle backgrounds (sun rays, stars/moon/aurora, floating clouds, fog, wind streaks, rain, snow, hail, lightning, exceptional). All weather info and the clock are rendered as frosted-glass corner badges so the animated sky stays fully visible.

🗓️ 7-day forecast widget

The forecast and weather_forecast modes display a full-width daily forecast grid sourced from HA's weather/subscribe_forecast WebSocket API (HA 2023.9+):

• Weather emoji and condition label for each day
• High / low temperatures color-coded: blue (cold) → amber (warm) → red (hot)
• Precipitation probability bar visible when ≥20%
• Today's column elevated with frosted glass, floating emoji animation, and accent glow
• Day labels auto-localized via Intl.DateTimeFormat in all 11 supported languages

When used with show_widget_in_cycle: true, the card ensures both the weather panel and forecast panel have been shown before advancing to the next alert.

Clock styles (clear_display_mode: clock)

Weather badge styles (all weather modes)

The split style works with all weather modes including weather_forecast — the first panel shows weather + clock side by side, then alternates with the 7-day forecast.

Configure these in the editor (All Clear tab). Use clear_clock_show_date to toggle the date display, and clear_clock_date_position (above / below) to choose its position relative to the time.

Weather/time as a slide in the alert cycle

Insert the configured clear widget (clock / weather / weather+clock) as an extra slide in the alert rotation — displayed between alerts like any other:

show_widget_in_cycle: true
clear_display_mode: weather_clock
clear_weather_entity: weather.home

The widget uses the same cycle_animation and cycle_interval as alerts. Enable this in the editor (Cycling & Animation section), visible only when clear_display_mode is already configured.

Overlay / toast notification

Enable a global floating banner that fires when a new alert triggers — visible from any dashboard view, not just the one where the card lives:

overlay_mode: true
overlay_position: top     # top | center | bottom
overlay_duration: 8       # seconds before auto-dismiss (0 = manual close only)
overlay_scale: 1.5        # 1 | 1.5 | 2 | 3 — enlarge for wall displays

How it works:

• When the card's view is currently visible, the banner is suppressed (no redundant notification — the card itself already shows the alert).
• When you navigate away to another view (or the card is off-screen), an independent watcher reads entity states from the always-present <home-assistant> element every 2 seconds and fires the banner automatically.
• A 10-second deduplication window prevents the same alert from firing twice.
• The banner is styled according to the alert category (Critical / Warning / Info / OK / Style / Timer) and dismisses automatically after overlay_duration seconds, or manually via the × button.

Overlay scale

Use overlay_scale to enlarge the entire banner for wall-mounted tablets or TVs:

The max-width grows with the scale while staying within the viewport. Camera snapshot images (if set) also scale proportionally.

Position options: | Value | Behavior | |-------|----------| | top | Slides in from the top of the screen | | center | Pops in at the center of the screen (scale animation) | | bottom | Slides in from the bottom of the screen |

Snooze

Tap 💤 on any active alert to snooze it. Two modes (configurable in General tab):

• Menu (default) — choose 1h / 4h / 8h / 24h from a menu on the card
• Fixed duration — configure 30min / 1h / 4h / 8h / 24h for immediate one-tap snooze

Snoozed alerts persist in localStorage and the card restores them automatically when the duration expires. A small amber 💤 pill appears when some alerts are snoozed while others remain active — tap it to resume all.

snooze_action

Execute a Lovelace action when the 💤 button is tapped, in addition to snoozing. Useful for resetting sensors:

- entity: binary_sensor.mailbox
  state: "on"
  message: "Mail arrived"
  snooze_action:
    action: call-service
    service: input_boolean.turn_off
    target:
      entity_id: input_boolean.mailbox_flag

Alert history

Tap 📋 to flip the card and view a timestamped log of every alert that became active. Includes a Clear button. History is stored in localStorage (configurable max: 25 / 50 / 100 / 200 events).

entity_filter

Instead of specifying a single entity, write a text filter. The card finds all entities whose ID or friendly name contains the filter text and creates one alert per match:

- entity_filter: "battery"
  attribute: battery_level
  operator: "<="
  state: "20"
  message: "Low battery: {name} ({state}%)"
  theme: battery
  entity_filter_exclude:
    - sensor.battery_test_device

Message placeholders:

The matched entity's friendly name is also automatically shown below the message so you always know which device triggered the alert.

HA template syntax in messages

The message field (and secondary_text) supports full Jinja2 template syntax — rendered server-side by Home Assistant via the WebSocket API, with live updates whenever entities change.

# Simple sensor value
- entity: sensor.co2_ppm
  operator: ">"
  state: "1000"
  message: "CO₂: {{ states('sensor.co2_ppm') }} ppm"

# Attribute value
- entity: climate.hvac
  state: heating
  message: "Heating — room: {{ state_attr('climate.hvac', 'current_temperature') }}°"

# Conditional logic
- entity: sensor.battery_phone
  operator: "<"
  state: "20"
  message: >
    {% if states('sensor.battery_phone') | int < 10 %}
      Critical: {{ states('sensor.battery_phone') }}%
    {% else %}
      Low battery: {{ states('sensor.battery_phone') }}%
    {% endif %}

# Time / date
- entity: binary_sensor.night_mode
  state: "on"
  message: "Night mode active since {{ now().strftime('%H:%M') }}"

# Math / unit conversion
- entity: sensor.power_consumption
  operator: ">"
  state: "2000"
  message: "High consumption: {{ (states('sensor.power_consumption') | float / 1000) | round(2) }} kW"

Any template that works in HA automations and template sensors works here too.

Editor preview: type a filter text and a live counter shows how many entities match. Click the counter to expand a full list with names, entity IDs and current states. Click any entity to exclude it (✗) or re-include it (✓).

Timer themes

Select a timer.* entity and use one of the 4 dedicated timer themes. The card reads finishes_at from the timer attributes and updates the display every second:

- entity: timer.ad_blocker_paused
  state: active
  message: "Ad blocking disabled for {timer}"
  theme: countdown

Use {timer} in the message to display the live countdown (mm:ss or h:mm:ss).

When a timer entity is selected in the editor, state is automatically set to active and the theme switches to countdown.

Numeric / comparison conditions

- entity: sensor.co2_ppm
  operator: ">"
  state: "1000"
  message: "CO₂ level critical!"

Supported operators: = (default), !=, >, <, >=, <=, contains, not_contains.

Attribute-based triggers

- entity: sensor.phone
  attribute: battery_level
  operator: "<"
  state: "20"
  message: "Phone battery critical"
  theme: battery

AND / OR multi-entity conditions

- entity: binary_sensor.front_door
  state: "on"
  conditions_logic: "and"
  conditions:
    - entity: input_boolean.night_mode
      operator: "="
      state: "on"
  message: "Door open at night"
  theme: intruder

• and — all conditions must match (default)
• or — at least one condition must match

HA icons (mdi:)

Enable the use_ha_icon toggle per alert to use a native HA icon instead of an emoji. When enabled, the card first reads the entity's icon from the HA entity registry — so you get the correct icon automatically without setting it manually. You can also pick any mdi: or hass: icon from the native HA icon picker in the editor. Combine with icon_color to tint the icon with any CSS color.

Any icon namespace is accepted — not just mdi: and hass:. Icons from hue:, phu:, cil:, and any other custom set registered via extra_module_url work automatically.

Message placeholders

{state}, {name}, {entity}, and {device} work in the message field of any alert that has an entity set — not just entity_filter alerts:

- entity: sensor.meter_abe4
  operator: "<="
  state: "20"
  message: "Battery low: {state}%"
  secondary_text: "Device: {device}"

secondary_text

A static second line displayed below the message. Supports placeholders. Does not require a secondary entity:

secondary_text: "Zone: {name} — Current: {state}"

Badge customization

Hide the category badge or replace its text:

show_badge: false        # hide completely
badge_label: "URGENT"   # or use a custom label

Sound notifications

Play an audio tone when an alert becomes active. Uses the Web Audio API — no files required for the default tones:

- entity: binary_sensor.smoke_detector
  state: "on"
  message: "Smoke detected!"
  sound: true
  sound_url: "https://example.com/alarm.mp3"  # optional custom sound

Default tones by category: Critical = double high beep · Warning = medium beep · Info = soft beep · OK = rising chime.

Note: requires browser autoplay permission. Works out of the box on wall-mounted tablets with HA Companion.

Large buttons

Always-visible pill-shaped 💤 and 📋 buttons — useful for wall-mounted tablets where hover is not available:

large_buttons: true

Swipe to snooze

Enable a left-swipe gesture to snooze the current alert on touch devices. Works independently of tap_action and hold_action — no conflict:

swipe_to_snooze: true

Swipe at least 60 px horizontally to trigger. Uses the configured snooze_duration (or 1 h if none is set).

Invisible touch zone (mobile)

A 22%-wide invisible zone on the right side of the card reveals the action buttons (snooze / history / nav arrows) on the first tap. The buttons auto-hide after 4 seconds. Never interferes with tap_action, hold_action, or double_tap_action.

Vertical layout

Stack the icon on top and the message below, centered — useful for narrow columns or square card grids:

vertical: true

Works with all 50 themes. The Ticker theme keeps its horizontal scrolling. Can be combined with ha_theme: true and large_buttons: true.

HA theme adaptation

Adapt the card's color palette to the active Home Assistant global theme:

ha_theme: true

When enabled:

• Card background → --card-background-color
• Text → --primary-text-color / --secondary-text-color
• Critical badges/borders → --error-color
• Warning badges/borders → --warning-color
• Info badges/borders → --info-color
• OK badges/borders → --success-color

All 50 visual themes retain their animations and layouts — only the color palette adapts. Compatible with Mushroom, Material, iOS, and any custom HA theme.

Card border

Enable a persistent visible border around the card using the standard HA border style:

card_border: true

Default: false (off). Uses --ha-card-border-width and --ha-card-border-color from the active HA theme. When card_border is on and the card is otherwise hidden (no alerts, show_when_clear off), a subtle dashed placeholder with a 🔔 icon is shown so the card remains discoverable and editable.

Test mode

Force all configured alerts to display as active — useful for previewing the card appearance without waiting for real conditions:

test_mode: true

Remember to remove test_mode before going live. A yellow banner is shown on the card as a reminder.

In the visual editor, open the Alerts tab → enable Test mode at the bottom → expand any alert to instantly preview it on the card.

Installation

Via HACS (recommended)

1. Click the button above or open HACS → Frontend
2. Click ⋮ → Custom repositories
3. Add https://github.com/djdevil/AlertTicker-Card as type Lovelace
4. Find AlertTicker Card and click Download
5. Reload your browser

Manual

1. Download alert-ticker-card.js and alert-ticker-card-editor.js from the latest release
2. Copy both files to /config/www/
3. Go to Settings → Dashboards → Resources
4. Add /local/alert-ticker-card.js as a JavaScript module
5. Reload the browser

Visual Editor

No YAML knowledge required. The editor uses a hub-and-spoke layout: the main menu shows all sections as tiles; click any tile to open it.

🔔 Alerts tab

For each alert:

You can reorder alerts with ↑ / ↓ buttons.

⚙️ General tab

🖼️ Layout & Appearance tab

🔔 Overlay tab

The tab shows an ON badge when overlay mode is active.

✅ All Clear tab

YAML Configuration

Card-level options

Alert-level options

*One of entity, entity_filter, or device_class is required.

Action object (tap_action, hold_action, double_tap_action, snooze_action, clear_*_action)

Examples

Battery monitor with entity filter

type: custom:alert-ticker-card
cycle_animation: slide
alerts:
  - entity_filter: "battery"
    attribute: battery_level
    operator: "<="
    state: "20"
    message: "Low battery: {name} ({state}%)"
    theme: battery
    priority: 2
    entity_filter_exclude:
      - sensor.battery_test_device

Smoke detector with TTS + camera snapshot

type: custom:alert-ticker-card
overlay_mode: true
overlay_scale: 1.5
tts_entity: media_player.living_room
alerts:
  - entity: binary_sensor.smoke_detector
    state: "on"
    message: "Smoke detected!"
    theme: fire
    priority: 1
    tts: true
    camera_entity: camera.kitchen

Alexa TTS announcement on door open

type: custom:alert-ticker-card
alerts:
  - entity: binary_sensor.front_door
    state: "on"
    message: "Front door is open"
    theme: door
    tts: true
    tts_notify_service: alexa_media_echo_dot_hallway
    tts_message: "Attention — the front door has been opened"

All smoke detectors via device_class

type: custom:alert-ticker-card
alerts:
  - device_class: smoke
    state: "on"
    message: "Smoke detected: {name}"
    theme: fire
    priority: 1
    tts: true
    tts_entity: media_player.all_speakers

Dynamic threshold from helper entity

type: custom:alert-ticker-card
alerts:
  - entity: sensor.outdoor_temperature
    operator: ">"
    state: "{{ states('input_number.temp_alert_threshold') }}"
    message: "Temperature too high: {state}°"
    theme: temperature

Timer with countdown

type: custom:alert-ticker-card
alerts:
  - entity: timer.ad_blocker_paused
    state: active
    message: "Ad blocking disabled for {timer}"
    theme: countdown
    priority: 2

Alarm with tap_action

type: custom:alert-ticker-card
alerts:
  - entity: alarm_control_panel.home
    state: "triggered"
    message: "ALARM TRIGGERED"
    priority: 1
    theme: emergency
    tap_action:
      action: call-service
      service: alarm_control_panel.alarm_disarm
      target:
        entity_id: alarm_control_panel.home
      service_data:
        code: "1234"

Smart snooze (resets the sensor)

type: custom:alert-ticker-card
alerts:
  - entity: binary_sensor.mailbox
    state: "on"
    message: "Mail arrived"
    theme: notification
    snooze_action:
      action: call-service
      service: input_boolean.turn_off
      target:
        entity_id: input_boolean.mailbox_flag

Night-time door alert (AND condition + time_range)

type: custom:alert-ticker-card
alerts:
  - entity: binary_sensor.front_door
    state: "on"
    time_range:
      from: "22:00"
      to: "07:00"
    message: "Front door open at night!"
    priority: 1
    theme: intruder
    hold_action:
      action: navigate
      navigation_path: /lovelace/security

Alert visible only to admins

type: custom:alert-ticker-card
alerts:
  - entity: sensor.server_load
    operator: ">"
    state: "90"
    message: "Server CPU at {state}%"
    visible_to: admin
    theme: warning

Push notification on door open

type: custom:alert-ticker-card
alerts:
  - entity: binary_sensor.front_door
    state: "on"
    message: "Front door open"
    theme: door
    notify_push: true
    notify_push_service: mobile_app_iphone_di_mario
    notify_push_title: "Door Alert"
    notify_push_message: "{name} opened at {{ now().strftime('%H:%M') }}"

Music player with custom accent color

type: custom:alert-ticker-card
alerts:
  - entity: media_player.spotify_davide
    theme: music
    show_player_controls: true
    music_player_color: "#00e5ff"
    operator: "="
    state: playing

Weather + 7-day forecast alternating

type: custom:alert-ticker-card
show_when_clear: true
clear_display_mode: weather_forecast
clear_weather_entity: weather.home
clear_weather_style: default
show_widget_in_cycle: true
alerts:
  - entity: binary_sensor.smoke_detector
    state: "on"
    message: "Smoke detected!"
    theme: fire

All-clear with animated weather + widget in cycle

type: custom:alert-ticker-card
show_when_clear: true
clear_display_mode: weather_clock
clear_weather_entity: weather.home
show_widget_in_cycle: true
alerts:
  - entity: binary_sensor.smoke_detector
    state: "on"
    message: "Smoke detected!"
    theme: fire

Multiple warnings cycling

type: custom:alert-ticker-card
cycle_interval: 8
cycle_animation: slide
show_when_clear: true
clear_message: "All systems normal"
clear_theme: success
alerts:
  - entity: binary_sensor.smoke_detector
    state: "on"
    message: "Smoke detected in kitchen!"
    priority: 1
    theme: fire
  - entity: binary_sensor.water_leak
    state: "on"
    message: "Water leak under sink"
    priority: 2
    theme: flood
  - entity: sensor.co2_ppm
    operator: ">"
    state: "1000"
    message: "CO₂ level too high — {state} ppm"
    priority: 2
    theme: toxic
  - entity: binary_sensor.window_contact
    state: "on"
    message: "Living room window open"
    priority: 3
    theme: window
    secondary_entity: sensor.outdoor_temperature

Languages

The card automatically detects the language from your Home Assistant settings.

TTS fallback messages (auto-generated when no tts_message is set) are available in all 12 languages and adapt automatically to the alert's theme category (critical / warning / info / ok / timer).

Troubleshooting

Card not appearing after installation

• Add alert-ticker-card.js as a JavaScript module in Settings → Dashboards → Resources
• Hard-reload the browser (Ctrl+Shift+R / Cmd+Shift+R)

Features not working after update (secondary text, templates, new options)

• HA and browsers cache custom card files aggressively. After updating, always do a hard-reload (Ctrl+Shift+R / Cmd+Shift+R) or go to Settings → System → Restart → Clear cache and restart. You can verify the running version by searching for CARD_VERSION in the JS file via browser DevTools.

Entity picker not showing in editor

• Known HA lazy-loading issue. The card handles it automatically. If it still doesn't appear, close and reopen the editor.

Card disappears when alerts resolve

• Set show_when_clear: true to keep the card visible.

Trigger state not matching

• State values are case-sensitive exact strings. Use the live Current state hint in the editor or check Developer Tools → States.

Timer not updating

• Ensure the timer entity state is active. The card reads finishes_at from the timer attributes. If finishes_at is missing, the countdown shows --:--.

entity_filter matching too many entities

• Use a more specific filter text, or click individual entities in the editor preview list to exclude them.

Weather widget shows placeholder but entity is configured

• Make sure clear_display_mode is set to weather or weather_clock AND clear_weather_entity points to a valid weather.* entity.

TTS not playing

• Check that tts_enabled is not false. For standard TTS, ensure tts_entity is a valid media_player.*. For Alexa, set tts_notify_service to the correct alexa_media_* service name (visible in Developer Tools → Services). The TTS engine is auto-detected from the first tts.* state — if none is found, set tts_engine explicitly.
• TTS (and push notifications) fired from the browser tab only work while the dashboard is open. To receive alerts when the browser is closed, the card automatically creates server-side HA automations ([AlertTicker] TTS and [AlertTicker] Push Notifications) via the REST API when the config is saved — check Settings → Automations to verify they exist.

Push notifications not arriving

• Verify notify_push_enabled is not false. Check that notify_push_service matches the service name exactly (without the notify. prefix). The card sends push via HA WebSocket when the dashboard is open; for 24/7 delivery, the auto-created [AlertTicker] Push Notifications automation in Settings → Automations must be present and enabled.

Camera image not appearing in overlay

• Verify the camera_entity entity exists and has an entity_picture attribute in Developer Tools → States. The image is loaded directly from the HA proxied URL — no extra authentication needed on the local network.

Contributing

See CONTRIBUTING.md for guidelines on reporting bugs, suggesting features, and contributing code.

License

MIT License — see LICENSE for details.

Support

If you find this card useful, consider buying me a coffee ☕