Your cart is empty now.
How to Add a Clickable Text Button in Google Data Studio - 4 Styles, No Hacks Needed
- 18 February, 2022
- Sin Ling Chan
Do you know you can create a button in Data Studio in less than 5 minutes? No hacks needed.
A button allows users to navigate to a page within a report or external website easily. This is useful if you have any documentation, a.k.a. READ ME page that the report users would like to refer to directly from the dashboard.
How to Create a Clickable Button in Data Studio
It’s very simple to create a clickable button in Data Studio. If you come from previous article which we’ve covered how to create a hyperlink text, you are actually half way there. Feel free to skip to this section right away!
Before we start, I do believe video tutorial is a better way to learn a data visualisation tool. So this article would only touch the basics of creating a button. If you wish to learn more about this topic, I highly recommend you to watch the video below, it’s only 5 min :)
If you’re still here, let’s get started!
Step 1: Add Button Display Text
To add a button, you need to first add a text box. Then, enter the text you wish to show up in the button.
How to Add Text Elements in Google Data Studio
Step 2: Add URL Link to the Text
Next, select the text and at the property panel, click the link icon to insert a URL link.
You’d see a window pops up, we can see the display text column is already pre-filled with the text we selected earlier. So you can just leave it.
Next, you can choose which page or url you would like to link to.
How to Insert Text Link in Data Studio Report
Here you have 3 options:
- dynamic page linking
- link to specific page within the report
- ANY url links
We’ll use the second option for demonstration purpose. Click on the placeholder for URL link and you’ll see a dropdown menu. In the menu, select any page.
For the last method, it’s actually quite straightforward. Just copy-and-paste the url link.
Again, video tutorial have more details about the different page-linking options and how to configure them.
Step 3: Format the Text Hyperlink
The problem with this button here is that it doesn’t appear like a button.
Next we’ll change the text formatting and style to transform it to a button.
- Set the text background colour to darker colour: e.g. dark blue.
- Set the text colour to lighter colour: e.g. white.
- Set the border radius for a round-edged button style.
- (Optional) Add border shadow if you wish to make it looks more 3D.
Like this tutorial? Let me know by tagging my instagram account or leave a comment on my youtube video! Thank you ❤️
See Also
Browse Blogs
Blog Posts
- April 2022