The directions on this page will explain how to add an "Email this Guide" button below a guide's title and description near the top of the page. Example
While it is recommended that you follow the directions on this page to implement the code yourself, you may also download a completed copy of this template to copy and paste into your system:
System Default - Tab Layout
Email this Guide Template | Email this Guide CSS Stylesheet | Email this Guide Javascript | Email this Guide PHP
System Default - Side-Nav Layout
Email this Guide Template | Email this Guide CSS Stylesheet | Email this Guide Javascript | Email this Guide PHP
To begin, open your system template, enter a new "Template Name" (e.g. RIT Template w/ Email Guide Option), and choose "Save as a NEW template" near the bottom of the page. It may be easier to copy the template to an external editor (e.g. Notepad, Notepad++) and make all changes there before saving in the system. Click here to show in context
The first step is to add an "Email this Guide" link below your guide's title and description fields. This link will trigger a popup "modal" that will allow a user to input his or her email address. The user will then receive an email from the guide author containing a link to the guide and appropriate contact information.
Find the following code (System Default - Tab Layout template: approximately lines 19-21; System Default: Side-Nav Layout: approximately lines 20-22):
<div id="s-lg-guide-desc-container">
<span id="s-lg-guide-description">{{guide_description}}</span>
</div>
Add the following code immediately after the code you just found:
<div id="emailGuideLink">
<span aria-hidden="true" class="glyphicon glyphicon-envelope"></span>
<a data-toggle="modal" data-target="#emailGuide" id="guideEmailLink">Email this Guide</a>
</div>
Next you need to create the popup "modal" that will house the "Email this Guide" content. This code can appear anywhere on the page, but it is recommended that it be placed near the top of the page.
Note: The purple URL in the code below will need to be updated during a later step in these directions (see Step 5).
Find the following code (System Default - Tab Layout: approximately line 3; System Default: Side-Nav Layout: approximately line 4):
{{ADMIN_CMD_BAR}}
Add the following code immediately after the code you just found:
<!--BEGIN: Email URL Modal-->
<div class="modal fade" id="emailGuide" tabindex="-1" role="dialog" aria-labelledby="emailGuideLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close emailClose" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="emailModal">
<div id="guideMeta" data-gtitle='{{guide_title}}' data-gurl='{{guide_url}}' data-gowner='https://infoguides.rit.edu/prf.php?id=58a0f70c-7cdb-11ed-9922-0ad758b798c3'></div>
<div id="emailPrompt">
<h5 id="emailDir">Use the box below to email yourself a link to this guide</h5>
</div>
<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;"
onload="if(submitted) {emailURL();}"></iframe>
<form class="form-horizontal" action="http://your-library-server.edu/emailGuide.php" method="post" target="hidden_iframe"
onsubmit="submitted=true;" id="emailGuideForm">
<div class="form-group">
<label for="emailbox" class="col-sm-2 control-label">Email Address:</label>
<div class="col-sm-8">
<input type="email" class="form-control" name="to" id="emailbox" alt="Box to enter your email address" placeholder="yourname@email.com" required></input>
<input type="hidden" name="guideTitle" value='{{guide_title}} Guide'/>
<input type="hidden" name="guideURL" value='{{guide_url}}'/>
<input type="hidden" name="guideOwner" id="guideOwner"/>
<input type="hidden" name="ownerTitle" id="ownerTitle"/>
<input type="hidden" name="ownerEmail" id="ownerEmail"/>
</div>
<div class="col-sm-2">
<button class="btn btn-default" type="submit">Send</button>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default emailClose" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--END: Email URL Modal-->
The "Email this Guide" link that you added near the top of each guide will be the default "hyperlink" blue and the cursor will be designed for text selection. To recolor your "Email this Guide" link and change the cursor to a pointer (indicating that the link should be clicked), insert the code below.
The second portion of this CSS code will stylize the form in your popup "modal." This code is not necessary, it is strictly for aesthetic purposes and will not effect the functionality of the "Email this Guide" feature.
Add the following CSS code as "Custom JS/CSS Code":
<style type="text/css">
/***STYLIZE EMAIL THIS GUIDE LINK***/
#emailGuideLink, #emailGuideLink a {
color:#706F6F;
cursor:pointer;
}
/***STYLIZE POPUP MODAL FORM***/
#emailGuideForm {
margin-top:20px;
}
#emailGuide .control-label {
text-align:left;
}
#emailGuide .modal-body {
padding:15px 15px 0px 15px;
}
</style>
While the title for the guide and the permanent URL are automatically generated by the system, you will need to add a small snippet of Javascript in order to populate the rest of the email message. Specifically, you will need to add some code to identify the guide author's name, title, and email address.
Because this snippet of code relies on the individual account IDs of each librarian, you will need to make several customizations for your institution. Follow the color codes below:
Blue text should be replaced by the unique account ID number for each librarian. This can be found in the left-hand column of the "Accounts" page located under the "Admin" menu for the system. For example, my account ID number is 15990. Be careful not to overwrite the single quotation marks surrounding the sample account ID number.
Red text should be replaced by the appropriate contact information for the respective librarian. For example, I would replace "Librarian Name" with Jennifer Freer; "Librarian Title" with Business Librarian; and "Librarian Email" with jlfwml@rit.edu. Be careful not to overwrite the single quotation marks surrounding the sample contact information.
Green text represents the generic contact information you would like to use if a user's account id is not included in this script. For example, at RIT we would replace "Librarian Name" with Reference Librarian; "Librarian Title" with The Wallace Center; and "Librarian Email" with libraryhelp@rit.edu. Be careful not to overwrite the single quotation marks surrounding the sample contact information.
Add the following CSS code as "Custom JS/CSS Code":
<script type="text/javascript">
$(window).load(function() {
var gowner = $('#guideMeta').attr('data-gowner');
var gownerid = gowner.substr(gowner.lastIndexOf("=") + 1);
$('#guideOwner').attr('value',gownerid);
if(gownerid == '12345') {
$('#guideOwner').attr('value','Librarian Name');
$('#ownerTitle').attr('value','Librarian Title');
$('#ownerEmail').attr('value','Librarian Email');
} else if(gownerid == '67890') {
$('#guideOwner').attr('value','Librarian Name');
$('#ownerTitle').attr('value','Librarian Title');
$('#ownerEmail').attr('value','Librarian Email');
} else {
$('#guideOwner').attr('value','Default Librarian Name');
$('#ownerTitle').attr('value','Default Librarian Title');
$('#ownerEmail').attr('value','Default Librarian Email');
}
$('.emailClose').click(function() {
$('#emailGuideForm, #emailDir').show();
$('#emailSuccess').hide();
});
});
function emailURL() {
$('#emailDir, #emailGuideForm').hide();
$('#emailPrompt').append('<h5 id="emailSuccess">Your email has been sent!</h5>');
}
</script>
The snippet of code above only accounts for two unique librarians. You will need to add additional "else if" statements for each librarian in your system. To do so, copy and paste the following code and place it immediately before the "else" statement in the snippet above. You can include this snippet of code for as many users as you deem appropriate.
else if(gownerid == '12345') {
$('#guideOwner').attr('value','Librarian Name');
$('#ownerTitle').attr('value','Librarian Title');
$('#ownerEmail').attr('value','Librarian Email');
}
The steps outlined above will help you format your "Email this Guide" link, create a user-friendly form, and help the form glean relevant information from the site such as the guide title and guide creator account id. In order to have the form perform the action of sending an email, you will need to utilize a PHP file.
Springshare does not allow PHP code to sit on its servers due to privacy, security, and performance concerns. Therefore, your PHP file will need to live on a separate active server. For example, the PHP file for RIT's InfoGuides is stored on the library's main server. If you do not have access to your library's server, ask your site's administrator for assistance uploading the necessary the file.
Once you have successfully saved this PHP code to your server, you will need to update the purple URL from the code in Step 2.
Create a text file in Notepad, Notepad++, or another text editor using the following PHP code and save it as emailGuide.php. This file will then need to be uploaded to an active server.
<?php
$to = $_POST['to'];
$guideURL = $_POST['guideURL'];
$subject = $_POST['guideTitle'];
$guideTitle = $_POST['guideTitle'];
$guideOwner = $_POST['guideOwner'];
$ownerTitle = $_POST['ownerTitle'];
$ownerEmail = $_POST['ownerEmail'];
$message = "Here is a link to the " . $guideTitle . ": " . $guideURL . "\n
Remember, if you have any questions, you can respond to this email to get more help!\n
-- \n" . $guideOwner . "\n" . $ownerTitle . "\n" . $ownerEmail;
$headers .= "Reply-To: " . $guideOwner . " <" . $ownerEmail . ">\r\n";
$headers .= "Return-Path: " . $guideOwner . " <" . $ownerEmail . ">\r\n";
$headers .= "From: " . $guideOwner . " <" . $ownerEmail . ">\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
$headers .= "X-Priority: 3\r\n";
$headers .= "X-Mailer: PHP". phpversion() ."\r\n";
// Send email
mail($to,$subject,$message,$headers);
?>
Use of RIT resources is reserved for current RIT students, faculty
and staff for academic and teaching purposes only.
Please contact your librarian with any questions.
