> For the complete documentation index, see [llms.txt](https://docs-kr.zep.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs-kr.zep.us/creator/tutor/undefined/text-button-list.md).

# Text Button List

#### Text Button List 형 위젯은 텍스트와 버튼을 함께 표시할 수 있는 UI입니다.

활용 앱 ) 카메라 관전 프리미엄 기능

#### Image

![](https://2461137890-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiW553XSGeKCAPpImxXi3%2Fuploads%2FmNLotSQD7iT1g2xwEaqW%2Fimage.png?alt=media\&token=370a745c-cb5f-45b6-96f2-344ed19e6536)

**Example**

{% file src="/files/tAQ6urAqcEI8PQ47w53C" %}

```javascript
function openWidget(p)
{
    //Check if player is mobile or not
    if(p.isMobile)
        //Set the widget's name, anchor position, width, and height.
        p.tag.widget = p.showWidget('widget.html','sidebar',300,550);
    else
        p.tag.widget = p.showWidget('widget.html','sidebar',280,520);

    //Send data to widget
    p.tag.widget.sendMessage({
        isMobile : p.isMobile,
    })
    
    //Register events for messages sent from widgets
    p.tag.widget.onMessage.Add(function(sender, msg) {
        switch (msg.type)
        {
            case 'close':
                if(p.tag.widget)
                {
                    p.tag.widget.destroy();
                    p.tag.widget = null;
                }
                
                break;
        }
    })
}

//Event when a player joins the app
App.onJoinPlayer.Add(function(p) {
    // Initialize tag properties of player
    p.tag = {};
});

// Action when the player clicks the sidebar app
App.onSidebarTouched.Add(function(p) {
    openWidget(p);
});


```