Email widget example

gistfile1.html

<!-- CSS & JS -->
<link href="https://desk-customers.s3.amazonaws.com/shared/email_widget.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://desk-customers.s3.amazonaws.com/shared/email_widget.js" type="text/javascript"></script>

<!-- The lightbox -->
<div id="desk-support-box">
  <a id="desk-support-box-close">&otimes;</a>
  <iframe src="http://support.desk.com/customer/widget/emails/new" id="desk-widget-iframe"></iframe>
</div>
<div id="desk-darkness"></div>

<!-- Customize colors --> 
.desk-sidetab {
  background-color: #438DC6;
  color: white;
}
.desk-sidetab:hover {
    background-color: #438DC6;
    color: white;
}
.desk-button {
  color: black;
  background-color: #CED7DF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FBFDFF), color-stop(5%, #CED7DF));
  background-image: -moz-linear-gradient(90deg, #CED7DF 95%, #FBFDFF);
  border: 1px solid #9BABB9;
  box-shadow: 0 -1px rgba(0, 0, 0, 0.12) inset;
}
.desk-button:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fbfdff), color-stop(100%, #ced7df));
  background-image: -moz-linear-gradient(90deg, #ced7df 0%, #fbfdff);
}
a.desk-text {
  color: #00E;
}

<!-- Use one of these three different CTA styles (sidetab, button, or text link) -->
<a class="desk-cta desk-sidetab" href="http://help.asana.com/customer/widget/emails/new">Support</a>
<a class="desk-cta desk-button" href="http://help.asana.com/customer/widget/emails/new">Support</a>
<a class="desk-cta desk-text" href="http://help.asana.com/customer/widget/emails/new">Support</a>