Hyperlink portion of text in Shiny server text block

#1

Currently I have a Shiny app that I want to include a hyperlink to another website. Right now I have the following line of code in the mainPanel of my Shiny app ui:

tags$a(href="https://www.gofundme.com/f/fantasy-football-mental-health-initiative?utm_medium=copy_link&utm_source=customer&utm_campaign=p_lico+share-sheet", 
             "If you enjoyed this tool, please consider donating to the Fantasy Football Mental Health Initiative!")

Is there a way to just have a specific part of the text be the hyperlink with the rest of it as normal text? For example, I'd want just the "donating to the Fantasy Football Mental Health Initiative!" part to be hyperlinked (and thus underlined) instead of the entire block of text. Any suggestions on how to do this?

#2

You can just put the text before the tag, if you want. I think usually you'd put it all in the same div, so extra credit for that I think.

Like this:

library(shiny)

ui <- fluidPage(
  tags$h1("Original"),
  tags$a(href="https://www.gofundme.com/f/fantasy-football-mental-health-initiative?utm_medium=copy_link&utm_source=customer&utm_campaign=p_lico+share-sheet", 
         "If you enjoyed this tool, please consider donating to the Fantasy Football Mental Health Initiative!"),
  
  tags$h1("Revised"),
  "If you enjoyed this tool, ",
  tags$a(href="https://www.gofundme.com/f/fantasy-football-mental-health-initiative?utm_medium=copy_link&utm_source=customer&utm_campaign=p_lico+share-sheet", 
         "please consider donating to the Fantasy Football Mental Health Initiative!"),
  
  tags$h1("Revised, alternate 1"),
  tags$div(
    "If you enjoyed this tool, ",
    tags$a(href="https://www.gofundme.com/f/fantasy-football-mental-health-initiative?utm_medium=copy_link&utm_source=customer&utm_campaign=p_lico+share-sheet", 
           "please consider donating to the Fantasy Football Mental Health Initiative!")
  ),
  
  tags$h1("Revised, alternate 2"),
  HTML("<p>If you enjoyed this tool, please consider <a href='https://www.gofundme.com/f/fantasy-football-mental-health-initiative?utm_medium=copy_link&utm_source=customer&utm_campaign=p_lico+share-sheet'>donating to the Fantasy Football Mental Health Initiative</a>!</p>")
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

image
image950×479 49.2 KB

Edit: added alternate 2 to demonstrate daattali's great tip.

#3

This is perfect! So simple, yet so effective! Thanks for the help, @julianstanley!

#4

If you ever need even finer control over the exact HTML that gets rendered, you can always write the raw HTML (assuming you know HTML) and pass it to shiny. For example

fluidPage(
  HTML("<p>If you enjoyed this tool, please consider <a href='https://www.gofundme.com/f/fantasy-football-mental-health-initiative?utm_medium=copy_link&utm_source=customer&utm_campaign=p_lico+share-sheet'>donating to the Fantasy Football Mental Health Initiative</a>!</p>")
)
1 Like