Step 1 - Instructions

1) The first step is creating a new help center template that has a smaller-than-usual width. To do this, 
login to your Desk account, go to the Admin section, and create a new help center template. Once created, 
just add the following custom CSS: 

Step 1 – Code

body {width: 850px !important;}
#company-support-portal {padding: 0 15px !important;}
#company-header {margin: 0 -15px !important;}
#company-header h1 {margin-left: 15px !important;}
.wrapper {width: auto !important;}
#support-search .inner {width: 665px !important;}
#support-main {width: 570px !important;}
img, iframe, input, textarea, select {max-width: 100% !important;}

Step 2 - Instructions

2) Next add the following CSS to the page where you want the CTA button: 

Step 2 – Code

a#support-box-close:hover { color: black !important }
.sidebar {
    top: 235px;
    letter-spacing: 1px;
    margin: 0;
    background-color: rgb(67, 141, 198);
    color: rgb(255, 255, 255);
    font: normal normal bold 14px/normal "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    height: 28px;
    cursor: pointer;
    z-index: 1007;
    text-decoration: none;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    left: 0px;
    padding-top: 15px;
    padding-right: 13px;
    padding-bottom: 0px;
    padding-left: 13px;
    position: fixed;
    margin-left: -37px;
}
.sidebar:hover {
    text-decoration: none;
    background-color: rgb(67, 141, 198);
    color: white;
    margin: 0px 0px 0px -32px;
}

Step 3 - Instructions

3) Now just add the below HTML to the body of the page where you want the CTA button. Be sure to replace the 
URL with ##### with the actual help center template URL that you just created. 

Step 3 – Code

<a id="supportBar" class="sidebar">SUPPORT</a>
<div id="support-box" style="z-index: 1009; display:none; box-shadow: 0 0 15px rgba(0,0,0,.5); border-radius: 9px; width: 850px; height: 563px; background: white; border: 1px solid rgba(0,0,0,.25); position: absolute; top: 0; left: 50%; margin: 40px -425px;">
  <a onclick="$('#support-box').hide(); $('#darkness').fadeOut(600); return false;" href="#" id="support-box-close" style="z-index: 1010; cursor: pointer; display: block; position: absolute; top: -2px; left: 2px; font-size:27px; color: silver; text-shadow: 0 1px white; text-decoration: none;">&otimes;</a>
  <iframe src="https://cosupport.desk.com/?t=######" style="height: 100%; width: 100%; border: 0; margin: 0; padding: 0; border-radius: 9px; ">
  </iframe>
</div>
<div id="darkness" style="display:none; background: rgba(0,0,0,.75); height: 100%; width:100%; position: fixed; top:0; left:0; z-index: 1008" onclick="$('#support-box').hide(); $('#darkness').fadeOut(600);">
</div>

Step 4 - Instructions

4) Finally, if you're not already including jQuery on this page, you'll need to do that by adding the 
following within the HEAD of the page: 

Step 4 – Code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>