Add a ScreenSteps Live search box to your Zendesk Home page

This lesson will show you how to add a ScreenSteps Live search widget (1) to the home page of your Zendesk site. When a user submits the form they will be taken to your ScreenSteps Live site. In this example we set up our ScreenSteps Live site with a Zendesk template and have added a Documentation tab to our Zendesk site (2).

Requirements:

This tutorial assumes that you are displaying the Forums (3) search box on your home page.

Login to your Zendesk account and select Settings > Extensions.

1. Enter a title.
2. Make it available to everyone.
3. Enter javascript (available below)
4. Create the widget.

IMPORTANT - replace "http://help.bluemangolearning.com/searches" with the URL to your ScreenSteps Live space + "/searches".

================

var home_search = jQuery("#suggestion_submit");
if (home_search) {
    var search_url = "http://help.bluemangolearning.com/searches";



    jQuery("#search_box").text("Search");
  home_search.val("Search Forums");


  html_string = '<input type="submit" name="commit" value="Search Docs" class="button search primary" id="screensteps-search-submit"/>';
  home_search.before(html_string);
    home_search.removeClass('primary');
    jQuery("#screensteps-search-submit").css("margin-left", "0px").before("<br /><br />");
  jQuery("#screensteps-search-submit").click(function(e){
    search_string = jQuery("#suggestions_query").val();
    query_string = jQuery("#suggestions_query").val().replace(/\s/g,"+");
    window.location = search_url + "?text=" + query_string;
    return false;
  });
};

================

That is it. You should now have a documentation search widget on your front page. Let us know if you run into any issues.