bittersweet/guide.md Secret

## guide.md

      
    Raw
  

              guide.md
            
          
    I've generated this example based on http://www.intermediair.nl/vacature/4236810/Senior+Salarisadministrateur/

Include our widget on the page:
<script src="https://4d9ae17c5ae68590ce6f-1c6f7d77e67457fef78cfb90b7e69696.ssl.cf3.rackcdn.com/assets/springsense.js"></script>
Define a custom template for the Springsense output. I've 'abused' some of the
existing classes to get the example out there quickly.
<script type="text/html" id="springest_template">
  <tr>
    <td class="first bookmark">
      <strong class="title">
        <a href="<%= url %>"><%= name %></a>
      </strong>
      <br />
      <span><%= description %></span>
      <a href="<%= url %>" rel="nofollow"> bekijk meer</a>
    </td>
  </tr>
</script>
The only new html that's necessary is a container where we load in the
Springsense results. In the example I added this container after the closing
div of the 'relevant vacatures'.
<div class="related-vacatures clearfix" style="margin-top: 40px">
  <table class="dynamic-box">
    <caption>Relevante opleidingen</caption>
    <tbody id="related-trainings">
    </tbody>
  </table>
</div>
This is the actual widget implementation which uses your public key, the job
title didn't really have a unique ID so I've hardcoded the job title in this
case. I've also added some minor styling for the powered by Springest image.
<script>
  $(document).ready(function() {
    Springest.setApiKey('aah2828dn33c9d76f259aac45f9c7d2');
    var job_title = 'Senior Salarisadministrateur';
    var container_id = "#related-trainings";
    var callback = function(container, data) {
      $.each(data.trainings, function(_, training) {
        training.description = training.description.substr(0, 150) + "...";
        $(container).append(Springest.template("springest_template", training));
      });
    };

    Springest.getTrainings(job_title, container_id, callback);
  });
</script>

<style>
  #PoweredBySpringest img {
    width: 70px;
    position: relative;
    top: 2px
  }
</style>
Modifying training URL

In this example I change the url attribute of the Training object received
from Springsense. This is just like the truncating of description, you modify
the training/object before you pass it to the (custom) template.
So basically that is to cut up the training URL you receive from springsense like:
http://www.springest.nl/boertien-vergouwen-overduin/salarisadministratie?utm_term=Senior%20Salarisadministrateur
So you are left with salarisadministratie and just add the training's ID so
it corresponds with the internal URL setup of Intermediair.
var callback = function(container, data) {
  $.each(data.trainings, function(_, training) {
    training.description = training.description.substr(0, 150) + "...";
    var path = training.url.split('/');
    training_slug = path[path.length - 1].split('?')[0];
    training.url = 'http://www.intermediair.nl/testen-tools/opleidingen/training/' + training_slug + '/' + training.id;
    $(container).append(Springest.template("springest_template", training));
  });
};