> ## Documentation Index
> Fetch the complete documentation index at: https://docs.x.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Direct Message 버튼

> 웹사이트에 Direct Message 버튼을 추가하여 방문자가 X 계정과 바로 대화를 시작할 수 있도록 하세요. 설정 및 사용자 지정 옵션을 포함합니다.

Message 버튼은 고객이 X에서 여러분에게 쉽게 Direct Message를 보낼 수 있도록 돕는 작은 버튼입니다. 웹사이트에서 바로 고객이 질문하고 지원을 받을 수 있도록 하세요.

Message 버튼은 두 부분으로 구성됩니다: X.com의 direct message composer로의 링크와, 링크를 알아볼 수 있는 Message 버튼으로 확장하는 X for Websites JavaScript입니다.

## 메시지 생성 흐름

버튼을 클릭하면 사용자는 버튼 마크업에서 정의한 값이 미리 채워진 Direct Message composer로 이동합니다.

## 웹사이트에 message 버튼을 추가하는 방법

[publish.x.com](https://publish.x.com)은 message 버튼을 만드는 간단한 구성 도구입니다. @screenName을 입력하고 시작하세요.

### 수동으로 추가

1. `twitter-dm-button` class 이름이 있는 anchor 요소를 만드세요. `href` 속성 값을 `https://x.com/messages/compose`로 설정하여 X direct message 뷰로 이동하는 링크를 생성하세요. `recipient_id` 쿼리 파라미터는 메시지를 받아야 할 @username의 ID입니다.

```html theme={null}
<a href="https://x.com/messages/compose?recipient_id=3805104374"
  class="twitter-dm-button" data-screen-name="@furni">
Message @furni</a>
```

2. 선택적으로 `text` 쿼리 파라미터를 사용자 지정하여 메시지 텍스트를 미리 채울 수 있습니다.

```html theme={null}
<a href="https://x.com/messages/compose?recipient_id=3805104374&text=Hello%20world"
  class="twitter-dm-button" data-screen-name="@furni">
Message @furni</a>
```

3. 로딩 스니펫을 사용하여 X for Websites JavaScript를 비동기적으로 로드하세요. 페이지 콘텐츠가 로드된 후 스크립트가 message 버튼을 초기화합니다.

### 쿼리 파라미터

| 파라미터           | 설명                                                |
| -------------- | ------------------------------------------------- |
| `recipient_id` | **필수**. 메시지를 받을 X 사용자의 사용자 ID입니다.                 |
| `text`         | **선택**. 메시지에 미리 채워지는 텍스트입니다. 텍스트는 URL 인코딩되어야 합니다. |

### 버튼 사용자 지정

#### 크기

`data-size` 속성 값을 `large`로 추가하여 더 큰 message 버튼을 표시합니다.