Search widget

The Degree.Me Search widget gives you the ability to embed on your own website a list of colleges that are highly relevant to your page content.

The Search widget uses our powerful Search API, just like our Degree.Me colleges page.

Several options available to configure the widget's style and content, and search parameters.

Your content and our Search widget will increase user interaction with school brands, resulting in a both a richer user experience and more monetization opportunities. Above all, the user is in control of which schools she interacts with.

Try a demo

Usage

Just include our plugin at your application in way it best fit your project code style:

As external script

Load widget script from our CDN, directly in your HTML markup (we recommend doing this just before </body> closing tag, but it's OK to use any point you prefer):

<script src="https://d2cn9l4d3sa113.cloudfront.net/search-widget.js"></script>

This will define a custom element <dm-search> which could be used anywhere in your HTML page:

<dm-search [...options]></dm-search>

That's it! Explore the available options and styling notices while you use our sandbox environment to build as many different search widgets as you like!

Example

<dm-search query="state:ca/program:architecture"></dm-search>

Info

As an alternative, the plugin exports global class dmWidgetSearch, which could be used for manually initialize search widget instance, as it described below.

As module dependency

Coming soon The plugin can be included into your application with NPM, Node.js package manager.

CommonJS module

npm install degreeme-search-widget --save

const dmWidgetSearch = require('degreeme-search-widget')

ES module

npm install degreeme-search-widget-es --save

import dmWidgetSearch from 'degreeme-search-widget-es'

Now you can start the widget (also with this way could be started widgets loaded from our CDN):

new dmWidgetSearch({target: domElement, props: {...options} })

where target is any DOM element and props is an options.

Examples

Attach widget into document.body with option size specified:

new dmWidgetSearch({target: document.body, props: { size: 5 } })

You can even start it silently without specifying a target and attach component later:

const widgetInstsnce = new dmWidgetSearch()

// set any options
widgetInstsnce.title = 'Hi there!'

// wait for any asynchronous operations you want
setTimout(() => document.body.append(widgetInstsnce), 1000)

Options

Option	Type	Description	Default
`key`	String	Partner ID Partner identification key provided by Degree.Me support. Please, make sure this option is correct once your application goes live.	(no_value)
`title`	String	Title of widget Just any message you want :) Empty value will hide title.	Take The Next Step!
`size`	Number	Page length Amount of colleges to display per each page. If received colleges amount is greater then value specified, a pager will be displayed. If specified size is out of allowed range, default value used. Allowed values: min: 1, max: 10	3
`max`	Number	Allowed list length Sets maximum allowed colleges to display. Must be greater than `size` option, otherwise ignored. No value or zero means unlimited list. Allowed values: min: `size`	(no_value)
`include`	String, Array	College properties to include for display. Could contain multiple values in comma-separated string or array. Empty value will hide all college properties. Allowed values: location, price, funding, education, campus, acceptance Example: `funding, campus, acceptance`	location
`query`	String, Array	Query to Degree.Me Search API Array or string with an affordable filters in format `key:value`. Multiple filters should be delimited with `/` char in case it passed as single string. See Search API Query filters section for details. No value means display all colleges available. Examples: `state:ca` `state:ca/program:architecture` `city:san-francisco~ca/program:architecture` `program:architecture/degree:master,bachelor`	(no_value)

Styling

Search widget runs as web component, so it isolated from your application styles and code. Therefore, you can't style a <dm-search> element directly with custom CSS, like ~~dm-search { background: grey }~~ However, you can customize it a little.

Firstly, several options available for customising widget contents. This is CSS variables. Values provided below are default and there is no need to set it.

dm-search {
  /* Widget text size */
  --dm-font-size: 16px
  /* Widget text color */
  --dm-color-text: #0c0c0c
  /* Background color for college item */
  --dm-color-bg: #ffffff
  /* Primary color for actions */
  --dm-color-primary: #3182CE
  /* Color for positive messages and actions */
  --dm-color-positive: #27ae61
  /* Color for negative messages and actions */
  --dm-color-negative: #C53030
}

Then, you can always apply styles to parent element, of course. So you can control widget background, border, position etc.

Dark theme example

<style>
  .widget-theme {
    background: #2b2b2b;
    padding: 1em 2em;
    max-width: 800px;
    margin: 3em auto;
    border: 10px solid #eee;
  }
  dm-search {
    --dm-color-text: #afb1b3;
    --dm-color-bg: #3c3f41;
  }
</style>

<div class="widget-theme">
  <dm-search></dm-search>
</div>

Basically you don't need to set fixed height for a widget, like for old-style plugins which runs from <iframe> element. We don't use it, and therefore you won't see annoying empty spaces after plugin content or sudden scroll. Our component is encapsulated in your page and displayed as a regular element, like any <div>.

We highly recommend controlling the widget height by setting size and/or max options.

But if you like to get that old-style behavior, you can emulate it :

Widget with scrolling

<style>
  .widget-theme {
    height: 300px;
    overflow: auto;
  }
</style>

<div class="widget-theme">
  <dm-search></dm-search>
</div>