Supercharge Your Website with Embedded Pega Workflows

Why existing approaches fall short?

For years, organizations have relied on various integration methods to add advanced workflow capabilities to their existing systems, with Pega web mashups representing one of the most widely adopted traditional approaches which provide a simple way to embed content from one domain into another. 

Pega Web mashups rely on iframe technology, an iframe acts as a self-contained window within a parent application, rendering the Pega UI and logic independently but creates significant limitations for modern applications. Although this iframe approach offers isolation between the embedded Pega content and the host page's JavaScript, HTML, and CSS elements, it introduces significant complexity that impacts user experience and system performance. 

The Pega Web mashup iframe architecture creates challenges with seamless keyboard navigation between outer content and embedded workflows, making it difficult to achieve the fluid, integrated experience users expect. Additionally, properly sizing the web mashup area to appear as a contiguous vertical space without scrollbars requires dynamic iframe dimension updates, adding technical complexity and potential points of failure. Users are forced to navigate between different interfaces, and these iframe drawbacks prevent organizations from delivering the smooth, integrated experiences that today's users expect.

Pega Web embed:  Your modern solution

Pega Web Embed represents a fundamental shift in how organizations can integrate workflow capabilities. Built on modern HTML5 web component technology, Web Embed allows you to embed Constellation workflows directly into your existing web applications using a simple <pega-embed></pega-embed> tag. This framework agnostic Web component technology fits well with modern JavaScript frameworks like React, Angular, and Vue which are built around reusable components, dynamic rendering, and seamless state management.

Unlike traditional mashup approaches, Web Embed doesn't rely on iframes for rendered content, providing better security, performance, and customization flexibility. This means you can maintain your brand identity and user experience while adding powerful Pega workflow capabilities exactly where your users need them.

When to use Web embed: Real-World scenarios that drive results

Create easy-to-use mini-journeys that use your current processes, allowing customers to complete complex tasks on their own in any industry. In financial services, this means customers can manage loan applications, account workflows, and compliance procedures directly on their bank's website. They gain control over their finances while the bank stays compliant and consistent with its brand. E-commerce businesses can use this idea to let customers handle orders, returns, refunds, and account interactions without leaving their shopping site, avoiding annoying redirects and giving customers direct control over their purchases. In customer service, this approach lets customers create cases, track progress, and interact with support agents within the company’s portal, giving them control over their service experience while support teams benefit from integrated tools. This approach reduces call center volume and boosts customer satisfaction with 24/7 service, transforming how businesses provide value by giving customers control over their success in every industry.

The Business value proposition

Faster Time to Market: Web Embed eliminates the need to rebuild existing applications. You can add new workflow capabilities in weeks rather than months, allowing you to respond quickly to market opportunities and customer needs.

Consistent User Experience: Maintain your brand identity and design system while adding powerful new capabilities. Users enjoy a seamless experience without the jarring transitions common in traditional integration approaches.

Reduced Development Costs: Leverage your existing technology investments while adding new capabilities. This approach typically reduces development costs by 60-80% compared to rebuilding applications from scratch.

Enhanced Customer Satisfaction: Provide integrated experiences that meet modern user expectations. Customers can complete complex processes without leaving your familiar interface, leading to higher completion rates and satisfaction scores.

How it works

Web Embed's power lies in its simplicity. The technology uses a straightforward web component approach that any web developer can implement:

<pega-embed

    action="https://community.pega.com/createCase"

    pegaServerUrl="https://your-pega-server.com/prweb"

    appAlias="YourApp"

    clientId="your-oauth-client-id">

</pega-embed>

This simple tag can handle multiple workflow actions including creating cases, opening pages, managing assignments, and retrieving next work items. The component automatically handles authentication, theming, and responsive design, adapting to your existing visual framework.

Flexible Authentication: Web Embed supports multiple authentication mechanisms including OAuth2 authorization code flow, client credentials, and custom bearer tokens. This flexibility ensures compatibility with your existing security infrastructure while maintaining enterprise-grade security standards.

Seamless Theming: The component automatically adapts to your existing design system through AppStudio's "Branding and Themes" functionality. You can specify platform themes like Self-Service or Aries, or provide custom theme JSON to match your exact brand requirements.

Event-Driven Integration: Web Embed provides comprehensive event hooks for advanced integration scenarios. Events like embedready, embedassignmentsubmission, and embedcaseclosed allow you to create sophisticated workflows that respond to user actions and system state changes.

Getting started with Web embed

Begin by identifying workflows that would benefit from embedding, looking for processes where users currently need to switch between systems or where you're experiencing high abandonment rates. Start with a simple use case like case creation or status checking, as this approach allows you to validate the technology and demonstrate value quickly while building internal expertise. Work with your team to configure OAuth2 authentication and establish the security framework, ensuring seamless integration with your existing identity management systems. Customize the embedded workflows to match your brand identity through Web Embed's theming capabilities, which ensure that embedded content feels native to your application. Once successful, gradually extend Web Embed to more complex scenarios, taking advantage of the technology's modular nature that makes it easy to add new capabilities incrementally.