​
Integration Process

The integration process is straight forward: Download and install the Web SDK, Choose the 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 into a local file on your web site under a file named pria-sdk-web.js File location: 
https://pria.praxislxp.com/pria-sdk-web.js
This SDK file provides all the initialization routines to securely connect and integrate your Digital Twin in your Web Application.
For Canvas LMS integration, follow the Custom Theme Canvas Install Guide

​
Integration

You can choose the limited or standard integration depending on your level of Javascript and what you want to do with your Digital Twin.

Limited Integration

Start your digital twin with minimal effort. Best to leverage the UI without programming.

Standard Integration

Integrate your digital twin securely with a bit of Javascript code and take full control through Javascript

​
Limited Integration

If you simply choose to embed the Digital Twin UI in your web site, (like standard Chatbots for example) you can simply add a script directive your page header like: 
<script src="pria-sdk-web.js"></script>
The pria-sdk-web.js file is the copy of the SDK file you downloaded and installed on your website. You may choose to prepend a directory to organize your includes, like /assets/js/pria-sdk-web.js
The pria-web-sdk.js file you downloaded has an event handler that initializes the integration when the page is loaded 
/*
* This is an example that connects Pria when DOM is ready
* This code block is provided for illustration purposes. Remove for production 
*/
window.addEventListener('DOMContentLoaded', (event) => {
    // loading logic
})
Adjust the parameters in the SDK file to specify your Digital Twin, user identity and display options. 
const instanceConfig = (typeof window.authConfig === 'object' && window.authConfig !== null) ? { ...window.authConfig }: {
    publicId: 'f831501f-b645-481a-9cbb-331509aaf8c1',
    pictureUrl: 'https://cdn.domain.com/pics/dt_1.png'
}

const userConfig = (typeof window.authUser === 'object' && window.authUser !== null) ? { ...window.authUser }:{
    email: `john@doe.com`,
    profilename:  `John Doe`,
}

const displayOptions= (typeof window.authOptions === 'object' && window.authOptions !== null) ? { ...window.authOptions }:{
    buttonPositionRight: 'calc(50% - 40px)',
    buttonPositionBottom: '80px'
}

PriaIntegration.loadSdk('https://pria.praxislxp.com', displayOptions, instanceConfig, userConfig);
For enhanced security, always retrieve these values asynchronously from a secure source to prevent exposure of plaintext data in the page.

​
Standard Integration

For more control, and if you have a bit of Javacript knowledge, we recommend embedding the SDK with the following snippets In your web page, define a configuration properties like below 

// 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." 
    },
    ... any other useful configuration objects
};
This configuration object contains elements necessary to initialize the SDK, such as display options, digital twin selection and user identity.
To load your Digital Twin in your page, add: 
/**
* 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');
            
            
            PriaIntegration.loadSdk(
                'https://pria.praxislxp.com', 
                config.displayOptions, 
                config.instanceConfig, 
                config.userConfig
            );
            
            resolve();
        };
        
        script.onerror = (error) => {
            console.error('Failed to load Web SDK:', error);
            reject(new Error('Web SDK loading failed'));
        };
        
        document.body.appendChild(script);
    });
}
The pria-sdk-web.js file is the copy of the SDK file you downloaded and installed on your website. You may choose to prepend a directory to organize your includes, like /assets/js/pria-sdk-web.js
Finally start the digital twin with 
await loadPriaSDK();
Check the SDK Playground Example for a more complete example that wrapps the SDK into a class structure.

​
Configuration Parameters

The SDK uses 3 parameter objects to determine the look ad feel of elements on screen with the displayOptions, the Digital Twin to use using the instanceConfig and the user profile data using the userConfig

​
Display Options

Configure Pria’s display behavior using the displayOptions object: 
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
The button is positioned at fixed position on the bottom right by default. You can change the position by using CSS expressions like buttonPositionRight: 'calc(50% - 40px)' to center the button on the screen

​
Instance Configuration

Configure which Digital Twin to use in the instanceConfig object 
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 specifies which digital twin to initialize on the page
For enhanced security, always retrieve these values asynchronously from a secure source to prevent exposure of plaintext data in the page.

​
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 field is required and is the primary user identification methid in Praxis AI Middleware
Education Use Case: Use the roleid and rolename to specify a Course information (ID and Name)
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.

​
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

You can take a look at a running example at SDK Playground Example. 
https://pria.praxislxp.com/pria-sdk-web-sample.html
SDK Playground Example This example demonstrates how to cleanly initialize the integration, detects when sucessfully connected, execute specific commands; such as starting conversation, listing favorites, conversations or assistants, posting a new message, and more.