Skip to main content
  1. Watermark
  2. Course Evaluations & Surveys
  3. Integrations
  4. Instructure Canvas

Canvas User Integration Setup - Course Evaluations & Surveys

Updated

This article is specifically for the Watermark Course Evaluations & Surveys product.  If you are setting up a developer key for other Watermark product (for example, Student Learning & Licensure or Planning & Self-Study), please refer to the Help Center document for that specific product. 

 

The Course Evaluations & Surveys User integration with Instructure’s Canvas LMS has several features which allow you to customize the Course Evaluations & Surveys user experience within Canvas for students, teaching assistants, instructors and Administrators. The following provides setup steps and information on the User Integration functionality between Course Evaluations & Surveys and Canvas.

 

Create a Developer Key in Canvas:

  1. Log into your Canvas instance as a Canvas Administrator

  2. Navigate to Admin > (select root level Canvas account) > Developer Keys 

  3. Click the + Developer Key button and choose + LTI Key

  4. Key Name field = enter the name of your Developer Key (i.e. CE&S Canvas User integration)

  5. Method = select Paste JSON

  6. LTI 1.3 Configuration =

    1. In Course Evaluations & Surveys logged in as a CES Administrator: go to Account > Integrations (column) > Canvas > User Settings tab and expand the Installation section at the top if not already expanded.

    2. Select “Developer Key Install JSON” link (a secondary dialog will open); (NOTE: If you have an existing Canvas integration with CES then you will need to click the Remove mceclip2.png button before the “Developer Key Install JSON” link will appear.  But before you click the Remove button take a screenshot or otherwise note your current settings under the User Settings tab as these settings will be removed when following this process and will need to be enabled again.)

    3. Copy the entire JSON code, including beginning and ending brackets, then you may close the dialog

    4. Canvas: in the Key Settings screen, paste the JSON code copied from your instance of CES into the LTI 1.3 Configuration field.  NOTE: The Redirect URI is automatically filled once the JSON code has been correctly copied and pasted into the configuration field.

  7. Click Save

  8. (Returned to list of Developer Keys) Turn ON the Developer Key you created > click OK button in confirmation dialog

  9. Under the Details column a ClientID is provided for your new Developer Key. Highlight and copy the ClientID

  10. Course Evaluations & Surveys:

    1. ClientID = paste the ClientID you copied from step 9


For institutions that use their OWN custom CSS and JS files, follow the steps below to ADD the Course Evaluations & Surveys code to your existing CSS and Javascript files:

  1. In Course Evaluations & Surveys, navigate to Account > Integrations (section) > Canvas > User Settings tab.
  2. Under the Installation section, Step 1, copy the CSS code and paste it into your CSS file that is uploaded to your Canvas theme.
    1. Ensure that the Course Evaluations & Surveys CSS Code comes before all other content and comments in your CSS file.
  3. Next, under the Installation section, Step 2, copy the Javascript Code and paste it into your JS file.
    1. Ensure that the Course Evaluations & Surveys Javascript Code comes before all other content and comments in your Javascript file.

      CSS_and_JS_code.png
  4. Confirm that the changes have been completed and saved within your CSS and JS files.
  5. Within Canvas, go to Admin and select your Canvas account.
  6. On the left-hand side of the page select Themes.
  7. Select Open in Theme Editor for your current theme under Themes.

    Canvas_Theme.png
  8. Make sure that the correct version of your global files have been updated within the Theme Editor.

    NOTE: Once you make the update, preview Your Changes. If everything appears correct, select Save theme, Apply theme, and OK in the confirmation dialog.

  9. Within Course Evaluations & Surveys go back to Account > Integrations (section) > Canvas > User Settings tab. Under the Installation section, Step 3, click on Deploy so that Course Evaluations & Surveys can create and add the necessary External Tools within your Canvas instance – this is required for the Course Evaluations & Surveys User Integration.

    Step_3_Deploy_Button.png
  10. Within Canvas, go into Admin and choose your account again.
  11. To verify the LTI setup, in Canvas, click on Settings > Apps > View App Configurations, and you should now see the below External App. No further action is required here; this step is simply a verification:

    Canvas_External_App.png

    NOTE: If setting up the integration at a Canvas subaccount level the same External App will appear.

  12. Within Course Evaluations & Surveys go back to Account > Integrations (section) > Canvas > User Settings tab, you can now configure your desired settings for the Automated LTI Links & Customized Survey Notification for Students under the User Integration Setup section.


For institutions that DO NOT use their OWN custom CSS and JS files, follow the steps below:

  1. In Course Evaluations & Surveys, navigate to Account > Integrations (section) > Canvas > User Settings tab.
  2. Create a new text document in a text editor application, i.e. Notepad or TextEdit.
  3. Next, under the Installation section on the User Settings tab, Step 1, copy the CSS Code in full and paste it into your CSS (Notepad or TextEdit) file.

    Example_CSS.png
  4. Open another new text document in Notepad or TextEdit for instance, and this time under the Installation section on the User Settings tab, Step 2, paste the JS code into your (Notepad or TextEdit) file.

    Example_JS.png

    Complete the following to save the CSS and JavaScript files:
    1. In Notepad click on Save As and under Save as type select All Files, OR in TextEdit under the Format menu, select Make Plain Text.
    2. When saving your files, include the correct file extension (.css or .js) as seen in the examples above.
    3. Within Canvas, go to Admin and select your account.
    4. On the left-hand side of the page select Themes.
    5. Select Open in Theme Editor for your current theme under Themes.

      Canvas_Theme.png
  5. Click on Upload to select and upload your JS and CSS files respectively, as shown in the screenshots below.
    Upload_CSS_example.png

    Upload_JS_example.png
  6. After the files are uploaded, Preview Your Changes.

    NOTE: If you Preview Your Changes after uploading either the CSS or JS file, you will need to return to the Upload tab to upload the second file.

    Canvas_Preview_Your_Changes.png
  7. After verifying your changes, click Save theme, then Apply theme.
  8. When presented with the confirmation dialog window, click OK to confirm the changes and apply the changes to the entire account in Canvas. This will initialize the User Integration for Course Evaluations & Surveys.

    Canvas_Apply_Theme.png
  9. Within Course Evaluations & Surveys go back to Account > Integrations (section) > Canvas > User Settings tab. Under the Installation section, Step 3, click on Deploy so that Course Evaluations & Surveys can create and add the necessary External Tool within your Canvas instance – this is required for the Course Evaluations & Surveys User Integration.
  10. Within Canvas, go into Admin and choose your account again.
  11. To verify LTI setup, in Canvas, click on Settings > Apps > View App Configurations, and you should now see the below External App. No further action is required here; this step is simply a verification: Canvas_External_App.png
  12. Within Course Evaluations & Surveys under Account > Integrations (section) > Canvas > User Settings tab, you can now configure your desired settings for the Automated LTI Links & Customized Survey Notification for Students under the User Integration Setup section.


Re-Deploy or Remove the User Integration

Re-Deploy.png

  1. A Re-Deploy button will appear on the User Settings tab only IF the deployed Course Evaluations & Surveys External Tool has been removed in your Canvas instance, causing the settings to become out of sync with the integration, or changes have been made to the Token Primary Account option for the Canvas Web Service Token on the Canvas Integration > Data Settings tab in Course Evaluations & Surveys. Click Re-Deploy to re-install the Course Evaluations & Surveys User Integration in your Canvas instance. Once deployed, the required Course Evaluations & Surveys External App will be automatically re-added to your Canvas instance.

    NOTE: If you Re-Deploy, you MAY need update both the .css and .js files in your Canvas instance with the CSS and JS code listed in Steps 1 & 2 above.

  2. To remove the External Tool added to Canvas after Deploying the integration, return to Account > Integrations (section) > Canvas > User Settings and click Remove to automatically remove the Course Evaluations & Surveys External App from your Canvas instance.

Now that you have completed the Canvas User Integration Setup, continue to the Canvas User Integration Settings article to configure the behavior and user experience of your Canvas User Integration.


Was this article helpful?
2 out of 3 found this helpful

Articles in this section

See more
How to Contact Support
There are many ways to reach out! Click here for our support options.
Watermark Academy
Click to access the Watermark Academy for consultation, training, and implementation companion courses.