# Mailchain Widget **Mailchain** is the communication layer of web3. Send and receive messages directly between wallets. This widget provides a convenient "mailto" link that can be used anywhere to give a way to contact an account Id. ## Usage To get started with this widget, add the following to your component: ``` <div> <Widget src="components-mailchain.near/widget/MailchainWidget" props={{ accountId }} /> </div> ``` ## Properties ### `"accountId"` (required) The recipient accountId to send a message to. If this is a profile link, you probably want this to be the profile the user is visiting, rather the user themselves. Expected value: .near account, e.g. near account variable or `"alice.near"` Example usage: ``` props={{ accountId }} ``` or ``` props={{ "accountId": "alice.near" }} ``` ### `"subject"` (optional) The subject of the message. Expected value: `text` Example usage: ``` props={{ accountId, "subject": "Contact from near.social" }} ``` ### `"linkunderline"` (optional) If the link text should appear underlined. This overrides the default CSS. Exclude `prop.linkunderline` to inherit default styles. Expected value: `"yes"` Example usage: ``` props={{ accountId, "linkunderline": "yes" }} ``` ### `"showExternalLinkIcon"` (optional) Show the external link icon after the text to indicate the link opens in a new tab. Example usage: ``` props={{ accountId, "showExternalLinkIcon": "yes" }} ``` ### `"showRegisteredAddressIndicator"` (optional) _COMING SOON_ _This feature is coming soon. Enabling it now will have no effect, but will add the indicator when the feature is released._ Display an indicator icon showing whether an account is already registered in Mailchain. NOTE: Mailchain supports _optimistic sending_ where the protocol accepts messages for unregistered accounts that can be retrieved by a user when they register their NEAR account or address. See [Mailchain developer docs](https://docs.mailchain.com/developer/advanced/resolve-address/#registered-addresses-and-optimistic-delivery) for more info. Exclude `prop.showRegisteredAddressIndicator` to remove indicator. Expected value: `"yes"` Example usage: ``` props={{ accountId, "showRegisteredAddressIndicator": "yes" }} ``` ### `"color"` (optional) The color of the link text to display. Expected values: `hex value` (e.g. `"#FF4500"`) or `RGB value` (e.g. `"(255,69,0)"`) Example usage: ``` props={{ accountId, "color": "#FF4500" }} ``` ### `"padding"` (optional) Add padding to the widget `div`. Expected values: See https://www.w3schools.com/cssref/pr_padding.php#midcontentadcontainer for accepted property values. Example usage: ``` props={{ accountId, "padding": "10px 5px 15px 20px" }} ``` or ``` props={{ accountId, "padding": "10px" }} ``` ### `"margin"` (optional) Add margin to the widget `div`. Expected values: See https://www.w3schools.com/cssref/pr_margin.php#midcontentadcontainer for accepted property values. Example usage: ``` props={{ accountId, "margin": "10px 5px 15px 20px" }} ``` ### `"symbol"` (optional) The Mailchain logo symbol to display before the link Expected values: - undeclared: the Mailchain gradient logo - `"icon"`: the Mailchain icon - `"bw"`: the Mailchain black & white logo - `"none"`: do not display a logo Example usage: ``` props={{ accountId, "symbol": "icon" }} ```