Springsense Widget Setup Guide

springsense-guide.md

Springsense Widget

The SpringSense widget dynamically loads SpringSense content on your page via JavaScript. It also templatable so you can customize the output to fit your own design. This manual will help you set up the widget.

Loading the SpringSense script

You can load the script by including the following code to the page;

<script src="https://4d9ae17c5ae68590ce6f-1c6f7d77e67457fef78cfb90b7e69696.ssl.cf3.rackcdn.com/assets/springsense.js"></script>

Setting up the template

You can customize the output of the widget by changing the template. Below you can find an example. You can insert variables using the <%= var %> syntax. Each training is rendered using this template and inserted into the container (see below). The available variables are:

• id
• name
• description
• url
• institute_logo

<script type="text/html" id="springest_template">
  <p style="width: 400px; display: inline-block;">
    <strong><a href="<%= url %>" rel="nofollow"><%= name %></a></strong></br>
    <%= description %>
    <a href="<%= url %>" rel="nofollow"> bekijk meer</a>
  </p>
  <img src="<%= institute_logo %>" style="display: inline;"><br><br>
</script>

Setting up the script

The next step is to configure the widget itself. Below you can find an example and a explanation of each setting.

<script>
$(document).ready(function() {
  Springest.setApiKey('INSERT_YOUR_PUBLIC_API_KEY_HERE');
  Springest.setHost('http://api.springest.nl');
  var job_title = $(".job h2").text();
  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>

Springest.setApiKey(...)

Please configure the widget with your public api key, because it will be available in the source code.

Springest.setHost(...)

Set up the domain where you want results from. The default is api.springest.nl.

var job_title

This is the job title that is sent to SpringSense to match trainings to. Use a JQuery selector to select the element and the text() method to extract the raw text.

var container_id

This is a selector in which the trainings are rendered. We advice to create a div with an unique id on the spot where you want the trainings to appear.

var callback

This piece of code converts the data it receives from Springest to actual HTML and inserts it into the page. You can leave the example, as that will suit most cases. In the example we also truncate the training description to 150 characters and add an ellipsis. You can remove this (and the parameter for getTrainings) to get our default.

Springest.getTrainings(...)

The final piece is the actual call to retrieve the data and render the trainings. You should not touch this unless you're sure what you're doing.

Help

If you need help or have any questions please contact me at dennis@springest.com or comment below.