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.
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.
<section id="prosple-search-widget" />
<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>
#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 contact@prosple.com and we’d be happy to help!