Adding a ScreenSteps Live Search widget to your site

There are two javascript files that you will need to reference from your site:

1. jQuery
2. The ScreenSteps Live Javascript file

Include this code in your page somewhere:

<script src="http://screenstepslive.com/javascripts/push/screenstepslive.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

NOTE: If your site is already using jQuery then you do not need to include it again.

You will want to enter some basic settings to get your widget up and running.

    <script type="text/javascript" charset="utf-8">
     ScreenStepsLiveSearchOptions = {
domain: "youraccount.screenstepslive.com",
space: "my_space",
update_element: "search_results",
username: "your_login",
password: "your_password",
use_ssl: true
}
    </script>

1. domain - Your ScreenSteps Live domain name.
2. space - The id or permalink of your space.
3. update_element - This is the id of the div where search results will be inserted into your web page (you'll see where to use this later in this lesson).
4. username, password - We strongly recommend that you don't use an administrator user name and password here. Set up an api access user to use in your search widget.
5. use_ssl - Only set "use_ssl" to true if your ScreenSteps Live account allows SSL access.

Now you need to create a form with a field where you can insert your search text. You can do this however your would like but the html below should work fine for you:

<form id="screenstepslive-search" action="">
<p><input type="text" id="screenstepslive-search-field" value="" name="text"></input></p>
<p><input type="submit" value="Search"></p>
</form>

Now add a section where your search results will be displayed. The id of the div needs to match the id you entered for the update_element above.

<h3>Search Results</h3>
<div id="search_results"></div>

Now we are going to use jQuery to attach the search functionality to the form.
    
    jQuery.noConflict();

jQuery(document).ready(function($) {
jQuery('#screenstepslive-search').submit(function(e){
e.preventDefault();
search_string = jQuery('#screenstepslive-search input#screenstepslive-search-field').val();
SearchScreenStepsLiveSpace(search_string);
})
});

In case you are interested we this is what we are doing:

1. Putting jQuery into no conflict mode so it won't bother any other javascript libraries you might be using on your page.
2. Waiting for the page to load and binding a function to the search form that will get triggered when the form is submitted.
3. Preventing the default action of the form and getting the search string that the user entered.
4. Calling the SearchScreenStepsLiveSpace function with the search string from the pervious step.

Here is an "unstyled" example of what the widget and search results will look like. You can style this to look however you would like.