How To Make a Clickable Text in Unity

---

Example of Clickable Text in Unity

In order to make a clickable text in Unity, we can use the code listed below. This code creates a new component called TMPTextObserver that can be added to any game object with a TextMeshPro Text Component. While we will explain the code in a moment, we urge you to read through the code yourself first.

TMPTextObserver.cs

using UnityEngine;
using TMPro;
 
public class TMPTextObserver : MonoBehaviour
{
    private TMP_Text m_TextComponent;
    private const int INVALID_LINK_INDEX = -1;
 
    private void Awake()
    {
        m_TextComponent = GetComponent<TMP_Text>();
    }
 
    private void LateUpdate()
    {
        int selectedLink = INVALID_LINK_INDEX;
        if(CheckForInteraction(out selectedLink))
        {
            Debug.Log("Link Clicked!");
        }
    }
 
    private bool CheckForInteraction(out int linkIndex)
    {
        linkIndex = INVALID_LINK_INDEX;
        Vector2 inputPosition = Vector2.zero;
 
        if(!CheckForInput(out inputPosition))
        {
            return false;
        }
 
        linkIndex = TMP_TextUtilities.FindIntersectingLink(m_TextComponent, inputPosition, null);
        return (linkIndex > INVALID_LINK_INDEX);
    }
 
    private bool CheckForInput(out Vector2 inputPosition)
    {
        inputPosition = Vector2.zero;
 
        if(!Input.GetMouseButtonUp(0)) return false;
        inputPosition = Input.mousePosition;
 
        return TMP_TextUtilities.IsIntersectingRectTransform(m_TextComponent.rectTransform, inputPosition, null);
    }
}
 

Example of how to add links through scripting.

private void Awake()
{
    m_TextComponent = GetComponent<TMP_Text>();
    m_TextComponent.text = "Click <link>HERE</link> to Continue";
}

Check if a Text is Clicked in Unity

To see if a text is clicked, we create a new component called TMPTextObserver that checks if any links have been clicked. The component does this by using a utility method provided by TextMesh Pro called TMP_TextUtilities.FindIntersectingLink(text, position, camera) that takes in a couple of parameters:

Parameter	Type	Description
text	TMP_Text	The text component you want to check for clicks
position	UnityEngine.Vector2	The position in Screen Space where the click happened. Usually this is the mouse position.
camera	UnityEngine.Camera	The camera that renders the canvas containing the TMP_Text component. You can use null for this parameter if your Canvas is rendered using the default Main Camera.

---

Add a Clickable Text Event

TMPTextObserver.cs

using UnityEngine.Events;
 
public class TMPTextObserver : MonoBehaviour
{
    [SerializeField]
    private UnityEvent<int> m_ClickedEvent;
    private TMP_Text m_TextComponent;
    private const int INVALID_LINK_INDEX = -1;

TMPTextObserver.cs

if(CheckForInteraction(out selectedLink))
{
    Debug.Log("Link Clicked!");
    m_ClickedEvent?.Invoke(selectedLink);
}

---

Make a Clickable URL or Hyperlink in Unity

---

Format Clickable Text in Unity

If you want to change how the color or style of the text looks, you have to use rich text tags provided by TextMeshPro. You can use mix multiple tags to create more artistic results. The most important tags are:

Tag	Description	Example
color	Changes the color of the text between the tags	<color=#ff0000>Red</color> Text
size	Changes the size of the color between the tags	<size=20>BIG</size> Text
bold	Changes the style of the text between the tags to bold	<b>Bold</b Text
italic	Changes the style of the text between the tags to italic	<i>Italic</i Text
underline	Changes the style of the text between the tags to underline	<u>Underline</u Text
Superscript	Changes the style of the text between the tags to superscript	<sup>Super</sup> Text
Subscript	Changes the style of the text between the tags to subscript	<sub>Sub</sub> Text

---

Adding an Extension Method to TextMesh Pro

Alternatively, we can pack the clickable text functionality we created into an extension method. This way, we can use make it seem as if it’s natively part of the TextMesh Pro classes. To do this, we create a new script called TextMeshProExtensions and add the following code:

TextMeshProExtensions.cs

using UnityEngine;
using TMPro;
 
public static class TextMeshProExtensions
{
    private static int INVALID_LINK_INDEX = -1;
 
    public static bool CheckIntersection(this TMP_Text component, Vector3 position, out int linkIndex)
    {
        linkIndex = INVALID_LINK_INDEX;
 
        if(!TMP_TextUtilities.IsIntersectingRectTransform(component.rectTransform, position, null)) return false;
 
        linkIndex = TMP_TextUtilities.FindIntersectingLink(component, position, null);
        return (linkIndex > INVALID_LINK_INDEX);
    }
 
    public static bool CheckIntersection(this TMP_Text component, Vector3 position)
    {
        int linkIndex = INVALID_LINK_INDEX;
        return CheckIntersection(component, position, out linkIndex);
    }
}

The code listed above creates a new method extension specifically for the TMP_Text component If you want to learn more about method extensions you can read our article. Finally, to use the method extension we could use the method extension as demonstrated below:

TMPTextObserver.cs

private void LateUpdate()
{
    if(CheckForInteraction())
    {
        Debug.Log("Link Clicked!");
    }
}
 
private bool CheckForInteraction()
{
    if(Input.GetMouseButtonUp(0))
    {
        if(m_TextComponent.CheckIntersection(m_TextComponent, Input.mousePosition))
        {
            return true;
        }
    }
 
    return false;
}

---

Make a Clickable Text in Unity Without TextMesh Pro

Unfortunately, it is currently not possible to create a clickable text without TextMeshPro. However, you can make a button that contains the text you want clickable. Still, the downside to this is that it all the text in the button will be clickable. At this point in time, Unity does not offer any API to write your own algorithm to check for clicks, nor does such a method currently exist. If you want to create a text you can click with your mouse or finger, you will have to use TextMesh Pro.

---

---

Conclusion

In the end, we hope you now understand how you can make a clickable text in unity. Unfortunately, there is no out of the box functionality that’s easy to use.. However, it is relatively straightforward to implement it yourself in a reusable component. If you found this article helpful, please share it.

---

---