Introduction . . .

1. Basic image link widget

  • Use this widget to provide your website users with a simple clickable image link that will direct them to the Halton Community Services Directory where they can search for community, social, government or health services

1. Copy the html code below and paste into your website where you would like the basic image link widget above to appear

<div id="hcsd_search_widget_basic" style="background-color: #f6f6f6; color: #373737; border: none; box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -webkit-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -moz-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); border-radius: 4px; margin-top: 18px; margin-bottom: 18px; max-width: 400px; padding: 12px;"> <a href="http://www.hipinfo.ca" style="text-decoration: none; color: #1E594D;">
<div><img style="display: block; max-width: 100%; height: auto;" src="https://s3.amazonaws.com/cioc.halton/HCSD_widget.png" alt="Halton Community Services Directory"/> </div>
<p style="font-family: Helvetica,Arial,sans-serif; font-weight: bold; font-size: 15px; text-align: center; margin-bottom: 0;">Click to search for community, social, government or health services</p>
</a></div>

 

2. Keyword search widget

Halton Community Services Directory
  • Use this widget to provide your website users with the ability to search for listings in the Halton Community Services Directory directly from your website
  • Google style keyword search provides the easiest search option for users
  • User is directed to search results in the Halton Community Services Directory upon clicking Search button
  • This widget will result in the largest number of listings being returned in a search based on the keyword(s) entered by user as there is no search refinement
  • Tip: Providing instructions to your end users to enclose their search phrases (as opposed to a single search word) in quotation marks will result in more relevant/fewer search results (i.e. “Food Bank” rather than Food Bank, “Employment Programs” rather than Employment Programs)

2. Copy the html code below and paste into your website where you would like the keyword search widget above to appear

<div id="hcsd_search_widget" style="background-color: #f6f6f6; color: #373737; border: none; box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -webkit-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -moz-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); border-radius: 4px; margin-top: 18px; margin-bottom: 18px; max-width: 400px; padding: 12px;">
<form id="SearchForm" role="form" action="http://www.hipinfo.ca/results.asp" method="get" name="hcsd_search">
<div style="display: table;">
<div style="display: table-cell;">
<input id="hcsd_sterms" class="form-control" style="font-size: 14px; font-family: Helvetica,Arial,sans-serif; line-height: 1.35714; background-color: #ebf5f5; box-shadow: 0 3px 3px rgba(0,0,0,0.075) inset; margin-bottom: 15px; display: block; width: 100%; height: 32px; padding: 6px 12px; color: #555; border: 1px solid #00B19F; border-radius: 4px; margin: 0; box-sizing: border-box;" maxlength="255" name="STerms" size="50" type="text" placeholder="Find a service: library, food bank, child care, ..." />
</div>
<div style="display: table-cell; padding-left: 12px;">
<button style="font-size: 14px; font-family: Helvetica,Arial,sans-serif; line-height: 1.35714; display: inline-block; text-align: center; user-select: none; vertical-align: middle; overflow: visible; background-color: #fff; background-image: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%); border: 1px solid #d9d9d9; color: #222; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 1px rgba(0,0,0,0.075); padding: 6px 12px; margin: 0;" type="submit">Search</button>
</div>
</div>
</form>
<div style="padding-top: 10px;"><a href="http://www.hipinfo.ca"><img style="display: block; max-width: 100%; height: auto;" src="https://s3.amazonaws.com/cioc.halton/HCSD_widget.png" alt="Halton Community Services Directory" /></a></div>
</div>

 

3. Keyword search widget including Halton communities

Halton Community Services Directory
  • Keyword search with the ability to refine returned results based on whether they provide service to a specific community within Halton Region
  • Leaving community blank will return all possible search results
  • User is directed to results page in the Halton Community Services Directory once Search button is clicked
  • Specific communities included/excluded and their order in dropdown are customizable (contact us for assistance)

3. Copy the html code below and paste into your website where you would like the search widget above including Halton communities to appear

<div id="hcsd_search_widget_community" style="background-color: #f6f6f6; color: #373737; border: none; box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -webkit-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -moz-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); border-radius: 4px; margin-top: 18px; margin-bottom: 18px; max-width: 400px; padding: 12px;">
<form id="SearchForm" role="form" action="http://www.hipinfo.ca/results.asp" method="get" name="hcsd_search">
<div style="margin-bottom: 10px;">
<input id="hcsd_sterms" class="form-control" style="font-size: 14px; font-family: Helvetica,Arial,sans-serif; line-height: 1.35714; background-color: #ebf5f5; box-shadow: 0 3px 3px rgba(0,0,0,0.075) inset; display: block; width: 100%; height: 32px; padding: 6px 12px; color: #555; border: 1px solid #00B19F; border-radius: 4px; margin: 0; box-sizing: border-box; font-style: italic;" maxlength="255" name="STerms" size="50" type="text" placeholder="I'm looking for...(library, food bank, child care, etc.)" />
</div>
<div style="display: table;">
<div style="display:table-cell; width: 100%;">
<select name="CMID" id="CMID" class="form-control" style="font-size: 14px; font-family: Helvetica,Arial,sans-serif; line-height: 1.35714; background-color: #ebf5f5; box-shadow: 0 3px 3px rgba(0,0,0,0.075) inset; margin-bottom: 15px; display: block; width: 100%; height: 32px; padding: 6px 12px; color: #555; border: 1px solid #00B19F; border-radius: 4px; margin: 0; box-sizing: border-box;">
  <option>Select a Community</option>
  <option value="58">Acton</option>
  <option value="59">Burlington</option>
  <option value="60">Georgetown</option>
  <option value="1314">Halton Hills</option>
  <option value="62">Milton</option>
  <option value="63">Oakville</option>
  <option value="1367">Halton North</option>
  <option value="1368">Halton South</option>
  <option value="57">Halton Region</option>
</select>
</div>
<div style="display: table-cell; padding-left: 12px;">
<button style="font-size: 14px; font-family: Helvetica,Arial,sans-serif; line-height: 1.35714; display: inline-block; text-align: center; user-select: none; vertical-align: middle; overflow: visible; background-color: #fff; background-image: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%); border: 1px solid #d9d9d9; color: #222; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 1px rgba(0,0,0,0.075); padding: 6px 12px; margin: 0;" type="submit">Search</button>
</div>
</div>
</form>
<div style="padding-top: 10px;"><a href="http://www.hipinfo.ca"><img style="display: block; max-width: 100%; height: auto;" src="https://s3.amazonaws.com/cioc.halton/HCSD_widget.png" alt="Halton Community Services Directory" /></a></div>
</div>

 

4. Customizable link-list widget

Halton Community Services Directory
  • User selects search options from pre-populated drop down menu
  • Use this widget “as is” which provides options to search the Halton Community Services Directory, The Halton Youth Directory or the Halton Seniors’ Directory, or
  • Contact us and we’ll work with you to customize the options appearing in the dropdown menu to include links to specific individual resources or lists of resources in the Halton Community Services Directory that are relevant to your organization/website and target audience

4. Copy the html code below and paste into your website where you would like the link-list widget above to appear

<script language="javascript">
function hcsd_gotolink() {
window.location = document.getElementById('hcsd_link_dd').value;
}
</script>
<div id="hcsd_search_widget_community" style="background-color: #f6f6f6; color: #373737; border: none; box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -webkit-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); -moz-box-shadow: 2px 2px 4px 1px rgba(102,102,102,0.3); border-radius: 4px; margin-top: 18px; margin-bottom: 18px; max-width: 400px; padding: 12px;">
<div style="display: table;">
<div style="display: table-cell; width: 400px;">
<select id="hcsd_link_dd" class="form-control" style="font-size: 14px; font-family: Helvetica,Arial,sans-serif; line-height: 1.35714; background-color: #ebf5f5; box-shadow: 0 3px 3px rgba(0,0,0,0.075) inset; margin-bottom: 15px; display: block; width: 100%; height: 32px; padding: 6px 12px; color: #555; border: 1px solid #00B19F; border-radius: 4px; margin: 0; box-sizing: border-box;">
<option value="http://www.hipinfo.ca">Search the Directory</option>
<option value="http://youth.hipinfo.ca">Youth Directory</option>
<option value="http://seniors.hipinfo.ca">Seniors' Directory</option>
</select>
</div>
<div style="display: table-cell; padding-left: 12px;">
<button style="font-size: 14px; font-family: Helvetica,Arial,sans-serif; line-height: 1.35714; display: inline-block; text-align: center; user-select: none; vertical-align: middle; overflow: visible; background-color: #fff; background-image: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%); border: 1px solid #d9d9d9; color: #222; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 1px 1px rgba(0,0,0,0.075); padding: 6px 12px; margin: 0;" type="submit" onClick="hcsd_gotolink();">Go</button>
</div>
</div>
<div style="padding-top: 10px;"><a href="http://www.hipinfo.ca"><img style="display: block; max-width: 100%; height: auto;" src="https://s3.amazonaws.com/cioc.halton/HCSD_widget.png" alt="Halton Community Services Directory" /></a></div>
</div>