iseek.ai Embedded Search

Getting Started

There are just a few elements required to produce your iseek search page.

Styles

Include a link to the iseek style sheet in the <head> section.

These styles provide a default appearance for the search form elements.


								

Search Form

Add the search <form> to your page layout.

Users will initiate their search via the text input and button.

The following form must be placed on the page hosting search results.


								

You may then use the following form throughout your site to launch a search.


								

Search Results

Place a <div> in which the results of a search will be rendered.

An iFrame will be written within this element, containing results and navigation controls.


								

Javascript

Finally, the following javascript should be placed at the end of the <body> .

This code bootstraps the embedded search and accepts a configuration object.

apiBase sets the URL for communication with the iseek servers. Be sure to change the scheme for SSL use (https).

key is required for access to the search, and is provided after purchase.

Sample iseek configuration:

								

Basic Template

Copy the HTML below for a simple working example of iseek search.


								

Examples

Basic Template

Live version of the minimal template above.

Full Example

Fixed height header with flowing search results.

Launch Example

Use a small text input to launch a search from anywhere on your site.

Canvas Integration - Getting Started

iseek search is added as an External App to your Canvas account:

  1. Signed in as a Canvas Account Administrator, navigate to the Account or Sub-Account in which you would like to add iseek search. Click the Settings link in the navigation menu.
  2. Click the Apps tab.
  3. Click the Add New App button.
  4. In the dialog, enter the following values and click Submit:
    • Name: iseek
    • Consumer Key: example_key
    • Shared Secret: example_secret
    • Configuration Type: By Url
    • Configuration URL:  //api.iseek.com/config/lti.xml

Iseek will now show in your list of external applications. After refreshing the page, a new link iseek search will appear in the course, account, and user navigation menus.

Optional - Add Search Box to Canvas Header

Follow these instructions to replace the iseek search menu link with a search box in the breadcrumb area of Canvas.

  1. Click on Settings link in the Canvas Account navigation menu.
  2. Click the Apps tab, find iseek in the list of external apps, and click the pencil/edit icon.
  3. Add the value iseek_layout=header to Custom Fields and click Submit.
  4. Click on Settings tab to return to general Account settings.
  5. Enable Custom JavaScript and CSS Overrides by checking the box. If this checkbox is not visible, then it must be enabled at a higher level Canvas Account.
  6. Enable Theme Editor as well, in the next checkbox.
  7. Iseek uses JavaScript to write the Search Box to the page, so we must point Canvas to the code. This is done through the Canvas Theme Editor.
    • Open the Theme Editor for the Sub-Account level that you wish to make the Search Box active.
    • Click on the Upload tab, there should be an option to select a JavaScript file (if not, the account settings are incorrect for JavaScript).
    • If there is currently no file used, save the following file locally, and then upload via the Select button: canvas_ui.js
    • Otherwise, add the following snippet of JavaScript to your existing file:
      
      														
  8. Finally, click Preview and then Apply.

The iseek search box will now appear in the Canvas breadcrumb navigation area when the course is active.

Advanced - Search Box Mode 1 (Dashboard)

In Mode 1, the Search Box is visible with the left-side navigation, as in the default Mode 0. Mode 1 adds display of the Search Box to the Dashboard after login.

  1. Change the "display_mode=0" parameter to "display_mode=1" to enable this feature.

The iseek search box will now appear on the Dashboard after login. Because Canvas requires a Course or Account context to launch an External Tool like iseek, we must choose a Course for the user. Mode 1 selects the first Course (or Account) available in the list of enrolled Courses for the user.

Advanced - Search Box Mode 2 (All Pages)

In Mode 2, the Search Box is visible on all pages when a Course/Account context may be determined automatically.

  1. Change the "display_mode=0" parameter to "display_mode=2" to enable this feature.

The iseek search box will now appear on the Dashboard, Calendar, and other pages. Because Canvas requires a Course or Account context to launch an External Tool like iseek, we must choose a Course for the user. Mode 2 selects the first Course (or Account) available in the list of enrolled Courses for the user.

Advanced - Search Box Mode 3 (Roles)

In Mode 3, the Search Box is visible on all pages, as with Mode 2. However, instead of automatically choosing a Course context, the Course target is determined by the Role of the current user. This allows specific Course targets to be chosen per Role - for example, a "Student Lounge" Course might be the landing site for Student roles.

  1. Change the "display_mode=0" parameter to "display_mode=3" to enable this feature.
  2. Iseek automatically determines the user Role, but you must configure the Course or Account target for each user Role for which you wish to display the Search Box.
  3. For each Role you offer search, a &role_[role_label]=/courses/[course_id]/external_tools/[external_tool_id] parameter is added. Where [role_label] (e.g. role_student) is the Role of the current user, [course_id] is the numeric id of the Course, and [external_tool_id] is the numeric id of the iseek External Tool within the Course. Please note that [role_label] is the lower case form of the Role, with no "Enrollment" text included (e.g. ). "TeacherEnrollment" -> "role_teacher").
  4. To determine the [course_id] and [external_tool_id] values, visit the Course to initiate a search with iseek. Record the URL of the browser during a search within the course. For example: https://iseek.instructure.com/courses/32/external_tools/24?q=test
  5. Construct the parameter for the student Role using these values: role_student=/courses/32/external_tools/24
  6. Repeat for each User Role. You may optionally supply a "role_default" target context for Users that do not match your configured roles. If "role_default" is not supplied, the Search Box will not appear on the Dashboard for Users without matching Roles.
  7. Append your parameters to the original request: display_mode=3&role_admin=/accounts/23/external_tools/24&role_student=/courses/32/external_tools/24&role_teacher=/courses/33/external_tools/24&role_default=/accounts/23/external_tools/24

The iseek search box will now appear after login. Iseek will determine the most frequent Course enrollment Role of the user, and direct the user to the matching Course/Account context from your parameters. If the User is not enrolled in the target Course for their role, the Search Box will not be displayed on the Dashboard. The Search Box will always display within the Courses in which the User is enrolled (as is the basic behavior).

Brightspace Integration - Getting Started

An iseek Widget can be added as a external widget to your Brightspace account's course homepages.

  1. Signed in as a Brightpsace Administrator Account, navigate to Admin Tools by clicking the cog icon in the top right. A list of options will appear. Click the Remote Plugins link under Organization Related.
  2. Click the New Plugin button.
  3. Use the following configuration to add a widget to your course homepage content.
    • iseek Search Box
      • Plugin Type:Widget
      • Height:100
      • Name:iseek Search Box
      • Launch URL://api.iseek.com/lti/widget/small
      • Consumer Key: example_key
      • Shared Secret: example_secret
      • Make Available to:[Add your course homepages here]

Add Widget to Brightspace Course Homepage

Follow these instructions to add the iseek Search Widget to the relevant course homepage

  1. Navigate to your course homepage by clicking the course gallery icon (6 boxes in a square) in the navbar.
  2. Once you are on the course page you wish to place the iseek Search Widget on, click the floating button with an ellipsis icon located at the bottom right of the page. An option menu will appear, click the option to Edit the homepage.
  3. Scroll to the bottom of the page. You have the option to choose a different content layout.
  4. Click the Add Widget button on one of the columns, where you want the widget to be place on the page. A dialog will appear, type "iseek" in the search bar to find the iseek Widget. Click the checkbox on the iseek Widget and then click the Add button at the bottom.
  5. Once you have added the remote plugin widget you want, click the Save and Close button at the bottom of the page.

Advanced - Create a Custom Widget for a Brightspace Course Homepage

Follow these instructions to allow your remote plugin to be inserted as a Quicklink

  1. Signed in as a Brightspace Administrator account, navigate to the Admin Tools dropdown by selecting the cog icon in the top right. Under the Organization Related header, select the External Learning Tools link.
  2. Scroll down and find the remote widget you created in the “Getting Started” tutorial, named iseek search box. Click the dropdown arrow next to iseek search box and select Edit Link.
  3. Under the Visibility header, click the checkbox so that it is checked to Allow users to view this link.
  4. Select Save and Close and you will be redirected back to the External Learning Tools page with the message Saved Successfully.

Follow these instructions to create a iseek Custom Widget

  1. Signed in as a Brightspace Administrator Account, navigate to the Course Homepage. Click Edit Course in the Course navigation bar.
  2. Click the Widgets option, under the Site Setup Header. Click Create Widget, fill in the Name Input field, “iseek Search Box”.
  3. Now click the Content tab, and a HTML editor will appear. Click the Insert Quicklink icon in the editor and scroll to and select the option named External Learning Tools. You should see the quicklink of the remote plugin you created and shared in the Allowing your Quicklink to be seen in External Learning Tools tutorial above
  4. You will see a link appear in the HTML editor. Click the Source Editor icon at the bottom of the HTML editor. Copy the html element text below and paste in the source editor under the text that is there.
    <iframe src="/d2l/common/dialogs/Quicklink/quicklink.d2l?ou={orgunitid}&amp;type=lti&rCode={Insert rCode}&srcou={Insert srcou}" width="100%" frameborder="0" height="100"> </iframe>
  5. In the link element text that was in the source editor when you opened it, you will see rCode, copy the text from rCode until the "\&".
    • For example, the rCode text will look like 971FF31D-2BEB-4A8B-9515-AC00142F16A2-4084
  6. Paste the copied text into the <iframe> element you inserted by replacing the text {Insert rCode}
  7. Repeat step 6 for the value srcou and then remove the code text for the link.
    • For example, the srcou text will look like 1752.
  8. You will see the iseek search box appear in the Widget Content editor. Now select Save and Close. Refer to the instructions in Adding a widget to a course page in order to add your new custom widget.

Blackboard Integration - Getting Started

An iseek tool link may be added to your course pages.

  1. Signed in as a Blackboard Administrator Account, navigate to the Administrator Panel by clicking the "System Admin" tab in the top right.
  2. Select the LTI Tool Providers link within the Integrations panel.
  3. Click the Register Provider Domain button.
  4. Use the following settings to configure the Provider for iseek.
    • Provider Domain: api.iseek.com
    • Default Configuration: "Set globally" (as in this example) or "Set separately for each link"
    • Tool Provider Key: example_key
    • Tool Provider Secret: example_secret
    • Send User Data: "Send user data only over SSL"
    • Submit
  5. Add a Placement to the Provider by selecting "Manage Placements" on the pop-up menu.
  6. Use the following settings to configure the Placement for iseek.
    • Label: iseek.ai
    • Handle: iseek_ai_course_tool
    • Icon:
    • Tool Provider URL: //api.iseek.com/lti/launch
    • Submit

Add Tool Link to Course Menu

Follow these instructions to add the iseek.ai search tool link to the relevant course homepage. You should be signed-in as an Instructor, or a user enrolled in the course in order to view the tool.

  1. Navigate to your course homepage by selecting the "Courses" tab.
  2. Once you are on the course page in which to place the iseek.ai tool link, click the "plus" icon located at the top left of the menu area.
  3. Click Submit and the link will now appear in the course menu.
  4. When a user clicks on the iseek.ai search link, a query box and search results will be presented within the course content area.
  5. Please let us know if you wish to have colors or logos modified in the iseek.ai search page.

Moodle Integration - Getting Started

An iseek activity may be added to your course pages.

  1. Signed in as a Moodle Administrator Account, navigate to the Site Administration page and Plugins tab.
  2. Click Manage Tools.
  3. Under Add tool, enter the iseek Moodle configuration URL: //api.iseek.com/config/lti.moodle.xml
  4. Use the following settings to configure the tool.
    • Consumer Key: example_key
    • Shared Secret: example_secret
    • Save changes
  5. The "iSEEK Search" external tool is now available to be added as an activity to your course.
  6. Within your course, change to "edit mode" and click to "Add an activity".
  7. Select "External Tool" in the list of Activities, click "Add". Apply the following settings to the new Activity.
    • Activity Name: iseek.ai
    • Preconfigured tool: iSEEK Search
    • Launch container: New window
    • Submit
  8. Click on the Activity to begin an iseek search. You may also move the Activity or use it Menus or Blocks.

Advanced - HTML Block

Follow these instructions to add the iseek.ai search input to an HTML Block. This is more convenient for users, but less secure, as it is a JavaScript implementation.

  1. Navigate to your course page and enter "Edit Mode".
  2. Click Add a block.
  3. Select HTML.
  4. Click the Advanced down arrow, and then the HTML button in the editor.
  5. Copy and Paste the following HTML into the editor.
  6. 
    												
  7. There is a data-key attribute in the Button element that must be replaced with a value provided by your Account representative. Feel free to use the existing value as an example.
  8. Click Save Changes.
  9. You should now see a new Block showing the iseek search.
  10. Enter a search term, press enter, or click the button.