What are the current options for pop up cards? I know browser_mod is one way but it seemed overly complicated. Then I think there is a pop up card in the HomeKit UI but I think its only for lights. Then there is thomasloven’s custom:popup-card but it seems to be deprecated for browser_mod.
Is there anything I am missing? Looking to do popups for media control and a weather radar at this point.
What do you find overly complicated about browser_mod popups? It’s just a couple lines of yaml and works perfectly.
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Test Popup
card:
type: entities
entities:
- sensor.some_sensor
etc...
I guess I never wrapped my head around deviceID because browser_mod made a bunch of entities I didn’t recognize.
From your yaml I’m guessing that deviceID: this is an actual command that creates the popup on the device you are using?
“popup” is the actual command. deviceID is the identifier for the current browser (obviously you can have more than 1 accessing your lovelace dashboard at once). “this” is just a pointer to the current browser 's device ID that only works when using fire-dom-event (there are a couple of methods to call pop-ups, this is the preferred way).
Honestly, i would just dig into browser_mod. It’s incredibly useful, not just for popups. All those entitles are sensor’s and devices to control your lovelace browser windows.
If you create a browser_mod.yaml file (see the git) you can prevent most of them from being created if you’re not planning on using them. Here’s an excerpt from my browser_mod.yaml.
prefix: "browser_"
disable: # new browser entities
- light
- media_player
- camera
- binary_sensor
devices:
b054fb55-7973f0e8:
name: browser_jlaptop_chrome_local
disable:
- light
- camera
- binary_sensor
I’ll try again with browser_mod. Thanks for the advice.
Hi
I am a bit confused with the browser_mod card too. I have installed it but I can’t make it work as I wish.
I need to make it work only in companion app (android). I don’t think that is possible.
What I would like to achieve in my android phone to have popups. Like to have a Living Room Lights entity and if I click to popup a card with all the light entities of the living room.
I don’t need something complex or good looking just to be simple to setup
Popups work on in Android.
Post your code and will try to figure where you went wrong.
Well now I am confused. Yesterday I tried many times to make it work in android companion app, but it didn’t work. I make popup from my edge browser in laptop, and it worked in the browser of my android phone, but not in the HA app. Today it is working (I haven’t change anything).
I am still a little confused though. First of all I have the below code in my config.yaml
browser_mod:
devices:
795fcf52-a440a663:
name: browser_makis_lenovo_laptop_edge
bb55ba3a-5eb4f458:
name: browser_makis_samsung_phone
fdc476d4_9ba3f543:
name: browser_don't_know
But in the developers tool I don’t see anywhere the names I have given. Shouldn’t I?
I also have these entities
Yesterday none of them worked in my android HA app. Now they are all working. I am confused.
The code I have in some random buttons is the below. Today all working everywhere. Which should I keep?
cards:
- cards:
- aspect_ratio: 1/1.2
icon: mdi:sofa
name: test
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: 795fcf52-a440a663
title: Test Popup
card:
type: entities
entities:
- sensor.some_sensor
show_name: true
entity: sensor.living_room_temperature_2
show_state: true
styles:
card:
- background-color: '#00000'
- border-radius: 10%
type: custom:button-card
- aspect_ratio: 1/1.2
icon: mdi:sofa
name: Living Room
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: bb55ba3a-5eb4f458
title: Test Popup
card:
type: entities
entities:
- sensor.some_sensor
show_name: true
entity: sensor.living_room_temperature_2
show_state: true
styles:
card:
- background-color: '#00000'
- border-radius: 10%
type: custom:button-card
- aspect_ratio: 1/1.2
icon: mdi:lightbulb
name: phone?
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: fdc476d4_9ba3f543
title: Test Popup
card:
type: entities
entities:
- sensor.some_sensor
type: custom:button-card
- aspect_ratio: 1/1.2
icon: mdi:lightbulb
name: this
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Test Popup
card:
type: entities
entities:
- sensor.some_sensor
type: custom:button-card
type: horizontal-stack
- cards:
- aspect_ratio: 1/1.2
icon: mdi:lightbulb
name: 1/1
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: b4dcdef6_ec5cae64
title: Test Popup
card:
type: entities
entities:
- sensor.some_sensor
type: custom:button-card
2 days before as per an example in youtube I had add to the raw configurator editor the below code. Again it was working in the laptop browser but not in android app. Today even this is working.
popup_cards:
sensor.consumption_36:
card:
entities:
- entity: switch.sonoff_10001bb5c7
type: entities
title: makis test
input_text.living_room_lights_text:
card:
entities:
- entity: switch.sonoff_10001bb5c7
- $toggle: true
entity: light.77626641ecfabc96e072
name: Dim
type: custom:slider-entity-row
- $toggle: true
entity: light.77626641ecfabc976395
name: Dimmmer
type: custom:slider-entity-row
- entity: switch.meross_lan_1812011610829529087334298f1896a5_0
- entity: switch.meross_lan_1811269316494129086734298f1861d1_1
- entity: switch.meross_lan_1811269316494129086734298f1861d1_2
- entity: light.yee_notify_lamp
- type: divider
- entity: switch.meross_lan_1811262418516429086734298f185fa8_1
- entity: switch.meross_lan_1811262418516429086734298f185fa8_2
- entity: switch.sonoff_1000a05283
- entity: switch.sonoff_10009bd11e
- type: divider
- entity: light.bedside_lamp
- entity: light.bedroom_ceiling_light
- entity: binary_sensor.bedroom_ceiling_light_nightlight
- type: divider
- entity: switch.bath_light_1
- entity: switch.bath_light_2
- entity: switch.wc_light
- type: divider
- $toggle: true
entity: light.shellydimmer2_3c6105e333cf
name: Balcony Spots
type: custom:slider-entity-row
- entity: switch.meross_lan_1811264836268229086734298f1862d0_1
- entity: switch.meross_lan_1811264836268229086734298f1862d0_2
- entity: switch.meross_lan_1812019709838229087334298f1895fb_0
- entity: switch.meross_lan_1812016823740829087334298f18972e_0
- entity: switch.meross_lan_1812013756539529087334298f18976e_0
- entity: group.night_simulation
- entity: scene.afternoon_lights
- entity: scene.night_casual_lighting
- entity: scene.watch_tv
- entity: scene.lights_all_off
- entity: light.shellycolorbulb_e8db84a9c6b2
- entity: light.tv_led
type: entities
title: LV Lights
Now my main problem is that I make it (somehow) to work but I am not sure what to do to keep the code minimum and which entities to disable etc.
Sounds like you had something going on with the browser cache. Chrome and the mobile app especially seems to be very stubborn sometimes. When something doesn’t work as expected use the developer tools to empty your cache and do a hard reload and/or empty the app cache in android settings, close and reopen browsers.
The popup_cards: method can be weird. I would stick to tap_action calls until you’ve got a good handle on how browser_mod works.
Yes, you should see named browser_mod entities. I think your entities may have been created before you created your browser mod file. Try logging out of all your browsers the log back in. You should get new named browser mod entities. Also, be aware that the device_id can change if you log out of a browser then log back in. You can either change the device_ids in your browser_mod.yaml file or you can use the various methods described in the browser mod git to set it back to the original value if required for some reason. (Clicking the device ID on the browser media player method is probably the easiest.)
For this reason, I find using fire-dom-event method with the this keyword is probably the most reliable method for popups.
Sounds like you got it mostly working now though.
I am trying to test with the below code but im not getting a pop up. thoughts?
type: button
name: Test Button
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Test Popup
card:
type: entities
entities:
- binary_sensor.back_door_sensor_contact
I lied, I had to refresh the dashboard but the above is working now.
It happens just before a while to start adding in my buttons the right entities. Finished before a while. Now nothing is working again. I cleared the cache of my browser, and the android app, restarted the laptop and the phone. Still nothing is working
Did you fix that? I’m having the same problem and I could not find any solution
I can not say I fixed it BUT it is working. I spend a few days without knowing what’s wrong. After an update I did in HA it just started working. I know have several sensors which ideally I would like to clear, but as they say if it is working don’t fix it.
I would recommend to you just to wait a few days 
Ok, thanks. I’ll see what happens in a few days 
Im using this to add a pop up to a TV button… is there anyway to add certain text to the activities in the pop up? as well as icons? Here’s the code that works… attaching a screenshot of the output as well.
type: custom:button-card
entity: remote.loft_harmony
name: TV
styles:
card:
- border-radius: 8%
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Do what?
hide_header: true
card:
type: entities
entities:
- switch.loft_harmony_play_xbox
- switch.loft_harmony_watch_movies_and_show
template:
- base
- icon_tv
I figured it out… have to add the code to the specific cards.
Is there really no way to have the android app refresh to include the card-mod without clearing data? That is really a nuclear option. I wonder if this should be a request for the android app team to be able to refresh these.
It isn’t. I just added the actual /browser_mod.js to the lovelace and it began functioning immediately.
Created a PR for the same if the author would like to include the note.
I just encountered the problem, that my browser_mod.popups and .more_info dialogs did not show anymore.
Yesterday they worked flawlessly and now nothing pops up anymore.
Rechecked the YAML - all in order.
AND: they still work in the companion app.
I did nothing, I swear! 
Just if anyone scratches his head like I did the past hour:
I updated Edge to version 106.0.1370.52 - version 106 is more strict than 105.
I had to whitelist popups for my HA instance!