Hosting Page

Ad Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur neque orci, ullamcorper vitae neque at, dictum condimentum purus. Aenean accumsan convallis lectus, ac egestas nunc tempus eu. Morbi ut tristique enim. In luctus nibh nec urna posuere, a tempus felis rhoncus. Sed eget hendrerit urna, sed pretium arcu. Vestibulum blandit neque vel tincidunt vehicula. Nulla sed eros non tellus pulvinar tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur neque orci, ullamcorper vitae neque at, dictum condimentum purus. Aenean accumsan convallis lectus, ac egestas nunc tempus eu. Morbi ut tristique enim. In luctus nibh nec urna posuere, a tempus felis rhoncus. Sed eget hendrerit urna, sed pretium arcu. Vestibulum blandit neque vel tincidunt vehicula. Nulla sed eros non tellus pulvinar tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur neque orci, ullamcorper vitae neque at, dictum condimentum purus. Aenean accumsan convallis lectus, ac egestas nunc tempus eu. Morbi ut tristique enim. In luctus nibh nec urna posuere, a tempus felis rhoncus. Sed eget hendrerit urna, sed pretium arcu. Vestibulum blandit neque vel tincidunt vehicula. Nulla sed eros non tellus pulvinar tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur neque orci, ullamcorper vitae neque at, dictum condimentum purus. Aenean accumsan convallis lectus, ac egestas nunc tempus eu. Morbi ut tristique enim. In luctus nibh nec urna posuere, a tempus felis rhoncus. Sed eget hendrerit urna, sed pretium arcu. Vestibulum blandit neque vel tincidunt vehicula. Nulla sed eros non tellus pulvinar tristique.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur neque orci, ullamcorper vitae neque at, dictum condimentum purus. Aenean accumsan convallis lectus, ac egestas nunc tempus eu. Morbi ut tristique enim. In luctus nibh nec urna posuere, a tempus felis rhoncus. Sed eget hendrerit urna, sed pretium arcu. Vestibulum blandit neque vel tincidunt vehicula. Nulla sed eros non tellus pulvinar tristique.

Using the Widget

Place a container for the widget on your page in a spot that works for you. You must set the height and width of the container. Make sure to use your referrer id below in place of YOUR_REFID_HERE. For example, you could use "usatodaycollege".

<div id="cfTool" class="collegefactualwidget" style="width: 300px; height: 445px; float: left; margin-right: 16px; display: none;" data-widgetId="cfToolFrame" data-widgetSlug="fos-business-management-marketing-sales-bachelors" data-widgetRefId="YOUR_REFID_HERE"></div>

With our assistance, you may override the initial widget context by using the data-widgetContext attribute. The following example shows how to set the initial context to California Colleges with the top pay.

<div id="cfTool" class="collegefactualwidget" style="width: 300px; height: 445px; float: left; margin-right: 16px; display: none;" data-widgetId="cfToolFrame" data-widgetSlug="fos-business-management-marketing-sales-bachelors" data-widgetRefId="YOUR_REFID_HERE" data-widgetContext='{"location":"CA","ranking":"2","selectivity":"0"}'></div>

With the widget container placed on your page, you can add the following javascript to the end of your body.

<script type="text/javascript" src="https://www.collegefactual.com/widgets/host.js"></script>

If you would like to tap into the click events in the widget to do something on your hosting page then you can define a function that will be called when the click message bubbles up from the iFrame. This demo page uses the following code to change the color of a block on this page simulating an ad-reload.

<script type="text/javascript" src="https://www.collegefactual.com/widgets/host.js"></script> <script type="text/javascript"> function onCollegeFactualWidgetClick(){ var newColor = '#' + (0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6) document.getElementById("adBlock").style.backgroundColor = newColor; } </script>