This document provides instructions for configuring Loree in your Canvas LMS platform. To configure Loree, ensure that you are logged in to your Canvas account as an Account Admin.

Step 1: Log in to Canvas as an Account Admin on the root account

Step 2: Open the Admin menu from Account Navigation and select Developer Keys

Step 3: Click the + Developer key button (located in the far right upper corner) and choose + LTI Key in the drop down. 

Step 4: Once you click on the "+ Developer key" button, you will be directed to the Key Settings page where you can configure your key.

• You will notice that initially, it will have a manual entry in the drop-down. 
• Change the Method to "Paste JSON"

Step 5: On the left-hand side of the page, enter the following information:

1. Key Name: Loree

2. Owner Email: support@loree.io

3. Redirect URIs: https://loree-us-api.crystaldelta.net/lti/auth 

4. Configure Method: Paste JSON

Step 6: Paste the JSON values in the area under LTI 1.3 Configuration

{
    "title": "Loree",
    "scopes": [],
    "extensions": [
        {
            "platform": "canvas.instructure.com",
            "settings": {
                "platform": "canvas.instructure.com",
                "placements": [
                    {
                        "default": "disabled",
                        "placement": "course_navigation",
                        "visibility": "admins",
                        "message_type": "LtiResourceLinkRequest"
                    }
                ]
            },
            "privacy_level": "public"
        }
    ],
    "public_jwk": {},
    "description": "Production environment ",
    "custom_fields": {
        "roles": "$Canvas.membership.roles",
        "user_id": "$Canvas.user.id",
        "course_id": "$Canvas.course.id",
        "is_root_account_admin": "$Canvas.user.isRootAccountAdmin"
    },
    "public_jwk_url": "https://canvas.instructure.com/api/lti/security/jwks",
    "target_link_uri": "https://loree-us-api.crystaldelta.net/lti/auth",
    "oidc_initiation_url": "https://loree-us-api.crystaldelta.net/lti/launch"
}

Step 7: Click the Save page, located at bottom right of the page. 

Step 8: 

• You will be brought back to Developer Keys, where you will be presented with all the developer keys within your Canvas Environment. 
• Find Loree and toggle the "State" to "On"

Step 9:

• When you have toggled on the "State" a pop-up will appear. "Are you sure you want to change the state of this developer key? 
• Click "OK"
  
  

API Key Generation

Step 1: Click the + Developer key button (located in the far right upper corner) and choose + API Key in the drop down. 

Step 2: You will be navigated to the Key Settings to configure the page. 

Step 3: Update all fields in the left-hand side of the page as per the below.

1. Key Name: Loree-api

2. Owner Email: support@loree.io

3. Redirect URIs: https://loree-us-api.crystaldelta.net/lti/token

4. Redirect URI (Legacy): https://loree-us-api.crystaldelta.net/lti/token

5. Clients Credentials Audience: Canvas

6. Click on “Save“ to create a new API key. Click the Save page, located in the bottom right of the page. 

Step 4: 

• Once you have saved the Key Settings, you will be redirected to the Developer Keys page where you can view all the developer keys in your Canvas Environment. 
• Find Loree-api and toggle the "State" to "On".

Step 5: A confirmation pop-up will appear. Simply click "OK" to proceed and complete the action.

Install the Loree LTI app in Canvas

Step 1: After the successful creation of LTI and API developer keys. You will need to copy the LTI Key, under the details column for this process. 

Step 2: Navigate to Admin Menu > Settings > Apps.

Step 3: Select "View App Configurations". Located top right-hand side of the screen. 

Step 4: 

• Once on the External Apps page, you can easily configure and manage your app settings for Loree. This is where you will need to create an "App" specifically for Loree, which will allow you to seamlessly integrate it into your Canvas environment.
• Click on the "+App" button on the top right-hand side of the screen.

Step 5: 

• Add App
  • Configuration Type: By Client ID

• • Client ID: Past the client ID here. 

• Click on "Submit" to continue. 

Step 6: A pop-up will appear and you will need to click "Install"

Adding Canvas as a Tool in Loree

Step 1: 

• Navigate to Admin > Developer Keys

Step 2: Copy and provide the following details.

• Canvas Instructure URL (Example: https://crystaldelta.instructure.com)

• LTI client ID

• API client ID

• API client Secret (click on Show Key to get the secret)
  

  
  
  
  

Launch the Loree LTI tool from the course navigation

Step 1: Navigate to a course via the Courses button on the left-hand side menu or via Dashboard. 

Step 2: Select a course. 

Step 3: Go to the "Settings" of the course.

Step 4: Proceed to the navigation tab. 

Step 5: Drag "Loree" from the bottom of the course to the upper area. 

Step 6: Click on "Save" located at the bottom of the screen. 

Step 7: Loree will be shown in the left-hand menu. 

CSS and JS for Canvas Themes

To ensure that Canvas supports responsive content, it is necessary to incorporate Loree CSS and JS into both Desktop and Mobile themes via Canvas.

Following are the links to Custom CSS and Custom JS: 

Custom CSS:

http://loree-files.crystaldelta.net/loree-themes/themesV2.css

Custom JS:

https://loree-files.crystaldelta.net/loree-themes/themes.js