Provide Citrix Receiver download link on NetScaler Gateway authentication page based on Client OS

While working on a new StoreFront/NetScaler Gateway implementation, I was asked to provide a Citrix Receiver link on the NetScaler Gateway authentication page, although I thought this was a pretty simple task, I figure we would make this fancier and detect the Client OS then provide the proper Citrix Receiver the company wanted to deploy.

Before you get started, I suggest reading the articles below.  These guides will give you a great understanding on the steps necessary to modify the NetScaler Gateway logon page.

Remember that the changes will be lost if the NetScaler reboots, so please make sure to follow the steps below after you are done.

Apply customization:

Putty in to NS

• shell
• mkdir /var/ns_gui_custom
• cd /netscaler
• tar -cvzf /var/ns_gui_custom/customtheme.tar.gz ns_gui/*

Now apply the package to your AGEE sites

• In the configuration utility, under the Configuration tab, expand “NetScaler Gateway” and then click “Global Settings“.
• In the details pane, under Settings, click Change global settings.
• In Global NetScaler Gateway Settings, click the Client Experience tab.
• Next to UI theme, click Custom and then click OK.
• Save NS config and done!

Read these before getting started:

• Citrix NetScaler Gateway Client Choices branding
• Customizing Citrix NetScaler Gateway 10.5 logon page with Dual Factor Authentication
• NetScaler Gateway front page à la StoreFront 3.0

Environment:

• Citrix NetsScaler 10.5 Safe Harbor Build 56.22.nc
• StoreFront 2.6

Lets get started 🙂

Goals:

• Create Receiver Download link based on OS (Windows, Mac, iOS and Linux)
• Create Support Contact information
• Create footer information

The final look (had to blur company info, logos and links)

Back up the index.html file under /var/netscaler/gui/vpn.  In this case this deployment is already set up with the StoreFront 3.0 look and feel, so I just need to mess with the index.html

Around line 15.  Lets add some CSS so we can then use to display the text.  Your code should look like this

<style type=”text/css”>
body
{
display : none;
visibility: hidden;
}

#auth-footer-disclaimer-wrapper {
width: 100%;
position: absolute;
bottom: 10px;
text-align: center;
}

#auth-footer-disclaimer {
color: white;
width: 80%;
margin: 0px auto;
font-family: tahoma, helvetica, arial;
font-size: 7pt;
}

#auth-footer-help-info {
color: white;
width: 80%;
margin: 0px auto;
font-family: tahoma, helvetica, arial;
font-size: 10pt;
}
#auth-footer-qrc-links {
color: white;
position: relative;
text-align: center;
font-family: source sans pro, segoe ui, arial;
font-size: 10pt;
padding: 10px;
}

#auth-footer-qrc-links a, a:link, a:visited {
color: white;
text-decoration: underline;
}

#auth-footer-qrc-links a:hover {
color: white;
text-decoration: underline;
}

</style>

Now lets create that java script for browser detection script to detect the presentation of ICA client download links

Inset this around line 87 after

function setFocus(obj)
{
if (obj != null) {
obj.focus();
}
}

You will need to insert the javascript here.  However WordPress is not allowing me to display it 😦

Take a look at the index.html file link

Now around line 236, look for

div id=”logonbelt-bottomshadow”

Then inset the code to call the CSS you used as well as the link and text you defined before

<!– Display Citrix Receiver link // –>
<div id=”auth-footer-qrc-links”>

document.write(dlLink);

Here is the entire Index.html file

Disclaimer:

I do not accept any responsibility or liability for the accuracy, content, completeness, legality, or reliability of the information contained on this website.