Skip to main content

​
Integration Process

The integration process is straight forward:
  • Download and install the Web SDK,
  • Choose between Limited or Standard Integration
  • Furtner configure your integration (digital twin, user identity, display options)

Installation

Download the Web SDK and install the Javascript file in your website.

Integration

Choose between limited or standard integration option to integrate into your website.

Configuration

Customize the setup to specify which Digital Twin to connect to, User Identity and various display options.

​
Installation

Download the Pria Web SDK file and save it locally on your website under the name pria-sdk-web.js 
https://pria.praxislxp.com/pria-sdk-web.js
This SDK provides all routines for secure initialization and integration with your Digital Twin in a web application.
For Canvas LMS integration, refer to Custom Theme Canvas Install Guide

​
Integration

You can choose Limited or Standard Integration based on your JavaScript skill level and requirements.

Limited Integration

Start your Digital Twin with minimal effort, leveraging the UI without programming.

Standard Integration

Integrate your Digital Twin securely with JavaScript code and take full control.

​
Limited Integration

Embed the Digital Twin UI in your website header with: 
<script src="pria-sdk-web.js"></script>
The pria-sdk-web.js file is the SDK you downloaded. Optionally, place this in a directory, e.g., /assets/js/pria-sdk-web.js.
Basic initialization for DOM-ready load: 
window.addEventListener('DOMContentLoaded', (event) => {
    // loading logic
})
Adjust parameters in the SDK for your Digital Twin, user identity, and display preferences: 
const instanceConfig = {
    publicId: 'f831501f-b645-481a-9cbb-331509aaf8c1',
    pictureUrl: 'https://cdn.domain.com/pics/dt_1.png'
}

const userConfig = {
    email: `john@doe.com`,
    profilename:  `John Doe`,
}

const displayOptions= {
    buttonPositionRight: 'calc(50% - 40px)',
    buttonPositionBottom: '80px'
}

PriaIntegration.loadSdk('https://pria.praxislxp.com', displayOptions, instanceConfig, userConfig);
For security, retrieve these values from a secure, asynchronous source to avoid exposing sensitive data.

​
Integration Starter kit

Download the Example Starter Kit to get started

​
Standard Integration

For full control, use JavaScript to configure and load the SDK. Configuration object example: 

// Configuration
let config = {
    displayOptions: {
        buttonPositionRight: 'calc(50% - 40px)',
        buttonPositionBottom: '80px'
    },
    instanceConfig: {
        publicId: 'f831501f-b645-481a-9cbb-331509aaf8c1',
        pictureUrl: 'https://cdn.domain.com/pics/dt_1.png'
    },
    userConfig: {
        email: 'john@doe.com',
        profilename: 'John Doe',
        usertype: 1,
        userid: 110,
        roleid: 123,               
        rolename: "Course ABC",
        partnerid: 1,              
        partnername: "ABC Global Inc." 
    },
    ... other useful configuration objects
};
This object configures display, digital twin instance, and user identity.
Load the SDK: 
/**
* Load the Pria SDK
*/
loadPriaSDK() {
    return new Promise((resolve, reject) => {
        
        const script = document.createElement('script');
        script.src = 'pria-sdk-web.js';
        script.async = true;
        
        script.onload = () => {
            
            PriaIntegration.loadSdk(
                'https://pria.praxislxp.com', 
                config.displayOptions, 
                config.instanceConfig, 
                config.userConfig
            );
            
            resolve();
        };
        
        script.onerror = (error) => {
            reject(new Error('Web SDK loading failed'));
        };
        
        document.body.appendChild(script);
    });
}

// usage 
await loadPriaSDK();
The SDK file should be the copy you installed. You can organize includes under /assets/js/ as needed.
For a full example, see SDK Playground Example.

​
Configuration Parameters

The SDK requires three objects: displayOptions, instanceConfig, and userConfig.

​
Display Options

The displayOptions object controls the display and behavior of your digital twin on screen. 
let displayOptions = {
    fullScreen: false,              // Expand in full screen mode
    openOnLoad: false,              // Open Pria immediately when loaded
    buttonWidth: '80px',            // Size of the Pria logo button
    buttonPosition: 'fixed',        // Button position type (fixed, relative, sticky)
    buttonPositionRight: '20px',    // Distance from right edge
    buttonPositionBottom: '20px',   // Distance from bottom edge
    buttonNoBounce: true,           // Disable button bounce animation
    priaContainerId: '',            // Container ID for Pria window (default: BODY)
    buttonContainerId: '',          // Container ID for button (default: BODY)
    allowPop: false,                // Allow popping out of containing iframe
    noUI: false                     // Disable UI for headless operation
}
Set noUI: true to use Pria programmatically without the visual interface
Adjust buttonPositionRight with CSS for positioning, e.g., calc(50% - 40px) for center alignment.

​
Instance Configuration

The instanceConfig object configure which Digital Twin to use along with the picture rendered in the start button. 
let instanceCconfig = {
    publicId: '41407647-248c-4f0e-a317-71fc151ba8fb'     // Public ID identifying your Digital Twin
    pictureUrl: 'https://cdn.domain.com/pics/dt_1.png',  // Picture to use for the on-screen icon if your Digital Twin
};
The publicId identifies your digital twin instance
Load these values securely and asynchronously—never expose sensitive data in your HTML.

​
User identity

Set the user identity in the userConfig object 
let userConfig = {
    email: 'john@doe.com',          // Required
    profilename: 'John Doe',
    profilepicture: '',             // Leave empty for user's default picture
    userid: '123',                  // Optional user identifier on your site
    roleid: 123,                    // Optional conversation/course ID
    rolename: 'Course ABC',         // Optional conversation/course name
    partnerid: 1,                   // Optional customer/account ID
    partnername: 'ABC Global Inc.'  // Optional customer/account name
};
The email is required and serves as the main identifier in Praxis AI Middleware.
For education, set roleid and rolename to specify the course.
Use partnerid and partnername to identify an Account or Customer when you create a multi tenant solution
For enhanced security, always retrieve these values asynchronously from a secure source to prevent exposure of plaintext data in the page.

​
Wait for Pria and Start Convo mode

Here is an example demonstrating how to Wait for Pria to be fully ready, then start Convo mode 
/**
* Start convo
*/
const startConversation = async() => {
    
    const request = {
        command: 'convo.start',
        //assistantId: '674e9fd3d7e18aa82eb49fda',
        selectedCourse: {
            course_id: 777,
            course_name: 'My Conversation'
        }
    };
    console.log("Starting convo mode")
    window.pria.send(request);
}
const handleResponse = async (data)=>{
    console.log("Got resonse from Pria", data)
    if (data?.response?.isError){
        const content = data?.response?.content
        if (content && content.indexOf("not connected")>-1){
            setTimeout(startConversation, 2000)
        }else{
            alert(data.response.content)
        }
        
    }
}
const waitForPria =() => {
    if (!(window?.pria.priaObj?.ui && window?.pria?.priaObj?.lti?.url) ) {
        console.log("Waiting for Pria to load...");
        return;
    }
    
    console.log('Pria loaded:');
    
    clearInterval(waitForPriaTimer);
    
    window.pria.subscribe(handleResponse);
    
    setTimeout(startConversation, 2000)
    
    window.addEventListener('beforeunload', () => {
        window.pria.unsubscribe(handleResponse)
    })
}

let waitForPriaTimer = setInterval(waitForPria, 1000)

​
Integration Class Sample

This example is provided AS IS to demonstrate how you can cleanly integrate a Digital Twin in your Web Application. It is extracted from the playground example code. 
/**
* Javascript Class integration example
*/
class PriaTestHarness {
    constructor() {
        this.pria = null;
        this.waitForPriaTimer = null;
        this.isConnected = false;
        
        // Configuration
        this.config = {
            displayOptions: {
                buttonPositionRight: 'calc(50% - 40px)',
                buttonPositionBottom: '80px'
            },
            instanceConfig: {
                publicIdguest: '41407647-248c-4f0e-a317-71fc151ba8fb', 
                publicId: 'f831501f-b645-481a-9cbb-331509aaf8c1',
                pictureUrl: 'https://ca.slack-edge.com/T08Q47N2NUT-U08PZ8CUVDK-d32d2c5679ad-512'
            },
            userConfig: {
                email: 'alex@praxis-ai.com',
                profilename: 'Alex Lebegue',
                usertype: 1,
                userid: 110,
                roleid: 123,               
                rolename: "Course ABC",
                partnerid: 1,              
                partnername: "ABC Global Inc." 
            },
            conversation: {
                id: 777,
                name: "My Conversation"
            },
            localhost: true
        };
        
        this.init();
    }
    
    /**
    * Initialize the application
    */
    async init() {
        try {
            await this.loadPriaSDK();
        } 
        catch (error) {
            console.error('Failed to initialize application:', error);
        }
    }
    
    /**
    * Load the Pria SDK
    */
    loadPriaSDK() {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'pria-sdk-web.js';
            script.async = true;
            
            script.onload = () => {
                console.log('Web SDK Script loaded');

                const url = 'https://pria.praxislxp.com';
                
                PriaIntegration.loadSdk(
                    url, 
                    this.config.displayOptions, 
                    this.config.instanceConfig, 
                    this.config.userConfig
                );
                
                this.waitForPriaTimer = setInterval(() => this.waitForPria(), 2000);
                resolve();
            };
            
            script.onerror = (error) => {
                console.error('Failed to load Web SDK:', error);
                reject(new Error('Web SDK loading failed'));
            };
            
            document.body.appendChild(script);
        });
    }
    
    /**
    * Wait for Pria to be available and set up subscriptions, etc.
    */
    waitForPria() {
        if (!window.pria) {
            console.log("Waiting for Pria to load...");
            return;
        }
        
        clearInterval(this.waitForPriaTimer);
        this.pria = window.pria;
        this.isConnected = true;
        
    }
 
}

// Initialize the application when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    new PriaTestHarness();
})

​
SDK Playground Example

See a live demo: at SDK Playground Example. 
https://pria.praxislxp.com/pria-sdk-web-sample.html
SDK Playground Example This demo covers integration, connection detection, command execution, and more.

​
Automation

Refer to the Javascript APIs for interacting with your Digital Twin programatically using Javascript