Toggle light/dark theme Trigger Characters Animate In

Official Editor Starters

Company CTA Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Uh oh!

 To avoid costly calls to your service center (and keeping customers happy), you ned to stay one step ahead. That's why Pega's real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It's not mind-reading. It's signals

Why is my bill so high? Let me check.

Customer billing view I am text

Uh oh!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi atque consectetur delectus deserunt eaque exercitationem fugiat mollitia nobis nostrum, odit placeat, quae repudiandae, saepe sequi sint tempore ut velit. CTA text

Test constrainBottomSlot, overlapping bottom and right content can't overlap

Very long. Lorem ipsem text not too long.

Bill is due!

Bill is due!

Bill is due!

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

I'm a small character

Slot: left Slot: right Slot: bottom

I'm a medium character

I'm a medium character

I'm a medium character

I'm a large character

Bill is due!

I'm a large character. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Bill is due! Lots more text. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

I'm a large character

Bill is due!

lorem

Bill is due!

Bill is due!

Bill is due!

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Why is my bill so high? Let me check.

Customer billing view

Corporis expedita labore

Lorem ipsum dolor sit amet Company

You are about to reach your monthly data limit...

Customer

Customer is 79% likely to call about their bill.

Company

Offer to waive late fee.

Customer

You have a data roaming charge and a late fee. Would you like to waive the late fee?

Agent view of billing charges

Why is my bill so high?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

lorem

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer Company CTA Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Uh oh!

 To avoid costly calls to your service center (and keeping customers happy), you ned to stay one step ahead. That's why Pega's real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It's not mind-reading. It's signals

Why is my bill so high? Let me check.

Customer billing view I am text

Uh oh!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi atque consectetur delectus deserunt eaque exercitationem fugiat mollitia nobis nostrum, odit placeat, quae repudiandae, saepe sequi sint tempore ut velit. CTA text lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Short text.

Customer

Not very long. Lorem ipsum dolor.

lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer lorem

Very long. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Customer

Shadow DOM – yes:☝️ no:👇

Note: Shadow DOM-less content is not working properly when nested in a form element, some children are adding a broken Shadow DOM. To test Shadow DOM-less content you must manually set `export const hasNativeShadowDomSupport = false;` in `utils/environment.js` until this is fixed.
Debug Panel