diff --git a/src/components/ShareWidget.js b/src/components/ShareWidget.js
index 37c8629..8669111 100644
--- a/src/components/ShareWidget.js
+++ b/src/components/ShareWidget.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styled from 'react-emotion'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { colors, media } from '@/theme'
-import { faLink, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faLink, faTimes, faEnvelope } from '@fortawesome/free-solid-svg-icons'
 import {
   faFacebookSquare,
   faTwitterSquare,
@@ -47,7 +47,13 @@ const LinkWrapper = styled.div`
   padding: 0 0.8rem;
 `
 
+const LinkLabel = styled.span`
+  white-space: nowrap;
+  color: ${colors.gray};
+`
+
 const InvisibleInput = styled.input`
+  margin-left: 0.7rem;
   background-color: transparent;
   border: none;
   width: 100%;
@@ -66,7 +72,7 @@ const LinkModalHeader = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 1.55rem;
+  margin-bottom: 0.5rem;
 `
 const LinkModalTitle = styled.h3`
   margin: 0;
@@ -76,6 +82,7 @@ const Label = styled.label`
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  color: ${colors.gray};
 `
 
 const Checkbox = styled.input`
@@ -83,44 +90,46 @@ const Checkbox = styled.input`
 `
 
 /**
- * TODO: improve onDubleClick
+ * if we improve onDoubleClick
  * https://gist.github.com/MoOx/12726d85a3343d84ee3c
  * https://stackoverflow.com/questions/49187412/handle-react-ondoubleclick-and-single-onclick-for-same-element
  */
 class ShareWidget extends Component {
   state = {
     linkModalOpen: false,
-    showShortLink: false,
+    showFullUrl: false,
   }
 
   linkInputRef = React.createRef()
 
   getLink = () =>
     this.props.siteUrl +
-    (this.state.showShortLink
-      ? this.props.post.fields.slug_short
-      : this.props.post.fields.url)
+    (this.state.showFullUrl
+      ? this.props.post.fields.url
+      : this.props.post.fields.slug_short)
 
   onLinkModalButtonClick = ({ metaKey }) =>
-    metaKey ? this.copyShortLink() : this.toggleLinkModal()
+    metaKey ? this.copyToClipboard() : this.toggleLinkModal()
 
   toggleLinkModal = () =>
     this.setState({ linkModalOpen: !this.state.linkModalOpen })
 
-  copyShortLink = () =>
-    this.setState({ showShortLink: true }, this.copyToClipboard)
-
-  toggleLink = () => this.setState({ showShortLink: !this.state.showShortLink })
+  toggleLink = () => this.setState({ showFullUrl: !this.state.showFullUrl })
 
   onClickLinkInput = () => this.linkInputRef.current.select()
 
   copyToClipboard = () => {
     /* globals document */
-    const shareUrlInput = document.getElementById(`share-url`)
-    shareUrlInput.focus()
-    shareUrlInput.select()
-
+    let shareUrlInput = document.getElementById(`share-url`)
     try {
+      if (!shareUrlInput) {
+        shareUrlInput = document.createElement(`textarea`)
+        shareUrlInput.value = this.getLink()
+        document.getElementById(`sharewidget`).appendChild(shareUrlInput)
+      }
+      shareUrlInput.focus()
+      shareUrlInput.select()
+
       if (document.execCommand(`copy`)) {
         toast.success(this.props.shareUrlSuccessLabel)
       } else {
@@ -129,23 +138,27 @@ class ShareWidget extends Component {
     } catch (err) {
       toast.error(this.props.shareUrlErrorLabel)
     }
+    shareUrlInput.remove()
   }
 
   render() {
-    const { linkModalOpen } = this.state
+    const { linkModalOpen, showFullUrl } = this.state
     const {
       label,
-      getShortUrlLabel,
+      getFullUrlLabel,
       copyLabel,
+      linkLabelShort,
+      linkLabelFull,
       post,
       siteUrl,
       ...props
     } = this.props
+    const { title, tweet_id, lang } = post.frontmatter
     const link = siteUrl + post.fields.url
     const shortLink = siteUrl + post.fields.slug_short
 
     return (
-      <Container {...props}>
+      <Container id="sharewidget" {...props}>
         {label && <Title>{label}</Title>}
 
         <ContainerInner>
@@ -171,12 +184,12 @@ class ShareWidget extends Component {
           >
             <a
               href={
-                post.frontmatter.tweet_id
+                tweet_id
                   ? `https://twitter.com/intent/retweet?tweet_id=${encodeURIComponent(
-                      post.frontmatter.tweet_id
+                      tweet_id
                     )}`
                   : `http://twitter.com/share?text=${encodeURIComponent(
-                      post.frontmatter.title
+                      title
                     )}&url=${encodeURIComponent(shortLink)}`
               }
               target="_blank"
@@ -191,7 +204,7 @@ class ShareWidget extends Component {
             <a
               href={`https://plus.google.com/share?url=${encodeURIComponent(
                 link
-              )}&hl=${encodeURIComponent(post.frontmatter.lang)}`}
+              )}&hl=${encodeURIComponent(lang)}`}
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -206,13 +219,27 @@ class ShareWidget extends Component {
             <a
               href={`https://telegram.me/share/url?url=${encodeURIComponent(
                 link
-              )}&text=${encodeURIComponent(post.frontmatter.title)}`}
+              )}&text=${encodeURIComponent(title)}`}
               target="_blank"
               rel="noopener noreferrer"
             >
               <FontAwesomeIcon icon={faTelegramPlane} size="lg" />
             </a>
           </div>
+          <div
+            css={{
+              '& svg': { color: colors.brands.telegram, margin: `1rem` },
+            }}
+          >
+            <a
+              href={`mailto:?body=${encodeURIComponent(
+                link
+              )}&subject=${encodeURIComponent(title)}`}
+              rel="noopener noreferrer"
+            >
+              <FontAwesomeIcon icon={faEnvelope} size="lg" />
+            </a>
+          </div>
 
           <div
             css={{
@@ -221,7 +248,7 @@ class ShareWidget extends Component {
           >
             <Button
               onClick={this.onLinkModalButtonClick}
-              onDoubleClick={this.copyShortLink}
+              onDoubleClick={this.copyToClipboard}
             >
               <FontAwesomeIcon icon={faLink} size="lg" />
             </Button>
@@ -232,6 +259,10 @@ class ShareWidget extends Component {
           <LinkModal>
             <LinkModalHeader>
               <LinkModalTitle>{label}</LinkModalTitle>
+              <Label>
+                <Checkbox type="checkbox" onClick={this.toggleLink} />
+                <span>{getFullUrlLabel}</span>
+              </Label>
               <FontAwesomeIcon
                 icon={faTimes}
                 onClick={this.toggleLinkModal}
@@ -242,20 +273,19 @@ class ShareWidget extends Component {
               />
             </LinkModalHeader>
             <LinkWrapper>
+              <LinkLabel>
+                {showFullUrl ? linkLabelFull : linkLabelShort}
+              </LinkLabel>
               <InvisibleInput
                 id="share-url"
                 type="text"
-                value={this.state.showShortLink ? shortLink : link}
+                value={showFullUrl ? link : shortLink}
                 readOnly
                 onClick={this.onClickLinkInput}
                 innerRef={this.linkInputRef}
               />
               <Button onClick={this.copyToClipboard}>{copyLabel}</Button>
             </LinkWrapper>
-            <Label>
-              <Checkbox type="checkbox" onClick={this.toggleLink} />
-              <span>{getShortUrlLabel}</span>
-            </Label>
           </LinkModal>
         )}
       </Container>
@@ -265,8 +295,10 @@ class ShareWidget extends Component {
 
 ShareWidget.propTypes = {
   label: PropTypes.string,
-  getShortUrlLabel: PropTypes.string,
+  getFullUrlLabel: PropTypes.string,
   copyLabel: PropTypes.string,
+  linkLabelShort: PropTypes.string,
+  linkLabelFull: PropTypes.string,
   shareUrlSuccessLabel: PropTypes.string,
   shareUrlErrorLabel: PropTypes.string,
   post: PropTypes.object,
diff --git a/src/templates/BlogPost.js b/src/templates/BlogPost.js
index d20f9d3..ad289a9 100644
--- a/src/templates/BlogPost.js
+++ b/src/templates/BlogPost.js
@@ -69,8 +69,10 @@ const BlogPost = props => {
         label={BlogPost.frontmatter.shareLabel}
         shareUrlSuccessLabel={BlogPost.frontmatter.shareUrl.success}
         shareUrlErrorLabel={BlogPost.frontmatter.shareUrl.error}
-        getShortUrlLabel={BlogPost.frontmatter.shareUrl.getShortUrlLabel}
+        getFullUrlLabel={BlogPost.frontmatter.shareUrl.getFullUrlLabel}
         copyLabel={BlogPost.frontmatter.shareUrl.copyLabel}
+        linkLabelShort={BlogPost.frontmatter.shareUrl.linkLabelShort}
+        linkLabelFull={BlogPost.frontmatter.shareUrl.linkLabelFull}
         post={post}
         siteUrl={props.data.site.siteMetadata.siteUrl}
         css={{
@@ -204,9 +206,11 @@ export const query = graphql`
         shareLabel
         shareUrl {
           copyLabel
+          linkLabelShort
+          linkLabelFull
           success
           error
-          getShortUrlLabel
+          getFullUrlLabel
         }
         relatedArticlesLabel
         SupportWidget {