Adding a Job search widget to your website

 

What is the Prosple Job and Internship Search Widget?

The Prosple Search widget is the search box that you see on the homepage of your Careers or Course directory. This search widget will lead to the results of the filter that was used – whether it be Open Opportunities on a specific Study Field for a careers directory, or Course Availabilities for course directories.

With our latest update, this search widget can now be placed anywhere on your website in just 3 simple steps and can be done in less than 5 minutes by your IT team.

 

Why You Should Add the Prosple Job and Internship Search Widget to your Website

Adding the search widget of your Prosple-powered Careers or Course Directory on pages on your website can be a great way for your site visitors to have a seamless website experience with your directory. 

With the search widget on your website, you can give maximum exposure to open opportunities and/or courses hosted on your directory that your students will greatly benefit from. 

 

---

Adding the Widget to Your Homepage

STEP 1: HTML Tag

1. Copy the HTML code snippet below.
2. Depending on how your website is set-up, go to the HTML editor of the page where you would like search widget to show up
3. Insert the following snippet into the HTML markup. It serves as the placeholder for the search widget and it’s where the widget will be shown on the page. 
4. Make sure that changes made on the page are saved.

<section id="prosple-search-widget" />

 

STEP 2: Javascript Widget

1. We will be providing you with the exact JS widget codes for your partner directory. To request for a custom code please contact your account manager, or send us an email at [email protected]
2. Once you have your partner-specific JS widget code, you may add them at the end of the same HTML page, right before the closing </body> code.

<script type="text/javascript">
  var $PROSPLE_SEARCH_ID = 15;
  var $PROSPLE_SEARCH_NODE_TYPE = 'INPUT_NODE_TYPE'
  var $PROSPLE_SEARCH_ENDPOINT = 'https://CAREERDIRECTORYURL/search-jobs'
  var $PROSPLE_SEARCH_DROPDOWNS = [
    {
      label: "I'm looking for",
      emptyOptionText: 'Any Opportunity Type',
      filterCondition: 'opportunity_type',
      facet: 'opportunity_types',
    },
    {
      label: "That requires a degree in",
      emptyOptionText: 'Any Study Field',
      filterCondition: 'study_field',
      facet: 'study_field_tids',
    },
  ];
</script>
<script src="https://prosple-widgets.s3-ap-southeast-2.amazonaws.com/prosple/prosple-search-v2.1.0.js"></script>

 

 

STEP 3: Styling (Optional)

1. The widget can be styled using normal CSS cascading rules. The attached styles can be used as default, as a starting point or completely discarded if you prefer to have your stylesheet done from scratch. 

#prosple-search-widget *,
#prosple-search-widget::before,
#prosple-search-widget::after {
  box-sizing: border-box;
}

#prosple-search-widget form {
  position: relative;
  z-index: 20;
}

#prosple-search-widget form:last-child {
  margin-bottom: 0px;
}

#prosple-search-widget form:first-child {
  margin-top: 0px;
}

#prosple-search-widget .fieldset {
  vertical-align: middle;
  border: 0px none;
  margin: 0px;
  padding: 0px;
}

#prosple-search-widget .section--input {
  display: inline-block;
  margin: 0 0 20px 0;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  color: initial;
  width: 100%;
}

#prosple-search-widget .section--input .input-label:first-child {
  margin-top: 0px;
}

#prosple-search-widget .section--input .input-group {
  border-bottom: 1px solid rgb(215, 215, 215);
  padding: 20px;
}

#prosple-search-widget .section--input .input-group:last-child {
  border-bottom: 0px none;
}

#prosple-search-widget .section--input .input-label {
  display: block;
  color: rgb(114, 114, 114);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: 5px;
  padding: 0px 0.5rem;
}

#prosple-search-widget .section--input .input-group .input {
  border: 0px none;
  display: inline-block;
  margin: 0px;
  position: relative;
  background-color: rgb(255, 255, 255);
  border-radius: 3px;
  width: 100%;
}

#prosple-search-widget .section--input select,
#prosple-search-widget .section--input input[type='text'] {
  font-size: 18px;
  padding: 0.25rem 40px 0.25rem 0.5rem;
  appearance: none;
  -webkit-appearance: none;
  background: transparent none repeat scroll 0% 0%;
  border: 0px none;
  -moz-appearance: none;
  color: rgb(32, 32, 32);
  line-height: 24px;
  position: relative;
  width: 100%;
  z-index: 10;
  display: inline-block;
  font-family: inherit;
  max-width: 100%;
  text-transform: none;
  margin: 0px;
  cursor: pointer;
}

#prosple-search-widget .section--input .icon {
  color: rgb(10, 126, 178);
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1em;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  width: 1em;
}

#prosple-search-widget .section--input .icon--chevron-down::before {
  content: '\0025BC';
  vertical-align: middle;
  box-sizing: border-box;
}

#prosple-search-widget .input-group--actions {
  text-align: right;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  position: relative;
}

#prosple-search-widget .input-group--actions .button {
  border-radius: 3px;
  border-style: none;
  font-weight: 500;
  text-decoration: none;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  background-color: rgb(0, 43, 100);
  border: 1px solid transparent;
  color: rgb(255, 255, 255);
  font-size: 14px;
  padding: 10px 16px;
  margin: 0px;
}

#prosple-search-widget .input-group--actions .button:hover {
  opacity: 0.8;
}

#prosple-search-widget .input-group--actions .icon {
  font-size: 2em;
  margin-left: 0px;
  margin-right: 0px;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1em;
  text-align: center;
  text-decoration: inherit;
  text-transform: none;
  width: 1em;
}

#prosple-search-widget .input-group--actions .icon--search::before {
  content: '⚲';
  display: inline-block;
  transform: rotate(-45deg);
}

#prosple-search-widget .input-group--actions .icon span {
  border: 0px none;
  clip: rect(0px, 0px, 0px, 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0px;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  clip-path: inset(50%);
}

@media (min-width: 64em) {
  #prosple-search-widget .fieldset * {
    vertical-align: middle;
  }

  #prosple-search-widget .section--input {
    display: inline-flex;
    margin: 0px;
    border-radius: 3px 0 0 3px;
    height: 90px;
    width: initial;
  }

  #prosple-search-widget .section--input .input-group {
    display: inline-block;
    border-bottom: 0px;
    border-right: 1px solid rgb(215, 215, 215);
  }

  #prosple-search-widget .section--input .input-group:last-child {
    border-right: 0px none;
  }

  #prosple-search-widget .input-group--actions {
    display: inline-block;
  }

  #prosple-search-widget .input-group--actions .button {
    height: 91px;
    border-radius: 0px 3px 3px 0px;
  }
}

That’s it! Once those 3 steps are completed, you should now be able to see the search widget on the page where the code was implemented.

Need help in setting it up? Feel free to email us at [email protected] and we’d be happy to help!