FAQs for Atomic Search
      Back to home
      1. Atomic Jolt Knowledge Base
      2. Atomic Search
      3. FAQs for Atomic Search

      How can I add the Atomic Search widget to my Canvas theme?

      Understand how to add the Atomic Search widget to your Canvas theme for Search access from any page.

      Having the widget installed means that you can access Atomic Search from any page and if you follow a search result and then click your browser’s back button, it will return you to the search you previously executed.

      The search box will show up on pages where a Search menu is displayed:

      • Your Dashboard
      • Your All Courses page
      • All pages inside a course
      • All Account pages (accessible to Admins)

      To add this search box, please follow the instructions below. If you would like assistance installing this to your Canvas theme, please file a support ticket to schedule an installation meeting.

      If you have installed Atomic Search without the global navigation menu, you must hard code the external tool ID for the search box widget to work properly. Please see the section Hard code the external tool ID.

      Table of Contents

      Install the Javascript Widget

      Hard Code the External Tool ID

      Troubleshooting Problems

      Install the Javascript Widget.

      1. Download or copy this script to a file on your hard drive. WARNING: If you already have a global javascript file you should combine your old script file with the Atomic Search script before you upload it.
      2. Upload to your Canvas theme.
        1. Log in as a Canvas account Admin
        2. Go to the account where you installed Atomic Search (the root account or a sub-account)
        3. Click on Themes
        4. Click on the Current theme to open the theme editor
        5. Click on the Upload tab at the top left of the screen
        6. Under Javascript file:
          1. If there is a file listed: View it and copy it into the top of the Atomic Search script you downloaded and save it as a .js file
          2. Click Select and find the Atomic Search script
        7. Click Preview Changes and confirm the widget appears in the upper right of the preview
        8. Click Save theme
          1. If this is the first time you have changed the theme, you may need to specify a new name for the theme.
        9. Click Apply theme
      3. Verify that you didn't break anything.
        1.  Log in to Canvas in a different browser or a private/incognito browser window
        2. Make sure everything looks okay
        3. Navigate to a course page and make sure the widget appears
        4. If something isn't looking as expected navigate back to the themes page in your original browser and remove the global javascript or apply a different theme

      Back to top

      Hard Code the External Tool ID

      If Atomic Search is installed without the global navigation LTI placement, the search box won’t display Your Dashboard or Your All Courses page.

      If you want to display the search box on every page even when the search menu is not displayed, you can modify the global javascript to specify the ID of the LTI tool as follows:

      //hard code the tool ID
      var atomicSearchConfig = {
        accountId: 1, // The ID of your root account (usually 1)
        externalToolId: 9018, // The ID of your installation of Atomic Search
      };

      //Atomic Search widget script
      var atomicSearchWidgetScript = document.createElement("script");
      atomicSearchWidgetScript.src="https://js.atomicsearchwidget.com/atomic_search_widget.js";
      document.getElementsByTagName("head")[0].appendChild(atomicSearchWidgetScript);
      JavaScript
      The atomicSearchConfig var must be defined BEFORE the main Atomic Search script

      To find the accountId and external tool ID to use in the script, you can navigate to the root account and click on the search menu. The IDs will be in the URL. For example:

      https://atomicjolt.instructure.com/accounts/1/external_tools/9018

      Back to top

      Troubleshooting Problems

      Common problems are:

      • Putting the Atomic Search global javascript in the middle of other global javascript.
      • Existing global javascript has errors in it that prevent the Atomic Search global javascript from running. You can inspect the browser javascript console to look for these errors.

      If you have modified your Canvas CSS or added Global Javascript that adds UI elements in the same place where the Atomic Search box goes, you will need to modify those.