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:
-
Log into your Canvas instance as a Canvas Administrator
-
Navigate to Admin > (select root level Canvas account) > Developer Keys
-
Click the + Developer Key button and choose + LTI Key
-
Key Name field = enter the name of your Developer Key (i.e. CE&S Canvas User integration)
-
Method = select Paste JSON
-
LTI 1.3 Configuration =
-
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.
-
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
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.)
-
Copy the entire JSON code, including beginning and ending brackets, then you may close the dialog
-
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.
-
-
Click Save
-
(Returned to list of Developer Keys) Turn ON the Developer Key you created > click OK button in confirmation dialog
-
Under the Details column a ClientID is provided for your new Developer Key. Highlight and copy the ClientID you will paste this into CES in a later step.
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:
- In Course Evaluations & Surveys, navigate to Account > Integrations (section) > Canvas > User Settings tab.
- Under the Installation section, Step 1, copy the CSS code and paste it into your CSS file that is uploaded to your Canvas theme.
- Next, under the Installation section, Step 2, copy the Javascript Code and paste it into your JS file.
- Ensure that the Course Evaluations & Surveys Javascript Code comes before all other content and comments in your Javascript file.
- Ensure that the Course Evaluations & Surveys Javascript Code comes before all other content and comments in your Javascript file.
- Confirm that the changes have been completed and saved within your CSS and JS files.
- Within Canvas, go to Admin and select your Canvas account.
- On the left-hand side of the page select Themes.
- Select Open in Theme Editor for your current theme under Themes.
- Make sure that the correct version of your global files have been updated within the Theme Editor.
Go to Settings -> Apps -> View App Configurations (Note: this can be added at the Canvas sub-account level too. In that case add CSS and JS files at the same sub-account level, just make sure root level theme is empty. )NOTE: Once you make the update, preview Your Changes. If everything appears correct, select Save theme, Apply theme, and OK in the confirmation dialog.
- Within Canvas, go into Admin and choose your account again. Click on Settings > Apps
- Click on “+App” button
- In Configuration Type: select “By Client ID”. Paste the Client ID from a previous step. And click on “Submit” button
- For the above App, click on settings dropdown -> Click on “Deployment Id” -> Copy the “Deployment Id”
- Within Course Evaluations & Surveys go back to Account > Integrations (section) > Canvas > User Settings tab
- In the Installation section. Delete old settings that may appear. Paste “ClientId” and “DeploymentId” that you copied earlier.
- Save the settings
- You can now configure your desired settings for the Automated LTI Links & Customized Survey Notification for Students under the User Integration Setup section. See the Canvas User Integration Settings for more information on these settings.
Adding JS and/or CSS Code to you Canvas Theme:
IMPORTANT NOTE: If your institution uses other code in your Canvas theme JS or CSS files, please work with your IT Team to ensure that you are only adding or replacing the Course Evaluations & Surveys code.
- In Course Evaluations & Surveys, navigate to Account > Integrations (section) > Canvas > User Settings tab.
- Create a new text document in a text editor application, i.e. Notepad or TextEdit.
- 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.
- 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.
Complete the following to save the CSS and JavaScript files:- 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.
- When saving your files, include the correct file extension (.css or .js) as seen in the examples above.
- Within Canvas, go to Admin and select your account.
- On the left-hand side of the page select Themes.
- Select Open in Theme Editor for your current theme under Themes.
- If you show a CSS file or a JavaScript file already in use, you can see what code is already uploaded by clicking the View File button. If you show code other than Course Evaluations & Surveys code in your Canvas theme JS or CSS files, please work with your IT Team to ensure that you are only adding or replacing the Course Evaluations & Surveys code.
- Click on Upload to select and upload your JS and CSS files respectively, as shown in the screenshots below.
- 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. - After verifying your changes, click Save theme, then Apply theme.
- 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.
- Within Canvas, go into Admin and choose your account again. Click on Settings > Apps
- Click on “+App” button
- In Configuration Type: select “By Client ID”. Paste the Client ID from a previous step. And click on “Submit” button
- For the above App, click on settings dropdown -> Click on “Deployment Id” -> Copy the “Deployment Id”
- Within Course Evaluations & Surveys go back to Account > Integrations (section) > Canvas > User Settings tab
- In the Installation section. Delete old settings that may appear. Paste “ClientId” and “DeploymentId” that you copied earlier.
- Save the settings
- VERY IMPORTANT: If you are a LMS Admin, you may need to hand this step off to the CES Admin. Now that the User Integration has been set up, you should now configure your desired settings for the LTI Links & Customized Survey Notification for Students under the User Integration Setup section. See the Canvas User Integration Settings for more information on these settings.