How to add a button with link with query parameters in streamlit

[viji_narayan]

import streamlit as st
url = ‘https://test.com?a=1’

st.markdown(f’‘’
TestLink
‘’',
unsafe_allow_html=True)

The above code works if url doesn’t have query parameters (eg: url = 'https://test.com). But if it has query parameters, it is not parsed properly

[tonykip]

Hi @viji_narayan,

Thanks for posting!

You can use Streamlit’s components.html function. Here’s an example that works(the https://test.com/?a=1 loads very slowly):

import streamlit as st

# Define the URL with query parameters
url = 'https://test.com/?a=1'

# Create the button with the link
button = f'<a href="{url}" target="_blank"><button>Test Link</button></a>'
st.components.v1.html(button, height=50)

Happy Streamlit-ing!

[viji_narayan]

Thank you for your response. It works. But I want it to be placed in the sidebar. How can it be done?
regards
Viji

[snehankekre]

@viji_narayan

But I want it to be placed in the sidebar. How can it be done?

Put the st. command within a with st.sidebar block like so:

import streamlit as st

# Define the URL with query parameters
url = "https://test.com/?a=1"

# Create the button with the link
button = f'<a href="{url}" target="_blank"><button>Test Link</button></a>'

with st.sidebar:
    st.components.v1.html(button, height=50)
    st.markdown(button, unsafe_allow_html=True)

st.sidebar - Streamlit Docs

[viji_narayan]

Thank you for the prompt support. It works perfectly.