Custom Theme

Introduction

This documentation details the installation steps to set up a Praxis AI Instance into Canvas using the Canvas Theme Editor. When installed in the Theme, the Instance becomes embedded into Canvas’s pages.

Add a Praxis AI Instance to your Theme

To add a Praxis AI Instance globally to a Canvas account, you will upload a segment of JavaScript in the Theme used by the account or sub-account of your choice.

Prerequisites - You must have administrative access to the Canvas account. - Ensure you have the necessary permissions to edit the Theme. - Download the SDK

Step 1. Download SDK

Step 2. Edit Canvas Theme and Upload SDK

Customizing the SDK

In this step, you will customize the Javascript SDK you downloaded to specify what instance of Praxis AI to use. Edit the file pria-sdk-canvas.js from your download

Disabled by Default

If you prefer to disable Praxis AI by default set the INSTITUTION_ID to undefined

var INSTITUTION_ID;

Require Teacher Onboarding

If you prefer to use the “Teacher Onboarding” process, leave the INSTITUTION_ID field blank (e.g. “”) like this:

var INSTITUTION_ID = '';

In this modality, Teacher or Administrator alike will select an existing instance or create a new instance at runtime.

Assign all to Praxis AI Instance

If prefer to assign everyone to the same Praxis AI instance (for the sub-account), then set the value of the INSTITUTION_ID to the instance public ID given to you by Praxis , ex: 5fd6d7a4-4cc7-4e04-8473-e89aef4e…

var INSTITUTION_ID = “5fd6d7a4-4cc7-4e04-8473-e89aef4e…”;

The value of the INSTITUTION_ID field is unique to your instance of Pria. Keep this ID confidential.

Customize the Instance icon

You can change the icon of the button that will appear on the screen with the following variable: If you like to keep using Pria’s icon, leave the INSTITUTION_ICON_URL as undefined

var INSTITUTION_ICON_URL;

If you want to change the icon, set the value of the icon URL to a new location, like the example below:

var INSTITUTION_ICON_URL = “https://pria.praxislxp.com/logo192.png”;

We recommend using a square image, no larger than 192 x 192 pixels, that also supports transparency (like PNG or webp format) - This image should be placed on a Content Delivery Network that allows access across origin or domains (CORS Policy)

Display Options

You can customize the position, size and container of the Instance’s button as well as the main window with the following Javascript DISPLAY_OPTIONS variable:

var DISPLAY_OPTIONS = {
  fullScreen: false, // True for expanded in full screen
  openOnLoad: false, // True to open Pria immediately when loaded
  buttonWidth: '80px', // Size of the button containing the Pria Logo
  buttonPosition: 'fixed', // Determine the position of the button (fixed, relative, sticky)
  buttonPositionRight: '20px', // Position of the button relative to the right edge of the screen
  buttonPositionBottom: '20px', // Position of the button relative to the bottom edge of the screen
  buttonNoBounce: true, // Determine whether the button will not bounce when Pria is closed
  priaContainerId: '', // Id of the container receiving pria window (default empty uses BODY)
  buttonContainerId: '', // Id of the container receiving the button (default empty uses BODY)
  allowPop: false, // True to show the button and pop Pria out the containing iFrame
};

The options are as below:

Option	Default / Allowed Values	Description	Notes
fullScreen	`true` \| `false` (default)	Display Pria in fullscreen.
openOnLoad	`true` \| `false` (default)	Open Pria immediately on load or keep closed until user clicks the Pria button.
buttonWidth	CSS width value \| `'80px'` (default)	Size of the Pria button.	See CSS width examples.
buttonPosition	CSS position value \| `'fixed'` (default)	Position type of the button. Default is `fixed`, but can be `relative` or `absolute`.
buttonPositionBottom	CSS bottom value \| `'20px'`	Distance from the bottom edge of the screen (only applies to `fixed` or `absolute` position).	See CSS bottom examples. Example: `calc(100% - 120px)` to place icon at top.
buttonPositionRight	CSS right value \| `'20px'`	Distance from the right edge of the screen (only applies to `fixed` or `absolute` position).	See CSS right examples. Example: `calc(100% - 120px)` to place icon at top.
buttonNoBounce	`true` (default) \| `false`	Whether the button bounces when displayed.	Default: no bounce.
priaContainerId	Element ID \| `''` (BODY by default)	Parent element for Pria UI iFrame.	Empty value appends to `<body>`.
buttonContainerId	Element ID \| `''` (BODY by default)	Parent element for the Pria button.	Empty value appends to `<body>`.
allowPop	`true` \| `false` (default)	Option to open Pria in a new tab.	Deprecated due to third-party cookie restrictions.

The Javascript SDK loads Pria with the loadPria() function.

loadPria();

the loadPria() function will not load Pria twice if it happens to be called more than once.

In the SDK, the loadPria() function is placed when the student or teacher is on a course page. This determination is done using a regular expression with the function onPage() like below:

// load on all courses page (default)
// Ex: https://praxis-ai.instructure.com/courses/106
onPage(/\/courses\/\d+/, function (isOnPage) {
  if (isOnPage) {
    loadPria();
  }
});

In Canvas, course pages have URLS that match this structure https://my-univertivt.canvas.edu/courses/106/… and this is what we rely on to determine to loadPria() so it loads only for courses.

In the SDK, we also load Praxis AI in the Theme Editor so that we can preview Pria after we edit the custom theme. This is not required

// load on theme_editor page
// Ex: url https://praxis-ai.instructure.com/accounts/1/theme_editor
onPage(/\/theme_editor/, function (isOnPage) {
  if (isOnPage) {
    loadPria();
  }
});

The page URL match uses Regular Expressions

Load for certain courses

It is common that administrator want to load a Instance only for certain courses, while it stays disabled for all the others. In this case, set the default INSTITUTION_PUBLIC_ID to undefined.

var INSTITUTION_ID; // undefined, "", or valid ID;

On line 1, inside the block that determines that we are in a course page, add the following code:

var coursesForSpecificInstance = [79875, 72856, 55621];

isInCourses(coursesForSpecificInstance, function (isCourse) {
  if (isCourse) {
    INSTITUTION_ID = '1234-5245-ss-aaa';
    INSTITUTION_ICON_URL = 'https://cdn.domain.edu/my/icon.png';
  }
});

Insitution Specific Courses

// load on all courses page (default)
// Ex: https://praxis-ai.instructure.com/courses/106
onPage(/\/courses\/\d+/, function (isOnPage) {
  if (isOnPage) {
    var coursesForSpecificInstance = [79875, 72856, 55621];
    isInCourses(coursesForSpecificInstance, function (isCourse) {
      if (isCourse) {
        INSTITUTION_ID = '1234-5245-ss-aaa';
        INSTITUTION_ICON_URL = 'https://cdn.domain.edu/my/icon.png';
      }
    });
    loadPria();
  }
});

This code means that if the current course is either 79875, 72856, or 55621, then we set the INSTITUTION_ID to a specific instance, and customize the icon to our own URL

Teacher Specific Courses

Similarly, you may choose to enable the Instance (let teacher crete their own twins) for a specific set of courses. To do so, simply set the INSTITUION_ID to empty string like this:

var coursesForDigitalTwin = [69875, 62856, 65621]
isInCourses(coursesForDigitalTwin, function (isCourse) {
  if (isCourse) {
    INSTITUTION_ID = '';
    INSTITUTION_ICON_URL = undefined;
  }
})

The resulting code will look like this:

// load on all courses page (default)
// Ex: https://praxis-ai.instructure.com/courses/106
onPage(/\/courses\/\d+/, function (isOnPage) {
  if (isOnPage) {
    var coursesForSpecificInstance = [79875, 72856, 55621];
    isInCourses(coursesForSpecificInstance, function (isCourse) {
      if (isCourse) {
        INSTITUTION_ID = '1234-5245-ss-aaa';
        INSTITUTION_ICON_URL = 'https://cdn.domain.edu/my/icon.png';
      }
    });

    var coursesForDigitalTwin = [69875, 62856, 65621];
    isInCourses(coursesForDigitalTwin, function (isCourse) {
      if (isCourse) {
        INSTITUTION_ID = '';
        INSTITUTION_ICON_URL = undefined;
      }
    });

    loadPria();
  }
});

Instance per Teacher

You can write Javascript code that selects a specific Praxis AI instance for each teacher courses for example:

// load on all courses page (default)
// Ex: https://praxis-ai.instructure.com/courses/106
onPage(/\/courses\/\d+/, function (isOnPage) {
  if (isOnPage) {
    var Quirk = [2250992];
    isInCourses(Quirk, function (isCourse) {
      if (isCourse) {
        INSTITUTION_ID = '7813dada-29ab-48a0-8d33-255354d8XXc';
        INSTITUTION_ICON_URL = 'https://elearning.inst.edu/wp-content/up1';
      }
    });

    var Chauncey = [2351092, 21317];
    isInCourses(Chauncey, function (isCourse) {
      if (isCourse) {
        INSTITUTION_ID = '6c5cde70-2a8f-4986-bdc5-a5e4fe1fYYY';
        INSTITUTION_ICON_URL = 'https://elearning.inst.edu/wp-content/up1';
      }
    });

    loadPria();
  }
});

Useful Functions

The Javascript SDK has a lot of additional useful functions you can. Let’s take a look at those.

hasAnyRole()

The function hasAnyRole() determines if the current user has the specified role (ex:user, teacher, admin,root_admin)

// load for a user role
// ex: user, teacher, admin, root_admin, etc.
hasAnyRole('user', function (hasRole) {
  if (hasRole) {
      // loadPria()
  }
})

isUser()

isInUsers()

The isInUsers() function determines if the current user is in the array of specific user ids

// load for specific users
var userIds= [1,2, 3]
isInUsers(userIds, function (isUser) {
if (isUser) {
  // loadPria()
}
})

isStudent()

isCourse()

The function isCourse() determines if the current page is in a specific course (ex: id 123)

// load for a specific course
isCourse(123, function (isCourse) {
if (isCourse) {
  // loadPria()
}
})

isInCourses()

The function isInCourses() determines if the current course is in an array of specific courses

var courseIds = [1234, 2345]
isInCourses (courselds, function (isCourse) {
if (isCourse) {
  // loadPria()
}
})

onElementRendered()

The onElementRendered() function is triggered when an element is fully displayed in the page Example below is an anchor referenced by ID create_ticket.

// Load with an action on a page using el (a jquery element collection)
onElementRendered('a[href=#create_ticket]', function (el) {
  // loadPria()
});

The ENV variable

In Canvas, a Javascript object called ENV is available to any pages rendered in the Application. When injected as a Theme, the Instance has access to the variable and uses it to determine who is the current user, or what course is he/she launching. To review the properties made available by the ENV variable, open a course page in Canvas, and launch the Developer Mode (F12 on Windows - developer tools on Mac) then in the Console window, type ENV then press the ENTER key. Here is an example of such variable:

14:27:02.413 ENV
14:27:02.448 {ASSET_HOST: 'https://dul1hjcxv0uqb.cloudfront.net', active_brand_config_json_url: 'https://dul1hjcxv0uqb.cloudfront.net/dist/brand…bl…/variables-7dd4b8981a9f0e021ec0229e4bd5873.json', active_brand_config: {...}, confetti_branding_enabled: false, url_to_what_gets_loaded_inside_the_tinymce_editor_css: Array(3), …}
  ACCOUNT_ID: "1"
  ASSET_HOST: "https://dul1hjcxv0uqb.cloudfront.net"
  BIGEASY_LOCALE: "en_US"
  CAN_VIEW_CONTENT_SHARES: true
  CONTEXT_TIMEZONE: "America/Los_Angeles"
  DATA_COLLECTION_ENDPOINT: "https://canvas-frontend-data-iad.prod..."
  DEEP_LINKING_LOGGING: null
  DEEP_LINKING_POST_MESSAGE_ORIGIN: "https://praxis-ai.instructure..."
  DIRECT_SHARE_ENABLED: false
  DOMAIN_ROOT_ACCOUNT_ID: "24379000000000001"
  FEATURES: {featured_help_links: true, lti_platform_storage: true, ...}
  FULLCALENDAR_LOCALE: "en"
  FULL_STORY_ENABLED: false
  K5_HOMEROOM_COURSE: false
  K5_SUBJECT_COURSE: false
  K5_USER: false
  LOCALE: "en"
  LOCALES: ['en']
  LOCALE_TRANSLATION_FILE: "/dist/javascripts/translations/en-88841"
  LTI_LAUNCH_FRAME_ALLOWANCES: (8) ['geolocation*', 'microphone*', …]
  MOMENT_LOCALE: "en"
  RAILS_ENVIRONMENT: "Production"
  SENTRY_FRONTEND: {dsn: "https://355a1d96712e4038ac25aa852fa79a8f8"}
  SETTINGS: {open_registration: false, collapse_global_nav: false, …}
  TIMEZONE: "America/Los_Angeles"
  USE_CLASSIC_FONT: false
  account_id: "1"
  active_brand_config: {md5: "ce87aff671f275c7fa8b620dea9768b", ...}
  active_brand_config_json_url: "https://dul1hjcxv0uqb.cloudfront.net/dist/brand..."
  active_context_tab: "brand_configs"
  allowGlobalIncludes: true

The Instance makes use of the

current_user property

current_user:
  anonymous_id: "32"
  avatar_image_url: "https://praxis-ai.instructure.com/images/ display_name: "Hugo Lebegue"
  email: "hugo@praxis-ai.com"
  html_url: "https://praxis-ai.instructure.com/about/110"
  id: "110"

current_user_roles property:

current_user_roles: Array(5)
  0: "user"
  1: "student"
  2: "teacher"
  3: "admin"
  4: "root_admin"

current_context property:

current_context: id: "213"
name: "Hugo"
type: "Course"
url: "https://praxis-ai.instructure.com/courses/213'

Install the Instance SDK into Theme

Once you have customized your SDK Javascript file and added the logic to load the Instance when the proper conditions are met, you are ready to add it to your current Theme

Upload JavaScript SDK

In the Theme Editor, Upload Tab, under the JavaScript File section, click on the Select button
Select the pria-sdk-canvas.js that you just customized from your download folder, then click OK
The theme Editor will download the Javascript onto Canvas content delivery network so it becomes available to the theme.

Preview Changes

Click on the Preview Your Changes button
Verify that the Instance is running properly in Preview mode
The Instance Icon should appear at the bottom of the screen in preview mode
The Instance UI should open and connect upon click on the icon
If the Instance appears properly in Preview mode, click the Save to apply the changes in the Theme and return to the Theme selector.

Confirm Praxis Loads

The Instance Icon should display properly
Congratulations, the Instance is now installed in your theme.
To verify, login using a standard User account, and navigate to the section of Canvas where you are loading the Instance, example below in a course

Subaccounts

Canvas allows administrators to set up themes for sub accounts. Use this technique to enable Praxis AI in a Theme for specific user population/courses.

It is best practice to add Praxis AI only to sub accounts, because scripts are added from Parent to Child domains.

Teacher Onboarding

This process happens IF you decide to leave the INSTITUTION_ID field as an empty string (by default) in the SDK file inserted in the theme.The teacher (or any administrator) is then expected to Create an instance of Pria (a.k.a. Instance), or connect to an existing one for every course the teacher wants Pria in.

When inserted as a theme, Pria is injected in the bottom right corner of a course page.

Create your Digital Twin

The onboarding wizard starts when the Teacher clicks on Pria’s icon to expand for the first time
This wizard allows for the creation of an instance of Pria, dedicated to the teacher.

Click the + Digital Twin button to create a personalized instance of Pria.

In the New Instance dialog, enter

a name for your twin, ex: Bob,
a picture URL that is accessible on the internet (without CORS issues), and
a picture to use for the ui background
An A.I. prompt that personalizes your character (more information is available in the Faculty Guide )

Click Let’s GO to finish the creation of your new instance. You are now in your Instance instance: Congratulations, you just created your very first Instance.

Anytime you or your students will click on Pria in this page, you will access this instance directly.

When you place Pria in another course, it is considered a new placement. You will have to go through this wizard again and create a different instance or reuse one of your existing instances like the example below

Selecting an existing instance will associate this placement to the instance. This can not be changed later, unless you remove the placement URL from the list of configured URLs for this instance.

More Personalization Options

Personalization

More information on Admin functions is available in this documentation.

Once connected to your instance, click on the GPT and Personalization Tab. This page is where you can update any personalizations for your Instance.

Follow the instructions in the Admin Guide to setup integration to your Canvas instance and allow Pria to search your course content.
If you are using Kaltura, this is a good time to configure the integration as well. Contact your IT Administrator
Anytime you make a change to the instance, don’t forget to click the Update button to save your changes.

Whitelisting

In order for Pria and associated services to run without connectivity issues, the following domains must be Whitelisted by your institution:

pria.praxislxp.com
prialti.praxislxp.com

Integrations

Instructure Canvas

D2L Brightspace

Introduction

Add a Praxis AI Instance to your Theme

pria-sdk-canvas.js

Instructure: How to Upload Custom JavaScript and CSS Files

Customizing the SDK

Disabled by Default

Require Teacher Onboarding

Assign all to Praxis AI Instance

Customize the Instance icon

Display Options

Load for certain courses

Insitution Specific Courses

Teacher Specific Courses

Instance per Teacher

Useful Functions

The ENV variable

Install the Instance SDK into Theme

Subaccounts

Teacher Onboarding

Create your Digital Twin

More Personalization Options

Personalization

Whitelisting

Integrations

Instructure Canvas

D2L Brightspace

​Introduction

​Add a Praxis AI Instance to your Theme

​Customizing the SDK

​Disabled by Default

​Require Teacher Onboarding

​Assign all to Praxis AI Instance

​Customize the Instance icon

​Display Options

​Load for certain courses

​Insitution Specific Courses

​Teacher Specific Courses

​Instance per Teacher

​Useful Functions

​The ENV variable

​Install the Instance SDK into Theme

​Subaccounts

​Teacher Onboarding

​Create your Digital Twin

​More Personalization Options

Personalization

​Whitelisting

Introduction

Add a Praxis AI Instance to your Theme

Customizing the SDK

Disabled by Default

Require Teacher Onboarding

Assign all to Praxis AI Instance

Customize the Instance icon

Display Options

Load for certain courses

Insitution Specific Courses

Teacher Specific Courses

Instance per Teacher

Useful Functions

The ENV variable

Install the Instance SDK into Theme

Subaccounts

Teacher Onboarding

Create your Digital Twin

More Personalization Options

Whitelisting