title: Multiple notifications in different places shiny app
body: <p>I made a simple example to show my problem, which is:</p>
  
  <ul>
  <li>how to set notifications at different places independently of each others (let's say I want each notification to be displayed at the top right and left, respectively)</li>
  </ul>
  
  <p>```</p>
  
  <pre><code>library(shiny)
  
    ui &lt;- fluidPage(
  
      # tags$head(
      #   tags$style(
      #     HTML(".shiny-notification {
      #          position: fixed;
      #          top: 800px;
      #          left: 40px;
      #          width: 15em;
      #          opacity: 1;
      #          }
      #          "
      #     )
      #   )
      # )
  
      actionButton("showme", "Show Notification:")
  
    )
  
    server &lt;- function(input, output, session) {
  
      observe({
  
        showNotification(
          id = "welcome_notif",
          "Blablablablabla .... blablablabla.",
          duration = 20, 
          closeButton = TRUE,
          type = "message")
  
      })
  
      observeEvent(input$showme,{
  
        showNotification( 
          id = "showme_notif",
          "Hihihi", # put text in notification
          duration = 30, 
          closeButton = TRUE,
          type = "message")
  
      })
  
    }
  
    shinyApp(ui = ui, server = server)
  </code></pre>
  
  <p>```</p>
  
  <p>I saw that there is a special CSS for notification in shiny code (<a href="https://github.com/rstudio/shiny/blob/master/inst/www/shared/shiny.css" rel="nofollow noreferrer">https://github.com/rstudio/shiny/blob/master/inst/www/shared/shiny.css</a>).</p>
  
  <p>If I change the CSS class (as shown in commented code), I only manage to change the place where all notifications will be displayed (but not independently).</p>
  
  <p>EDIT:</p>
  
  <p>I tried to use addClass with shinyjs:</p>
  
  <pre><code>library(shiny)
  library(shinyjs)
  
    ui &lt;- fluidPage(
  
      useShinyjs(),
      inlineCSS(list(.customclass = "position: fixed; top: 200px;")),
  
      actionButton("showme", "Show Notification:")
  
    )
  
    server &lt;- function(input, output, session) {
  
      observe({
  
        showNotification(
          id = "welcome_notif",
          "Blablablablabla .... blablablabla.",
          duration = 20, 
          closeButton = TRUE,
          type = "message")
  
      })
  
      observeEvent(input$showme,{
  
        showNotification( 
          id = "showme_notif",
          "Hihihi", # put text in notification
          duration = 30, 
          closeButton = TRUE,
          type = "message")
  
      })
  
      observe({
        addClass(id = "showme_notif", class = "customclass")
      })
  
    }
  
    shinyApp(ui = ui, server = server)
  </code></pre>
  
  <p>as suggested by Florian (see below) but it seems that I can only handle elements generated in UI and not in server like notifications.</p>
  
  <p>For example this works:</p>
  
  <pre><code>if (interactive()) {
      shinyApp(
        ui = fluidPage(
          useShinyjs(),
          inlineCSS(list(.customclass = "position: fixed; top: 200px;")),
          p(id = "element", "Watch what happens to me")
        ),
        server = function(input, output) {
          observe({
            addClass(id = "element", class = "customclass")
          })
        }
      )
    }
  </code></pre>