Embedded Appian Integration
Seamlessly embed Appian interfaces into your existing web applications for a unified user experience.
Key Benefits
Embedded Appian integration allows you to leverage the power of Appian while maintaining your custom user experience.
Seamless Integration
Embed Appian interfaces directly within your existing websites and applications for a unified user experience.
Maintain Security
Leverage Appian's robust security model while integrating with your application's authentication system.
Reuse Appian Assets
Leverage your existing Appian interfaces without rebuilding them for the web, saving development time and resources.
Interactive Demo
Experience our embedded Appian integration firsthand. This demo showcases how Appian components can be embedded within your web applications with configurable settings.
Appian Embedded KYC Demo
Appian Embedded Components Demo
This demonstration showcases how Appian components can be embedded directly into your web application. Select a tab above to view different types of Appian embedded components.
Configuration Not Loaded:
Please click the Settings button to configure your Appian connection.
Implementation Guide
Follow these steps to integrate Appian components into your web application.
Prerequisites
- Appian Environment:
Access to an Appian environment with the appropriate permissions.
- Authentication Setup:
Configure SSO (Single Sign-On) between your application and Appian for seamless authentication.
- CORS Configuration:
Set up Cross-Origin Resource Sharing (CORS) in your Appian environment to allow your domain.
Integration Steps
- Load the Appian Script:
<script src="https://your-appian-server.com/suite/tempo/ui/sail-client/embeddedBootstrap.nocache.js" id="appianEmbedded"> </script> - Create HTML Elements for Embedding:
<!-- Example for embedding an Appian Report -->
<appian-report reportUrlStub="YOUR_REPORT_URL_STUB"></appian-report>
<!-- Example for embedding an Appian Task -->
<appian-task taskId="YOUR_TASK_ID"></appian-task> - Handle Events:
<!-- Add event listeners to Appian elements -->
document.querySelector('appian-task').addEventListener('submit', function(e) { console.log('Task submitted'); // Custom code to handle submission });
document.querySelector('appian-task').addEventListener('error', function(e) { console.error('Error:', e.detail); // Custom error handling }); - Add Configuration Management:
Implement a configuration system similar to the one demonstrated here to make your integration flexible and easily configurable.
Best Practices
- Error Handling:
Implement robust error handling to manage cases where Appian components fail to load or return errors.
- Responsive Design:
Ensure your embedded components are responsive and adapt to different screen sizes.
- Testing:
Always test your embedded interfaces in various browsers and environments to ensure consistent behavior.
Need Integration Assistance?
Our team of Appian experts can help you implement embedded interfaces in your applications.