### Example Service Call with Target

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Illustrates a server-side service call to `browser_mod.more_info` specifying target browsers using both `browser_id` and `user_id`.

```yaml
service: browser_mod.more_info
data:
  entity: light.bed_light
  browser_id:
    - 79be65e8-f06c78f
  user_id:
    - person.bob
    - 304450996c654be69b79d7304951b9b7
```

--------------------------------

### Browser Mod Quickstart: Call Popup Service

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/README.md

Demonstrates how to call the `browser_mod.popup` service to display a simple text popup on registered browsers. Ensure the 'Register' toggle is enabled in the Browser Mod panel.

```yaml
service: browser_mod.popup
  data:
    title: Some title
    content: Some text
```

--------------------------------

### Play Media with Fullscreen Popup

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/README.md

Use the `media_player.play_media` service with `extra` configuration to display a video player fullscreen in a popup. This example sets a black background and removes padding.

```yaml
action: media_player.play_media
target:
  entity_id: media_player.my_browser
data:
  extra:
    popup:
      initial_style: fullscreen
      popup_styles:
        - style: all
          styles: |
            ha-dialog {
              --ha-dialog-surface-background: black;
            }
            ha-dialog .container {
              padding: 0px;
            }
  media:
    media_content_id: media-source://...
    media_content_type: video/mp4
```

--------------------------------

### Apply Global Styles with 'all' Popup Style

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md

Applies global styles using the special 'all' popup style. This example styles icons with classes 'account-icon' and 'home-icon'.

```yaml
popup_styles:
  - style: centered
    include_styles:
      - classic
    styles: |
      ha-dialog {
        --dialog-surface-margin-top: auto !important;
      }
  - style: centered-wide
    include_styles:
      - classic
      - wide
      - centered
  - style: all
    styles: |-
      .account-icon {
        color: red;
      }
      .home-icon {
        color: blue;
      }
```

--------------------------------

### Add Browser Mod Integration

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/README.md

Steps to add the Browser Mod integration through the Home Assistant UI after installation.

```markdown
- Add the "Browser Mod" integration in Settings -> Devices & Services -> Add Integration or click this button: [![Open your Home Assistant instance and start setting up a new integration.](https://my.home-assistant.io/badges/config_flow_start.svg)](https://my.home-assistant.io/redirect/config_flow_start/?domain=browser_mod)
```

--------------------------------

### Testing Script with Action Selector in Developer Tools

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Action-vs-Service-for-popup-actions-(--2.3.6)

Example of how actions are returned as a list when using the 'action' selector within Home Assistant scripts, which can be passed to Browser Mod.

```yaml
action: script.example_browser_mod_using_action_field
data:
  action:
    - action: light.turn_off
      metadata: {}
      data: {}
      target:
        entity_id: light.bed_light
    - action: cover.open_cover
      metadata: {}
      data: {}
      target:
        entity_id: cover.kitchen_cover
```

--------------------------------

### Second Popup with Tag (Stacks on First)

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md

This example shows how to display a second popup on top of the first by assigning a unique tag ('lights') to it. This allows for multiple popups to be visible simultaneously. The `dismiss_icon` parameter can also be customized.

```yaml
...
type: button
name: Standard second popup
tap_action:
  action: fire-dom-event # Browser call
  browser_mod:
    service: browser_mod.popup
    data:
      title: First popup
      content:
        type: vertical-stack
        cards:
          - type: markdown
            content: Use button to show second popup
          - type: button
            name: Show second popup
            tap_action:
              action: fire-dom-event # Browser call
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Second popup
                  content: I am a popup with 'lights' dialog tag. I also have a left chevron as popup dismiss icon.
                  tag: lights
                  dismiss_icon: mdi:chevron-left
```

--------------------------------

### Install Browser Mod via HACS

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/README.md

Instructions for installing Browser Mod using the Home Assistant Community Store (HACS). Ensure Browser Mod 1 is completely removed first.

```markdown
- Find and download [Browser Mod under `integrations`](https://my.home-assistant.io/redirect/hacs_repository/?owner=thomasloven&repository=hass-browser_mod) in [HACS](https://hacs.xyz)
- OR copy the contents of `custom_components/browser_mod/` to `<your config dir>/custom_components/browser_mod/`.
```

--------------------------------

### Navigate to a View with Browser Mod

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Super-charge-Browser-defaults-with-Default-action

Use this action to navigate the browser to a specific path. This is a basic example of the 'Default action' setting.

```yaml
action: browser_mod.navigate
data:
  path: /my-dashboard/second-view
```

--------------------------------

### Display Popup via Script with Device ID

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Cookbook

This example demonstrates how to use a script to display a popup, dynamically setting the `deviceID` to the device that called the script. This is useful for targeting popups to the specific device initiating the action.

```yaml
test_popup:
  sequence:
    - service: browser_mod.popup
      data_template:
        deviceID: "{{ deviceID }}"
        title: Testing script
        card:
          type: entities
          entities:
            - light.bed_light
```

```yaml
type: entity-button
icon: mdi:star
tap_action:
  action: fire-dom-event
  browser_mod:
    command: call-service
    service: script.test_popup
    service_data:
      deviceID:
        - this
```

--------------------------------

### Standard Second Popup (Replaces First)

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md

This example demonstrates how a second popup, without a specific tag, will replace the currently displayed popup. Use this when you want a new popup to completely take over the previous one.

```yaml
...
type: button
name: Standard second popup
tap_action:
  action: fire-dom-event # Browser call
  browser_mod:
    service: browser_mod.popup
    data:
      title: First popup
      content:
        type: vertical-stack
        cards:
          - type: markdown
            content: Use button to show second popup
          - type: button
            name: Show second popup
            tap_action:
              action: fire-dom-event # Browser call
              browser_mod:
                service: browser_mod.popup
                data:
                  title: Second popup
                  content: I am a popup with no tag.
```

--------------------------------

### Get Browser Device Entities

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Super-charge-Browser-defaults-with-Default-action

This example shows how to dynamically retrieve a list of sensors associated with a specific browser ID. This is useful for accessing browser-specific data like width, height, or user agent.

```yaml
[
  "sensor.dcd_browser_browser_path",
  "sensor.dcd_browser_browser_visibility",
  "sensor.dcd_browser_browser_useragent",
  "sensor.dcd_browser_browser_user",
  "binary_sensor.dcd_browser_browser_fullykiosk",
  "sensor.dcd_browser_browser_width",
  "sensor.dcd_browser_browser_height",
  "binary_sensor.dcd_browser_browser_dark_mode",
  "binary_sensor.dcd_browser",
  "light.dcd_browser_screen",
  "media_player.dcd_browser",
  "sensor.dcd_browser_browser_battery",
  "binary_sensor.dcd_browser_browser_charging"
]
```

--------------------------------

### Change Popup Background and Text Color

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md

A simple example using the 'all' popup style to change the dialog and card background to red and text color to white.

```yaml
type: custom:popup-card
title: Red popup
card:
  type: markdown
  content: I have a red background and white text.
popup_card_id: red-popup
popup_styles:
  - style: all
    styles: |-
      ha-dialog {
        --ha-dialog-surface-background: red;
        --ha-card-background: red;
        --primary-text-color: white;
        color: white;
      }
```

--------------------------------

### Popup Card with UIX for Shadow DOM Styling

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md

This example demonstrates how to style elements within a markdown card's shadow DOM using UIX. It's particularly useful when direct CSS styling is not possible due to shadow DOM encapsulation. The `uix` property targets specific elements like `hui-markdown-card`.

```yaml
type: custom:popup-card
dismissable: true
card:
  type: markdown
  content: >-
    This popup will have reduced padding on markdown
    content.
popup_card_id: uix-popup
title: UIX Popup
uix:
  style:
    hui-markdown-card $: |
      ha-markdown {
        padding: 8px;
      }
```

--------------------------------

### Popup Card as Template for browser_mod.popup Service (Server Call)

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/dashboard-cards.md

Example of invoking a popup card template using the `browser_mod.popup` service as a server call. Requires `browser_id` and a `popup_card_id` formatted as `<dashboard-url>/<popup-card ID>`.

```yaml
...
  action: browser_mod.popup
  browser_id: <browser-id>
  data:
    popup_card_id: <dashboard-url>/<popup-card ID>
```

--------------------------------

### Navigate then Show Notification After Delay

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

Executes a sequence of actions: navigates to a path, waits for a specified time, and then displays a notification. Useful for guiding users through dashboards.

```yaml
service: browser_mod.sequence
data:
  sequence:
    - service: browser_mod.navigate
      data:
        path: /lovelace/security
    - service: browser_mod.delay
      data:
        time: 1000
    - service: browser_mod.notification
      data:
        message: Security dashboard loaded
  browser_id:
    - security-panel
```

--------------------------------

### Customizing Popup Styles with CSS

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Define custom CSS styles for different popup states or elements using the `popup_styles` configuration. This example shows how to apply specific styles to icons within a popup.

```yaml
...
icons:
  - icon: mdi:account
    title: Account
    action:
      action: browser_mod.notification
      data:
        message: Account action
    class: account-icon
  - icon: mdi:home
    title: Home
    action:
      action: browser_mod.notification
      data:
        message: Home action
    class: home-icon
...
popup_styles:
  - style: all
    styles: |-
      .account-icon {
        color: red;
      }
      .home-icon {
        color: blue;
      }
```

--------------------------------

### UIX Theme for Sliding Popup Animation

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md

Create a UIX theme for Browser Mod popups that animates them sliding in from the right. This example uses a multiple popup tag and targets the shadow DOM.

```yaml
Browser Mod Theme 2:
  uix-theme: Browser Mod Theme 2

  uix-browser-mod-popup-slide-in-yaml: |
    .: | 
      ha-dialog {
        --dialog-surface-margin-top: auto !important;
        --ha-dialog-show-duration: 0ms;
        --ha-dialog-hide-duration: 0ms;
      }
    ha-dialog $ wa-dialog $: |
      @keyframes slide-in { from { transform:translateX(100%) } to { 
      transform: translateX(0); } } 

      dialog {
        animation: slide-in 0.3s forwards;
      }
```

--------------------------------

### Popup Card as Template for browser_mod.popup Service (Browser Call)

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/dashboard-cards.md

Example of invoking a popup card template using the `browser_mod.popup` service as a browser call. The `popup_card_id` can be used directly if the card is on the same dashboard.

```yaml
...
  tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        popup_card_id: <popup-card ID>
```

--------------------------------

### Popup Card Usage as More-Info Replacement

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/dashboard-cards.md

Configure a tile card to use the 'more-info' action. When combined with a popup card targeting the same entity, this setup will display the custom popup instead of the default more-info dialog.

```yaml
type: tile
entity: <entity_id>
tap_action:
  action: more-info
```

--------------------------------

### Popup Card as Template for Service Calls

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

Configures a popup card to act as a template for service calls, allowing users to trigger actions like starting a vacuum directly from the popup. The 'right_button_action' defines the service to be called.

```yaml
# Popup card as template for service calls
type: custom:popup-card
pupup_card_id: vacuum-controls
title: Vacuum Controls
card:
  type: entities
  entities:
    - vacuum.xiaomi
right_button: Start
right_button_action:
  service: vacuum.start
  target:
    entity_id: vacuum.xiaomi
```

--------------------------------

### Open Main Popup then Detail Popup

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

Demonstrates stacking popups by first opening a main popup, which then contains a button to open a detail popup. The detail popup is assigned a tag for potential future control.

```yaml
# First popup (no tag - default)
type: button
name: Open Main Popup
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: Main Controls
      content:
        type: button
        name: Show Details
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Detail Popup
              content: This popup stacks on top
              tag: details
              dismiss_icon: mdi:chevron-left
```

--------------------------------

### Get Browser Panel View Title

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/browser-entities.md

Retrieve the view title attribute from the browser_entities.panel.entity_id. Includes a check to ensure 'panel' exists in browser_entities.

```yaml
{{ state_attr(browser_entities.panel.entity_id, 'viewTitle') if 'panel' in browser_entities else 'unknown' }}
```

--------------------------------

### Get Browser Current User Name

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/browser-entities.md

Access the current user's name from the browser_entities.currentUser.entity_id. Handles cases where 'currentUser' might not be present.

```yaml
{{ states(browser_entities.currentUser.entity_id) if 'currentUser' in browser_entities else 'unknown' }}
```

--------------------------------

### Navigate Browser to a Home Assistant Path

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Use this service to direct the browser to a specific path within Home Assistant. Ensure the path is correctly formatted.

```yaml
service: browser_mod.navigate
data:
  path: <string>
  [browser_id: <Browser IDs>]
  [user_id: <User IDs>]
```

--------------------------------

### Adaptive Popup using Bottom Sheet on Small Screens

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

Creates a popup that adapts its display based on screen size, appearing as a bottom sheet on mobile devices and a standard dialog on desktops. 'adaptive: true' enables this behavior.

```yaml
# Adaptive popup that uses bottom sheet on small screens
service: browser_mod.popup
data:
  title: Adaptive Controls
  content:
    type: entities
    entities:
      - light.living_room
      - light.kitchen
  adaptive: true
  adaptive_allow_mode_change: false
  adaptive_force_bottom_sheet: false
```

--------------------------------

### Initialize Browser Mod Ghost Settings

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Browser-Mod-Ghost-‐-Managing-multiple-tabs-on-a-desktop

Reads Browser Mod Ghost settings from session storage, setting defaults to false if they do not exist.

```javascript
window.browser_mod_ghost_commands=JSON.parse(window.sessionStorage.getItem("browser_mod_ghost_commands")||"{\"command-player\":false,\"command-navigate\":false,\"command-popup\":false,\"command-notification\":false,\"sendUpdate\":false}");
```

--------------------------------

### Overlay Icon Action: Navigate

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/configuration-panel.md

Use this action to navigate the browser to a specific path within Home Assistant. Ideal for returning to a main dashboard.

```yaml
action: browser_mod.navigate
data:
  path: /lovelace
```

--------------------------------

### browser_mod.more_info

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Displays the 'more-info' dialog for a given Home Assistant entity.

```APIDOC
## POST browser_mod.more_info

### Description
Shows a more-info dialog for a specified entity.

### Method
POST

### Endpoint
browser_mod.more_info

### Parameters
#### Query Parameters
- **entity** (string) - Required - The entity whose more-info dialog to display.
- **view** (string) - Optional - The more-info view to open. Options: `INFO`, `history`, `settings`, `related`. Defaults to `INFO`. Setting to anything other than `info` will always ignore custom popup-cards.
- **large** (boolean) - Optional - If true, the dialog will be displayed wider. Defaults to FALSE.
- **ignore_popup_card** (boolean) - Optional - If true, the more-info dialog will be shown even if there's currently a popup-card in the view that would override it. Defaults to FALSE.
- **close** (boolean) - Optional - If true, the more-info dialog will be closed if open. All other parameters are ignored.
- **browser_id** (Browser IDs) - Optional - Specifies the target browser(s).
- **user_id** (User IDs) - Optional - Specifies the target user(s).

### Request Example
```yaml
service: browser_mod.more_info
data:
  entity: "light.kitchen"
  view: "history"
  large: true
```

### Response
#### Success Response (200)
This service does not return a specific response body upon success, indicating the more-info dialog command was sent.

#### Response Example
(No specific example provided, typically an empty or success acknowledgement)
```

--------------------------------

### Popup Camera Feed on Human Detection

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Cookbook

This automation triggers a popup displaying a camera feed when a human is detected. Ensure the `binary_sensor.human` and `camera.main` entities are correctly configured in your Home Assistant setup.

```yaml
- id: popup_camera_when_human_detected
  alias: Popup Camera When Human Detected
  hide_entity: true
  initial_state: 'true'
  trigger:
    platform: state
    entity_id: binary_sensor.human
    to: 'on'
  action:
    - service: browser_mod.more_info
      data:
        entity_id: camera.main
        deviceID:
          - 12345678-12345678
```

--------------------------------

### Play Video Fullscreen with Custom Popup Styling

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

Configure a media player to play video content in a fullscreen popup with custom styling. This is useful for displaying videos with a specific aesthetic, such as a black background.

```yaml
# Play video fullscreen with custom popup styling
action: media_player.play_media
target:
  entity_id: media_player.kitchen_tablet
data:
  extra:
    popup:
      initial_style: fullscreen
      popup_styles:
        - style: all
          styles: |
            ha-dialog {
              --ha-dialog-surface-background: black;
            }
            ha-dialog .container {
              padding: 0px;
            }
  media:
    media_content_id: media-source://media_source/local/videos/welcome.mp4
    media_content_type: video/mp4
```

--------------------------------

### Browser Mod Settings Script

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Script-and-button-to-set-Browser-Mod-'Set-Clear'-Settings

This script manages browser settings using browser_mod. It checks for targets, constructs JavaScript commands, and executes them on specified browsers or users. Ensure browser_mod is installed and configured.

```yaml
sequence:
  - alias: Check for any targets
    if:
      - condition: not
        conditions:
          - condition: template
            value_template: >-
              {{ target_service_browser or target_globally or
              target_browsers|length|bool or target_users|length|bool }}
    then:
      - stop: No targets set
        error: true
  - alias: >-
      If browser_id is passed in then use it instead of service_browser.  This
      will happen when calling from fire_dom_event browser_mod action  and
      passing browser_id as THIS which browser mod allows
    variables:
      service_browser: | 
        {{ iif(service_browser|default(None), service_browser, browser_id) }}
      settingsDict: >
        { {%- for settingKey in settings %}{{settingKey}}: {{value}}, {% endfor
        -%} } 
  - alias: >-
      If targetting Service Browser clear out other targets and seet
      browser_targets to service_browser.
    if:
      - condition: template
        value_template: "{{ target_service_browser }}"
    then:
      - variables:
          target_browsers:
            - "{{ service_browser }}"
          target_users: []
          target_globally: false
        enabled: true
  - alias: If Browser Targets
    if:
      - condition: template
        value_template: "{{ target_browsers|length|bool }}"
    then:
      - variables:
          command: >
            window.browser_mod.setSetting('browser', 'browser_id', {{ 
            settingsDict }})
          commandList: []
      - alias: Construct command sequence
        repeat:
          sequence:
            - alias: >-
                Append to commandList. Handles if is device_id or browser_id and
                converts device_id to browser_id
              variables:
                commandList: >
                  {{ commandList + [ command | regex_replace(find='browser_id', 
                  replace=iif(device_attr(repeat.item, 'name'), 
                  device_attr(repeat.item, 'name'), repeat.item)) ] }}
          for_each: | 
            {{ target_browsers }}
      - variables:
          javascriptCommand: | 
            {{ commandList | join(';') }}           
      - action: browser_mod.javascript
        data:
          browser_id: | 
            {{ service_browser }}
          code: | 
            {{ javascriptCommand }}
      - action: browser_mod.notification
        metadata: {}
        data:
          browser_id: | 
            {{ target_browsers }}
          message: Browser Mod settings have changed. You may need to reload.
          action_text: Reload
          action:
            - action: browser_mod.javascript
              data:
                browser_id: THIS
                code: window.location.reload()
    enabled: true
  - alias: If User Targets
    if:
      - condition: template
        value_template: "{{ target_users|length|bool }}"
    then:
      - variables:
          command: |
            window.browser_mod.setSetting('user', 'user_id', {{ settingsDict }})
          commandList: []
      - alias: Construct command sequence
        repeat:
          sequence:
            - alias: >-
                Append to commandList. Handles if is entity_id or user_id and
                converts entity_id to user_id
              variables:
                commandList: >
                  {{ commandList + [ command | regex_replace(find='user_id', 
                  replace=iif(state_attr(repeat.item, 'user_id'), 
                  state_attr(repeat.item, 'user_id'), repeat.item)) ] }}
          for_each: | 
            {{ target_users }}
      - variables:
          javascriptCommand: | 
            {{ commandList | join(';') }}                      
      - action: browser_mod.javascript
        data:
          browser_id: | 
            {{ service_browser }}
          code: | 
            {{ javascriptCommand }}
      - action: browser_mod.notification
        metadata: {}
        data:
          user_id: | 
            {{ target_users }}
          message: Browser Mod settings have changed. You may need to reload.
          action_text: Reload
          action:
            - action: browser_mod.javascript
              data:
                browser_id: THIS
                code: window.location.reload()
    enabled: true
  - alias: If Global Target
    if:
      - condition: template
        value_template: "{{ target_globally }}"
    then:
      - action: browser_mod.javascript
        metadata: {}
        data:
          browser_id: | 
            {{ service_browser }}
          code: | 
            window.browser_mod.setSetting('global', '', {{ settingsDict }}) 
      - action: browser_mod.notification
        metadata: {}
        data:
          message: Browser Mod settings have changed. You may need to reload.

```

--------------------------------

### Send command_launch_app Notification

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Android-Devices-'Always-On'

This notification command launches the Home Assistant Companion App. Requires 'Display over other apps' permission. Use 'ttl: 0' and 'priority: high' for reliable delivery.

```yaml
action: perform-action
perform_action: notify.mobile_app_galaxy_tab_a9
target: {}
data:
  message: command_launch_app
  data:
    package_name: io.homeassistant.companion.android
    ttl: 0
    priority: high
```

--------------------------------

### Show Sidebar and Header for Current Browser

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Script-and-button-to-set-Browser-Mod-'Set-Clear'-Settings

Configure the `script.browser_mod_settings_script` to show the sidebar and header for the current browser. Set `value` to `undefined` to revert the settings.

```yaml
tap_action:
  action: fire-dom-event
  browser_mod:
    service: script.browser_mod_settings_script
    data:
      settings:
        - hideSidebar
        - hideHeader
      value: undefined
      target_service_browser: true
      browser_id: THIS
```

--------------------------------

### Popup Card with UIX Theme Styles

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md

Configure a popup card to use specific UIX theme styles for background and layout. The 'style_sequence' applies styles in order, with 'initial_style' setting the default.

```yaml
type: custom:popup-card
title: Background red (by theme)
dismissable: true
card:
  type: markdown
  content: >-
    This card can be used in browser_mod.popup service or to replace the
    more-info dialog
popup_card_id: theme-background-red
popup_styles:
  - style: background-red
  - style: background-red-wide
    include_styles:
      - background-red
      - wide
style_sequence:
  - background-red-wide
  - background-red
initial_style: background-red
```

--------------------------------

### Default Action: Sequence

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/configuration-panel.md

Execute a series of actions sequentially with controlled timing. This allows for fine-grained control over the order and delay between actions, such as navigating, delaying, and then showing a notification.

```yaml
action: browser_mod.sequence
data:
  sequence:
    - service: browser_mod.navigate
      data:
        path: /my-dashboard/second-view
    - service: browser_mod.delay
      data:
        time: 5000
    - service: browser_mod.notification
      data:
        message: Good Morning Dave
```

--------------------------------

### Set Initial Style and Style Sequence

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/styles.md

Configures the initial popup style to 'centered' and defines a sequence of styles ('centered-wide', 'fullscreen', 'centered') for cycling through popup appearances.

```yaml
initial_style: centered
style_sequence:
  - centered-wide
  - fullscreen
  - centered
popup_styles:
  - style: centered
    include_styles:
      - classic
    styles: |
      ha-dialog {
        --dialog-surface-margin-top: auto !important;
      }
  - style: centered-wide
    include_styles:
      - classic
      - wide
      - centered
```

--------------------------------

### Default Action Configuration on Browser Load

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

Sets a default sequence of actions to be executed when the browser loads the Home Assistant interface. This can include navigation, delays, and notifications.

```yaml
# Default action configuration (runs on browser load)
action: browser_mod.sequence
data:
  sequence:
    - service: browser_mod.navigate
      data:
        path: /lovelace/home
    - service: browser_mod.delay
      data:
        time: 2000
    - service: browser_mod.notification
      data:
        message: Welcome home!
```

--------------------------------

### Button Variant and Appearance Options

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md

Details the available options for customizing button variants (brand, neutral, danger, warning, success) and appearances (accent, filled, outlined, plain) for popups, starting with Home Assistant 2025.8.

```yaml
service: browser_mod.popup
data:
  title: Button Styling
  content: Example content
  right_button:
    text: "Brand Accent"
    variant: "brand"
    appearance: "accent"
  left_button:
    text: "Neutral Filled"
    variant: "neutral"
    appearance: "filled"
```

--------------------------------

### Listen for Browser Mod Ghost Configuration Trigger

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Browser-Mod-Ghost-‐-Managing-multiple-tabs-on-a-desktop

Sets up an event listener to trigger the Browser Mod Ghost configuration UI when a specific custom event is received.

```javascript
document.body.addEventListener("ll-custom",(ev)=>{if(ev.detail.browser_mod_ghost_config){window.browser_mod_ghost_config()}});
```

--------------------------------

### Overlay Icon Action: JavaScript

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/configuration-panel.md

Use this action to execute arbitrary JavaScript code in the browser. Useful for custom navigation like going back.

```yaml
action: browser_mod.javascript
data:
  code: history.back()
```

--------------------------------

### browser_mod.navigate

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Navigates the browser to a specified Home Assistant path.

```APIDOC
## POST browser_mod.navigate

### Description
Points the browser to the given Home Assistant path.

### Method
POST

### Endpoint
browser_mod.navigate

### Parameters
#### Query Parameters
- **path** (string) - Required - A Home Assistant path. E.g. `/lovelace/`, `/my-dashboard/bedroom`, `/browser_mod/`, `/config/devices/device/20911cc5a63b1caafa2089618545eb8a`...
- **browser_id** (Browser IDs) - Optional - Specifies the target browser(s).
- **user_id** (User IDs) - Optional - Specifies the target user(s).

### Request Example
```yaml
service: browser_mod.navigate
data:
  path: "/lovelace/0/kitchen"
  browser_id: "12345"
```

### Response
#### Success Response (200)
This service does not return a specific response body upon success, indicating the navigation command was sent.

#### Response Example
(No specific example provided, typically an empty or success acknowledgement)
```

--------------------------------

### Browser Player Card Configuration

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/dashboard-cards.md

Basic YAML configuration for the `custom:browser-player` card. This card allows control of media playback on the current browser.

```yaml
type: custom:browser-player
```

--------------------------------

### Popup with HTML Content

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md

Demonstrates how to use HTML within the content parameter to render rich text and icons in a popup. Ensure the HTML is valid.

```yaml
service: browser_mod.popup
data:
  title: HTML content
  content: |
    An <b>HTML</b> string.
    <p> Pretty much any HTML works: <ha-icon icon="mdi:lamp" style="color: red;"></ha-icon>
```

--------------------------------

### Popup with Form Content

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md

Illustrates using a list of Home Assistant form schemas for the content parameter, enabling user input within the popup. The form data can be passed to button actions.

```yaml
<ha-form schema>:
  name: <string>
  [label: <string>]
  [default: <any>]
  selector: <Home Assistant Selector>
```

```yaml
service: browser_mod.popup
data:
  title: Form content
  content:
    - name: parameter_name
      label: Descriptive name
      selector:
        text: null
    - name: another_parameter
      label: A number
      default: 5
      selector:
        number:
          min: 0
          max: 10
          slider: true
```

--------------------------------

### Browser Mod Badges and Tiles Configuration

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/dashboard-cards.md

This YAML configuration sets up a Home Assistant view with custom browser mod badges and tile cards. It includes options for badge display and configuring tile card features and layout.

```yaml
views:
  - type: sections
    max_columns: 4
    title: Other
    path: other
    header:
      card:
        type: markdown
        text_only: true
        content: ' Browser Mod Badges'
    badges:
      - type: custom:browser-mod-badge
        show_name: false
        show_state: true
        show_icon: true
        entity: browser_entities.browserID
      - type: custom:browser-mod-badge
        show_name: false
        show_state: true
        show_icon: true
        entity: browser_entities.screen
      - type: custom:browser-mod-badge
        show_name: false
        show_state: true
        show_icon: true
        entity: browser_entities.panel
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Browser Mod Tiles
            heading_style: title
          - type: custom:browser-mod-tile-card
            grid_options:
              columns: 12
              rows: 1
            entity: browser_entities.screen
            vertical: false
            features:
              - type: light-brightness
              - type: toggle
            features_position: bottom
          - type: custom:browser-mod-tile-card
            entity: browser_entities.browserID
            vertical: false
            features_position: bottom
            grid_options:
              columns: 12
              rows: 1
          - type: custom:browser-mod-tile-card
            entity: browser_entities.path
            vertical: false
            features_position: bottom
            grid_options:
              columns: 12
              rows: 1
          - type: custom:browser-mod-tile-card
            entity: browser_entities.currentUser
            vertical: false
            features_position: bottom
            grid_options:
              columns: 12
              rows: 1
```

--------------------------------

### Button with Browser Mod Ghost Config Action

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Browser-Mod-Ghost-‐-Managing-multiple-tabs-on-a-desktop

This is a full Home Assistant button configuration that, when tapped, will open the Browser Mod Ghost configuration settings UI. It includes standard button properties like `show_name`, `show_icon`, `type`, and `name`.

```yaml
show_name: true
show_icon: true
type: button
name: Browser Mod Ghost config
tap_action:
  action: fire-dom-event
  browser_mod_ghost_config: true
```

--------------------------------

### Show more-info dialog for an entity

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

The `browser_mod.more_info` service displays the standard Home Assistant more-info dialog for a specified entity. You can target a specific browser and optionally choose a view like 'history' or 'settings', and enable 'wide' mode.

```yaml
service: browser_mod.more_info
data:
  entity: light.bed_light
  browser_id:
    - kitchen-display
```

```yaml
service: browser_mod.more_info
data:
  entity: sensor.temperature
  view: history
  large: true
```

--------------------------------

### browser_mod.popup Service Configuration

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

This YAML configuration outlines the parameters available for the browser_mod.popup service. It details options for content, styling, adaptive behavior, and button configurations.

```yaml
service: browser_mod.popup
data:
  [popup_card_id: <string>]
  [title: <string>]
  [adaptive: <true/FALSE>]
  [adaptive_allow_mode_change: <true/FALSE>]
  [adaptive_force_bottom_sheet: <true/FALSE>]
  [content: <string / Dashboard card configuration / ha-form schema>]
  [initial_style: <NORMAL/classic/wide/fullscreen/(user)>]
  [style_sequence: <list>]
    [ - <normal/classic/wide/fullscreen/(user)>]
    [ - <normal/classic/wide/fullscreen/(user)>]
  [popup_styles: <list>]
    [style: <normal/classic/wide/fullscreen/card/all/(user)>]
    [include_styles: <list>]
      [ - <normal/classic/wide/fullscreen/card/all/(user)>]
      [ - <normal/classic/wide/fullscreen/card/all/(user)>]
    [styles: <string>]
  [icon: <string>]
  [icon_title: <string>]
  [icon_action: <service call>]
  [icon_close: <TRUE/false>]
  [icon_class: <string>]
  [icons: <list>]
    [icon: <string>]
    [title: <string>]
    [action: <service-call>]
    [close: <TRUE/false>]
    [class: <string>]
  [right_button: <string>]
  [right_button_variant: <BRAND/neutral/danger/warning/success>]
  [right_button_appearance: <accent/filled/outlined/PLAIN>]
  [right_button_action: <service call>]
  [right_button_close: <TRUE/false>]
  [left_button: <string>]
  [left_button_variant: <BRAND/neutral/danger/warning/success>]
  [left_button_appearance: <accent/filled/outlined/PLAIN>]
  [left_button_action: <service call>]
  [left_button_close: <TRUE/false>]
  [dismissable: <TRUE/false>]
  [dismiss_icon: <string]
  [dismiss_action: <service call>]
  [autoclose: <true/FALSE>]
  [timeout: <number>]
  [timeout_action: <service call>]
  [timeout_hide_progress: <true/FALSE>]
  [tag: <string>]
  [browser_id: <Browser IDs>]
  [user_id: <User IDs]

```

--------------------------------

### Popup Styling and Content

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Configuration options for popup styles, including custom CSS and including other styles. Also details button configurations for right and left action buttons.

```APIDOC
## Popup Configuration Options

### Description
This section details the parameters used to configure the appearance and behavior of browser_mod popups.

### Parameters
#### Popup Styles
- **`popup_styles`** (list) - A list of styles to customize. Can include standard styles like `normal`, `wide`, `fullscreen`, `classic`, or custom styles. Special styles `all` (applied always) and `card` (applied when content is a card) are also available. See [styles.md](styles.md).
  - **`style`** (string) - The style to customize (e.g., `normal`, `wide`, `fullscreen`, `classic`, `all`, `card`, or custom).
  - **`include styles`** (list) - Styles to include when this style is applied (e.g., `normal`, `wide`, `fullscreen`, `classic`, or custom).
  - **`styles`** (string) - CSS style rules for the style, nested within a `:host([<style>]) { }` rule.

#### Buttons
- **`right_button`** (string) - The text for the right action button.
- **`right_button_variant`** (string) - The variant for the right button. See [popups.md](popups.md#button-variant-and-appearance).
- **`right_button_appearance`** (string) - The appearance for the right button. See [popups.md](popups.md#button-variant-and-appearance).
- **`right_button_action`** (action) - The action to perform when the right action button is pressed.
- **`right_button_close`** (boolean) - Enable/disable popup closing when the right action button is pressed.
- **`left_button`** (string) - The text for the left action button.
- **`left_button_variant`** (string) - The variant for the left button. See [popups.md](popups.md#button-variant-and-appearance).
- **`left_button_appearance`** (string) - The appearance for the left button. See [popups.md](popups.md#button-variant-and-appearance).
- **`left_button_action`** (action) - The action to perform when the left action button is pressed.
- **`left_button_close`** (boolean) - Enable/disable popup closing when the left action button is pressed.

### Request Example
```yaml
popup_styles:
  - style: all
    styles: |
      .account-icon {
        color: red;
      }
      .home-icon {
        color: blue;
      }
right_button: "Confirm"
right_button_action:
  action: browser_mod.notification
  data:
    message: "Confirmed!"
```

### Notes
- Actions performed as `*_action`s are executed as a *Browser* call on the same browser unless `browser_id` or `user_id` is provided.
- If a `ha-form` schema is used for `content`, the resulting data will be inserted into the `data` for any `_action`.
- Dashboard URLs for `popup_card_id` can be found by noting the URL during creation, hovering over sidebar links, or checking the `Navigate` action dropdown. Remove the leading slash from dashboard URLs.
- Multiple icons can be specified using a `icons:` list, which takes precedence over a single `icon:` parameter.
```

--------------------------------

### Browser Mod Popup with New Action List Style

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Action-vs-Service-for-popup-actions-(--2.3.6)

Configure multiple actions for a popup button by providing a list to 'right_button_action'. This allows sequential execution of actions.

```yaml
action: browser_mod.popup
data:
  content: Popup Content
  right_button: Wakeup
  right_button_action:
    - action: light.turn_off
      target:
        entity_id: light.bed_light
    - action: cover.open_cover
      target:
        entity_id: cover.kitchen_cover
```

--------------------------------

### Show More-Info Dialog for an Entity

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Display the standard Home Assistant more-info dialog for a specified entity. Options include selecting a specific view, dialog size, and handling of popup cards.

```yaml
service: browser_mod.more_info
data:
  [entity: <string>]
  [view: <INFO/history/settings/related]
  [large: <true/FALSE>]
  [ignore_popup_card: <true/FALSE>]
  [close: true/FALSE>]
  [browser_id: <Browser IDs>]
  [user_id: <User IDs>]
```

--------------------------------

### Execute Sequential Services

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/services.md

Performs a list of service calls in sequence. If browser_id and user_id are omitted within the sequence, services target the specific browser rather than all.

```yaml
service: browser_mod.sequence
data:
  sequence:
    - <service call>
    - <service call>
    - ...
  [browser_id: <Browser IDs>]
  [user_id: <User IDs>]
```

--------------------------------

### Home Assistant Script Using Action Field for Browser Mod

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Action-vs-Service-for-popup-actions-(--2.3.6)

Define a script that accepts an 'action' field, allowing dynamic action calls to Browser Mod popups. Ensure the action passed is compatible with Browser Mod.

```yaml
alias: Example Browser Mod using Action field
description: ""
fields:
  action:
    selector:
      action: {}
    name: Action
    required: true
sequence:
  - action: browser_mod.popup
    data:
      content: Popup Content
      right_button: Call Action
      right_button_action: "{{ action }}"
```

--------------------------------

### Actionable Popup with Nested Popups

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/popups.md

Use this to create a popup with action buttons that can trigger Home Assistant services or open further nested popups. The nested popup structure allows for complex user interactions.

```yaml
service: browser_mod.popup
data:
  content: Do you want to turn the light on?
  right_button: "Yes"
  left_button: "No"
  right_button_action:
    service: light.turn_on
    data:
      entity_id: light.bed_light
  left_button_action:
    service: browser_mod.popup
    data:
      title: Really?
      content: Are you sure?
      right_button: "Yes"
      left_button: "No"
      right_button_action:
        service: browser_mod.popup
        data:
          content: Fine, live in darkness.
          dismissable: false
          title: Ok
          timeout: 3000
      left_button_action:
        service: light.turn_on
        data:
          entity_id: light.bed_light
```

--------------------------------

### Home Assistant Script for Dynamic Navigation

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Super-charge-Browser-defaults-with-Default-action

This script determines the user's device width and navigates them to a specific dashboard view based on predefined breakpoints (mobile, tablet, desktop, wide). It uses Jinja2 templating to dynamically set the navigation path.

```yaml
sequence:
  - variables:
      device_width: >
        {% set sensor = device_entities(device_id(browser_id)) |
        select("contains", "_browser_width") | list | first %} {% set width =
        states(sensor) | float(1280) %}  {% set breakpoints = 
          [
            { 'width': 768, 'size': 'mobile' },
            { 'width': 1024, 'size': 'tablet' },
            { 'width': 1280, 'size': 'desktop' },
            { 'width': 999999, 'size': 'wide' },
          ]
        %} {{ (breakpoints | selectattr('width', 'gt', width) | list | first
        ).size }}
  - variables:
      navigation_path: |
        {% set paths = 
          { 
            'mobile': '/dashboard-test/0',
            'tablet': '/dashboard-test/0',
            'desktop': '/dashboard-test/test-view-2',
            'wide': '/dashboard-test/test-view-2',
          } 
        %}  {{ paths[device_width] }}
  - action: browser_mod.navigate
    data:
      browser_id: |
        {{ browser_id }}
      path: |
        {{ navigation_path }}
fields:
  browser_id:
    selector:
      text: {}
    name: Browser ID
alias: Navigate per Device Width
description: ""
```

--------------------------------

### Execute Script with Browser ID

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Super-charge-Browser-defaults-with-Default-action

This configuration snippet shows how to use the 'Default action' to trigger the previously defined Home Assistant script. It passes the current browser ID to the script.

```yaml
action: script.navigate_per_device_width
data:
  browser_id: THIS
```

--------------------------------

### Send command_screen_on Notification

Source: https://github.com/thomasloven/hass-browser_mod/wiki/Android-Devices-'Always-On'

Use this notification command to wake up the device screen. Ensure 'ttl' is 0 and 'priority' is high for timely delivery, especially if FCM fallback is used.

```yaml
action: perform-action
perform_action: notify.mobile_app_galaxy_tab_a9
target: {}
data:
  message: command_screen_on
  data:
    ttl: 0
    priority: high
```

--------------------------------

### Display an interactive form popup with action buttons

Source: https://context7.com/thomasloven/hass-browser_mod/llms.txt

Create interactive popups using `browser_mod.popup` that include forms with selectors and action buttons. The `right_button_action` can trigger a Home Assistant service, allowing for direct user input and action execution within the popup.

```yaml
service: browser_mod.popup
data:
  title: Where to vacuum?
  right_button: Start Cleaning
  right_button_action:
    service: vacuum.send_command
    data:
      entity_id: vacuum.xiaomi
      command: app_segment_clean
  content:
    - name: params
      label: Rooms to clean
      selector:
        select:
          multiple: true
          options:
            - label: Kitchen
              value: 11
            - label: Living room
              value: 13
            - label: Bedroom
              value: 12
```

--------------------------------

### Popup Card as Template for browser_mod.popup Service (YAML)

Source: https://github.com/thomasloven/hass-browser_mod/blob/master/documentation/dashboard-cards.md

Configure a popup card to act as a template for the `browser_mod.popup` service. This YAML shows the basic structure for defining a popup card that can be invoked by the service.

```yaml
type: custom:popup-card
[popup_card_id: <popup-card ID>]
card:
  type: ...etc...
[any parameter from the browser_mod.popup service call except "content"]
```