How do I add a Summon search box, search widget, or carousel to a Web page?

The Builder Widget page enables you to create search boxes and widgets that can be placed on any web page, such as research guides, course-management pages, collaborative research portals, and more. Search boxes and widgets can search your entire Summon service or a specific scope and include pre-selected filters and facet options of your choice. The widget code can be used in both HTTP and HTTPS (secured) environments. For additional information, see Search Boxes on the Ex Libris Developer Network.

1. Open the Widget Builder page by either selecting the Widget Builder link within the menu on the top right of the screen or entering the following URL in your browser, where <MyDomain> is your library's domain name:

   http://MyDomain.summon.serialssolutions.com/widgets

   If you are creating a search box or widget for an HTTPS (secured) environment, change the URL from http to https.

   

   Widget Builder - Start Page

2. Select the Select Widget Type tab on the top or left side of the Widget Builder page.

3. Select the type of widget that you want to create. The right side of the page provides a live Preview of the box or widget that you select.

   • Box – A search box is a small search field that you can place anywhere on a web page. The default search box looks like this:

     

     Default Box Widget Preview

   • Search – The search widget is a larger box that provides patrons with a preview of a few Summon results before they committing to viewing the full results set:

     

     Default Search Widget Preview

   • Carousel – The carousel widget is a visual carousel of records tailored to the library’s specifications, helping libraries promote their content in other websites. A carousel utilizes Summon's search with pre-filters, conditions, and facets to dynamically display results. For example, it can show new books about a specific subject that were added to the catalog in the last 7 days, using a subject filter and date facet. As new records are added that match your search query's parameters, they automatically appear on your website. The default carousel widget looks similar to this in the Preview pane:

     

     Default Carousel Widget Preview

4. Select the Search tab on the top or left side of the page.

5. For Box and Search types only, select the Go back to search link to open the Summon UI in the Widget Builder page. For the Carousel type, the Summon UI opens automatically in the Widget Builder page.

6. In the Refine Your Search section in the Summon UI, select any facets that you want to apply to the widget.

7. Select the Customize the widget tab on the top of the page to open the Customize the Widget pane on the Widget Builder page.

   

   Customize the Widget Pane (Search Widget Type)

8. Per widget type, customize the following fields as needed:

   • Box:

     Parameters for Box Widgets

     Parameter	Description
     Show	Select the following options as needed. Tag Line – This text appears above the search box and should help your patron identify the parameters of the scoped search. The default text is Easily discover the world of library content. To hide the tag line, de-select the checkbox. Advanced Line – This text field links users to your library's Advanced Search page. The default text is More Search Options. To hide the line, de-select the checkbox. Suggestions – With the checkbox selected, the Autocomplete feature is enabled and provides search suggestions and spelling corrections as the search is being entered. Results in Popup – Uncheck this box if you prefer Summon to open in the user's existing browser window. Default behavior is to open in a new browser window.
     Tag Line Color	By default the Tag Line appears in the user's default browser color for text. To change the color, either enter the hexadecimal color code or click in the box and use the color picker.
     Links Color	By default the More search options link will display in the user's default browser color for links. To change the color, either enter the hexadecimal color code or click in the box and use the color picker.
     Box width	Box width: The default width is 125 pixels. To change the size, enter the number of pixels. For example, enter 200 for a width of 200 pixels.
     Tag Line Text	This text appears above the search box and should help your patron identify the parameters of the scoped search. The default text is Easily discover the world of library content. This field can be turned off by deselecting the Show Tag Line checkbox.
     Search Button Text	This is the text that appears in the button to the right of the search box. The default text is Search. Enter the word you would like to appear on the button, such as Find or Go. This is a required field.
     Advanced Link Text	This text links users to your library's Advanced Search page. The default text is More Search Options. This field can be turned off by deselecting the Show Advanced Line checkbox.
     Placeholder Text	This text displays inside the search box. By default this field is blank.

   • Search:

     Parameters for Search Widgets

     Parameter	Description
     Title Text	This text appears above the search widget and should help your patron identify the parameters of the scoped search. The default text is Summon Widget. This is a required field.
     Search Button Text	This is the text that appears in the button to the right of the search widget. The default text is Search. This is a required field.
     Title Color	By default, the color of the Title Text is the user's default browser color for text. To change the color, either enter the hexadecimal color code or click in the box and use the color picker.
     Links Color	By default, the color of links in search results is the user's default browser color for links. To change the color, either enter the hexadecimal color code or click in the box and use the color picker.
     Header Color	This is the color behind your library logo. This is a required field.
     Results Color	This is the color behind the search results. If the field is empty, the user's default browser color will be used.
     Box Width	The following options are valid: Fixed (250 pixels), which is the same size as the widget in the Preview pane Fluid, which changes the width depending on the space available on the web page where you display the widget.

   • Carousel:

     Parameters for Carousel Widgets

     Parameter	Description
     Title Text	Defines the text that appears above the carousel and should help your patron identify the parameters of this search. The default text is Search Results. This is a required field.
     Title Link	Defines the search URL used when users select the title.
     Default Thumbnail URL	Defines the default URL for thumbnails that do not have an associated thumbnail.
     Search Carousel Width	Defines the width of the carousel widget. The default value is 700px.
     Title Color	Defines the color of the title text, which is set to inherit, which inherits the color from the page on which the widget is placed.
     Title Font Weight	Defines the font weight of the title text. The default value is 700.
     Title Font Size	Defines the font size of the title text. The default value is 13px.
     Description Font Color	Defines the font color of the carousel items' description. The default value is inherit, which inherits the color from the page on which the widget is placed.
     Description Font Weight	Defines the font weight of the carousel items' description. The default value is 400.
     Description Font Size	Defines the font size of the carousel items' description. The default value is 12px.
     Image Height	Defines the image height of the carousel items' thumbnails. The default value is 210px.
     Bullet Spacing	Defines the spacing of the bullets that appear at the bottom of the carousel. The default value is 8px.

9. Select the Copy the code tab on the top or left side of the page to open the Copy the Code pane on the Widget Builder page.

   

   Copy the Code Pane (Search Widget Type

   This pane contains the HTML code that you will use on any web page to display your search box or widget:

   • Copy the code from the window.

   • Place the code into any web page.

   • Save the web page and test it.

   If your web page is in a secured HTTPS environment: Note that if you have a JavaScript file in the Summon 2.0 External Script section of the Settings page in the Summon Administration Console and the JavaScript file applies to Summon interface customizations, the file will also need to be served up over HTTPS. Assuming that the domain (from which the script is served up) supports HTTPS along with HTTP, it is likely that you can remove the protocol from the JavaScript file name listed in the Summon admin console, and that will meet the need for a secured connection over HTTPS. In other words, instead of entering the JavaScript file into the Summon administration console as http://<javascript file name>, enter it as //<javascript file name>.

   Your patrons can start using the new scoped search box immediately.

   After the search box or search widget is up on your web page, any further customization needs to be done by using the widget builder to create a new search box with the added customizations. At this time there is not a way to edit a search box that you have already made with the Builder.