ⓘ Library Under Construction

The library’s circulating books, journals, and many of its services are now located in the Ritter Ice Arena. More information.

RIT LibGuides v2 Customizations: Email this Guide Button - API

This guide includes step-by-step directions for various customizations implemented on RIT's InfoGuides system
https://infoguides.rit.edu/prf.php?account_id=419

Purpose

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 using your LibGuides API. 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

Step 1: Insert an "Email this Guide" link

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>&nbsp;

    <a data-toggle="modal" data-target="#emailGuide" id="guideEmailLink">Email this Guide</a>

</div>

Click here to show in context

Step 2: Create the popup "modal"

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">&times;</span></button>

                <div id="emailModal">

                    <div id="guideMeta" data-gtitle='{{guide_title}}' data-gurl='{{guide_url}}' data-gowner='https://infoguides.rit.edu/prf.php?account_id=419'></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-->

Click here to show in context

Step 3: Stylize "Email this Guide" link and popup "modal" form

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>

Click here to show in context

Step 4: Populating the email message

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 using your API. Specifically, you will need to add some code to identify the guide author's name, title, and email address.

Follow the color codes below:

Blue text should be replaced by your instiution's unique site ID number. This can be found via the "Tools" menu by selecting "API" and then choosing any of the options that appear (e.g. "GET guides"). For example, RIT's site ID number is 114.

Red text should be replaced by your institution's unique alphanumeric API key. This can also be found via the "Tools" menu by selecting "API" and then choosing any of the options that appear (e.g. "GET guides").

After you have incorporated the changes listed above, your code should point to a link that looks similar to: http://lgapi.libapps.com/1.1/accounts/?site_id=114&key=12345a1bc2345d123e4fab5c12d345ef&expand=profile

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);

    $.getJSON(

      "http://lgapi.libapps.com/1.1/accounts/?site_id=YOUR-SITE-ID&key=YOUR-API-KEY&expand=profile",

      function(librarian) {

        for (l = 0; l < librarian.length; l++) {

          if (librarian[l].id == gownerid && librarian[l].id) {

            $('#guideOwner').attr('value', librarian[l].first_name + ' ' + librarian[l].last_name);

            if ($.isEmptyObject(librarian[l].title) === false) {

              $('#ownerTitle').attr('value', librarian[l].title);

            }

            $('#ownerEmail').attr('value', librarian[l].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>

Click here to show in context

Step 5: Processing the form request

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);

?>

Click here to show in context

Edit this Guide

Log into Dashboard

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.

Facebook icon  Twitter icon  Instagram icon  YouTube icon