Message Button¶
The message button is a small button displayed on your website to help viewers easily send a private message (Direct Message) to your account on Twitter. A message button consists of two parts: a link to the Direct Message view on Twitter.com and Twitter’s widgets JavaScript to enhance the link with Twitter’s official and easily recognizable message button.
The publish.twitter.com website provides a simple, form-based approach to generate HTML markup for a message button you may copy-and-paste into your website template.
Message creation flow¶
Message @furniSelecting the message button will deeplink the user to the Direct Message view pre-populated with the values you define in button markup.
How to add a message button to your website¶
1. Create a new anchor element with a twitter-dm-button
class to allow Twitter’s widgets JavaScript to discover the element and enhance the link into a Tweet button. Set a href
attribute value of https://twitter.com/messages/compose
to create a link to the Twitter direct message view. The recipient_id
query parameter is the ID of the @username that should receive the messages.
<a href="https://twitter.com/messages/compose?recipient_id=3805104374"
class="twitter-dm-button" data-screen-name="@furni">
Message @furni</a>
2. Optionally pre-populate message text by customizing message web intent text query parameter.
<a href="https://twitter.com/messages/compose?recipient_id=3805104374&text=Hello%20world"
class="twitter-dm-button" data-screen-name="@furni">
Message @furni</a>
3. Asynchronously load Twitter’s widgets JavaScript using our loading snippet. The JavaScript snippet will check for an existing version of Twitter’s widgets JavaScript on the current page, initialize a function queue to be executed once the widgets JavaScript has loaded, and load the widgets JavaScript asynchronously from Twitter’s CDN.
Query parameters¶
Parameter | Description |
---|---|
recipient_id | Required. The user ID of the Twitter user that will receive the messages. |
text | Optional. The pre-populated text in the message. Text must be URL encoded. |
Button customization¶
Size¶
Add a data-size
attribute value of large
to display a larger message button.
Default
Message @furnisize=large
Message @furni