Embed your Digital Twin

https://pria.praxislxp.com/pria-sdk-web.js

<script src="pria-sdk-web.js"></script>

window.addEventListener('DOMContentLoaded', (event) => {
    // loading logic
})

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);

// Load SDK with PriaIntegration helper class
PriaIntegration.loadSdk(baseUrl, displayOptions, instanceConfig, userConfig);

// Wait for SDK to be ready
const timer = setInterval(() => {
    if (window.pria && window.pria.isReady && window.pria.isReady()) {
        clearInterval(timer);
        // SDK is ready - user can interact with the button
    }
}, 100);

// Clean termination
PriaIntegration.destroySdk();

// Load SDK script directly
const script = document.createElement('script');
script.src = `${BASE_URL}/pria-sdk.js`;
script.onload = () => {
    window.priasdk(BASE_URL, userConfig, PUBLIC_ID, pictureUrl, displayOptions);
    waitForReady(setupPria);
};

// Subscribe to events for granular control
window.pria.subscribe((response) => {
    const command = response?.response?.command;
    
    if (response.type === 'pria-response' && command === 'convo.start') {
        // Conversation started - show the UI
        window.pria.setVisible(true);
    }
});

// Programmatically start conversation
window.pria.send({ command: 'convo.start' });

// 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
};

/**
* 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();

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
    convoMode: false                // Auto-start convo (voice) mode when ready
}

let displayOptions = {
    convoMode: true,
    fullScreen: true,
    openOnLoad: true
}

let displayOptions = {
    convoMode: {
        conversationId: 123,                          // maps to course_id
        conversationName: 'Customer Onboarding',      // maps to course_name
        assistantId: '6bec24be-4e86-4071-b90f-d588'   // target assistant _id
    },
    fullScreen: true,
    openOnLoad: true
}

let instanceConfig = {
    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 of your Digital Twin
};

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
};

/**
 * Start a conversation with optional assistant and course selection
 */
const startConversation = async (assistantId, conversationId, conversationName) => {
    
    let request = {
        command: 'convo.start'
    };
    
    // Optionally specify an assistant
    if (assistantId) {
        request.assistantId = assistantId;
    }
    
    // Optionally specify an existing conversation
    if (conversationId && conversationName) {
        request.selectedCourse = {
            course_id: conversationId,
            course_name: conversationName
        };
    }
    
    console.log("Starting convo mode");
    window.pria.send(request);
}

/**
 * Handle responses from Pria
 */
const handleResponse = async (data) => {
    console.log("Got response from Pria", data);
    
    const command = data?.response?.command;
    const content = data?.response?.content;
    
    if (data.type === 'pria-response') {
        console.log("Processing command:", command);
        
        // Handle convo.start success - show UI
        if (command === 'convo.start') {
            // Use SDK's display function to show the UI panel
            window.pria.display(true);
        }
        else if (command === 'assistants.list' && content) {
            // Handle assistants list response
            console.log("Assistants loaded:", content);
        }
        else if (command === 'conversations.list' && content) {
            // Handle conversations list response
            console.log("Conversations loaded:", content);
        }
    } 
    else if (data.type === 'pria-error') {
        const errorContent = data?.response?.content;
        if (errorContent && errorContent.indexOf("not connected") > -1) {
            // Retry after delay if not connected
            setTimeout(() => startConversation(), 2000);
        } else {
            console.error("Pria error:", errorContent);
        }
    }
}

/**
 * Wait for Pria to be fully loaded and ready
 */
const waitForPria = () => {
    // Use isReady to check if Pria is fully initialized
    if (!window?.pria?.isReady()) {
        console.log("Waiting for Pria to load...");
        return;
    }
    
    console.log('Pria loaded and ready');
    
    clearInterval(waitForPriaTimer);
    
    // Subscribe to Pria responses
    window.pria.subscribe(handleResponse);
    
    // Start conversation after a brief delay
    setTimeout(() => startConversation(), 2000);
    
    // Clean up on page unload
    window.addEventListener('beforeunload', () => {
        window.pria.unsubscribe(handleResponse);
        window.pria.destroy(); // Clean up Pria resources
    });
}

let waitForPriaTimer = setInterval(waitForPria, 1000);

/**
 * Javascript Class integration example
 * Demonstrates modern patterns for Pria SDK integration
 */
class PriaTestHarness {
    constructor() {
        this.pria = null;
        this.waitForPriaTimer = null;
        this.isConnected = false;
        this.conversationMode = 'existing'; // 'existing' or 'new'
        this.assistantsCache = []; // Cache assistants for lookup
        
        // Configuration
        this.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." 
            },
            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(), 1000);
                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
     */
    waitForPria() {
        // Use isReady() to check if Pria is fully initialized
        if (!window.pria?.isReady()) {
            console.log("Waiting for Pria to load...");
            return;
        }
        
        clearInterval(this.waitForPriaTimer);
        this.pria = window.pria;
        this.isConnected = true;
        
        // Subscribe to Pria responses
        this.pria.subscribe(this.handlePriaResponse.bind(this));
        
        // Load assistants and conversations on connection
        this.loadAssistants();
        this.loadConversations();
        
        // Clean up on page unload
        window.addEventListener('beforeunload', () => {
            this.pria.unsubscribe(this.handlePriaResponse);
            this.pria.destroy(); // Clean up Pria resources
        });
    }
    
    /**
     * Handle responses from Pria
     */
    handlePriaResponse(response) {
        const command = response?.response?.command;
        const content = response?.response?.content;
        
        if (response.type === 'pria-response') {
            console.log("Processing command:", command);
            
            // Handle convo.start success - show UI
            if (command === 'convo.start') {
                this.showPria();
            }
            else if (command === 'assistants.list' && content) {
                this.assistantsCache = content;
                console.log("Assistants loaded:", content.length);
            }
            else if (command === 'conversations.list' && content) {
                console.log("Conversations loaded:", content.length);
            }
        } 
        else if (response.type === 'pria-error') {
            console.error("Pria error:", content);
        }
    }
    
    /**
     * Start a conversation
     */
    startConversation(assistantId, conversationId, conversationName) {
        if (!this.isConnected) return;
        
        let request = { command: 'convo.start' };
        
        if (assistantId) {
            request.assistantId = assistantId;
        }
        
        if (conversationId && conversationName) {
            request.selectedCourse = {
                course_id: conversationId,
                course_name: conversationName
            };
        }
        
        this.pria.send(request);
    }
    
    /**
     * Load assistants list
     */
    loadAssistants() {
        if (!this.isConnected) return;
        this.pria.send({ command: 'assistants.list' });
    }
    
    /**
     * Load conversations list
     */
    loadConversations() {
        if (!this.isConnected) return;
        this.pria.send({ command: 'conversations.list' });
    }
    
    /**
     * Toggle Pria visibility (show/hide entirely)
     */
    togglePriaVisibility(visible) {
        if (!this.isConnected) return;
        this.pria.setVisible(visible);
    }
    
    /**
     * Toggle Pria panel display (expand/collapse)
     */
    togglePriaDisplay() {
        if (!this.isConnected) return;
        
        // Use SDK's isDisplayed() to check current state
        const isCurrentlyDisplayed = this.pria.isDisplayed();
        this.pria.display(!isCurrentlyDisplayed);
    }
    
    /**
     * Show Pria interface
     */
    showPria() {
        if (!this.pria) return;
        
        // Check if UI is already shown using SDK's isDisplayed()
        if (!this.pria.isDisplayed()) {
            this.pria.display(true);
        }
    }
}

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

/**
 * Check if Pria SDK is ready to receive messages
 * @returns {boolean} True if SDK is fully connected and ready
 */
function isPriaReady() {
    return window.pria && 
           typeof window.pria.isReady === 'function' && 
           window.pria.isReady();
}

// Usage in your application
if (isPriaReady()) {
    window.pria.send({ command: 'convo.start' });
}

// Destroy SDK completely (removes all UI, event listeners, and references)
PriaIntegration.destroySdk();

// Reload with new or existing configuration
PriaIntegration.reloadSdk(
    'https://pria.praxislxp.com',
    displayOptions,
    instanceConfig,
    userConfig
);

https://pria.praxislxp.com/pria-sdk-web-sample.html