micro journey docs

Micro Journeys

A collection of Web Components for animated storytelling

See a demo of the Micro Journeys with Editor in a full page

character docs

Character Docs

Usage

  <bolt-character size="small"></bolt-character>

Schema

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
size *

Character Size.

 string small
  • small, medium, large
characterImage

Pre-defined package image.

 string customer-happy
  • customer-happy, customer-neutral, customer-sad, customer-surprise, pega-rep, u-comm-plus, custom
characterCustomUrl

URL of a custom image.

 string https://www.fillmurray.com/g/200/200
  • —
useIcon

Use a bolt-icon in place of an image Url.

 boolean —
  • —

Slots

Name Requred? Description
top No
right No
bottom No
left No

character

Edit
Slot: top Slot: left Slot: right Slot: bottom

character kitchen sink

I'm a small character

Slot: left Slot: right Slot: bottom

I'm a medium character

I'm a large character

Bill is due!

connection docs

Connection Docs

<bolt-connection size="small"></bolt-connection>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
speed

Speed of the animation, typically rotation.

 string 1000
  • —
animType

Type of predefined animated SVG to use.

 string connectionBand
  • connectionBand or tripleConnectionBand
direction

Direction of animation, currently only available on Connection Band

 string left
  • left or right

connection

Edit
top bottom

status dialogue bar docs

Status Dialogue Bar Docs

<bolt-status-dialolgue-bar size="small"></bolt-status-dialolgue-bar>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
iconName

Icon name.

 string —
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
isAlertMessage

Is this an alert message? Changes it to error red.

 boolean false
  • —
dialogueArrowDirection

Direction of the dialogue arrow direction.

 string none
  • up, down, left, right, none

status dialogue bar

Edit

Hey now!

status dialogue bar kitchen sink

Bill almost due

Bill almost due

Bill almost due!! Take action now before this text wraps to another line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolores fuga in ipsum minus modi nihil nulla odit recusandae sapiente! Aspernatur inventore minima nobis odio reprehenderit? Aliquam laudantium quos repudiandae.

Up Arrow

Down Arrow

Left Arrow

Right Arrow

icon group docs

Icon Group Docs

<bolt-icon-group icon-one-name="eye" icon-two-name="eye" icon-three-name="eye" icon-color="teal"></bolt-icon-group>

Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.

Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
iconOneName

Name of first icon.

 string eye
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
iconTwoName

Name of second icon.

 string eye
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
iconThreeName

Name of third icon.

 string eye
  • NULL, academy, add-open, add-solid, agile, app-development, app-exchange, arrow-left, asset-data, asset-infographic, asset-interactive, asset-link, asset-media, asset-podcast, asset-presentation, asset-text, asset-video, bolt-logo-colored, brand-operations, calendar, careers, case-management, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, facebook, facebook-solid, field-service, field-service-gray, filter, financial, full-screen, github, global, government, healthcare, hospitality, industries, info-open, info-solid, insurance, integration, intelligent-virtual-assistant, java, knowledgebase, launchpad, life-sciences, linkedin, linkedin-solid, lock, manufacturing, map-pin, map-pin-solid, marketing, marketing-gray, menu, minus-open, minus-solid, mobility, more, omni-channel, partners, pencil, platform, podcast, print, product, product-delivery, refresh, reporting, retail, robo-auto, sales-automation, scalability, search, share, star-solid, support, system-admin, training, transportation, twitter, twitter-solid, unlock, upload, user, user-interface, video, vision, warning, watch, workforce-intelligence, youtube-solid
iconColor

Color of all icons.

 string teal
  • —
iconBackgroundColor

Background color of all icons.

 string white
  • —

icon group

Edit

WIP

micro journeys solo

Edit
How Pega technology resolves

Simple Steps

Shadow DOM – yes:☝️ no:👇

How Pega technology resolves

Simple Steps

micro journeys

Edit
How Pega technology resolves Company

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

Customer To avoid costly calls to your service center (and keep customers happy), you need 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 If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

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?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

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?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half Company

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

Customer To avoid costly calls to your service center (and keep customers happy), you need 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 If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

Shadow DOM – yes:☝️ no:👇

How Pega technology resolves Company

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

Customer To avoid costly calls to your service center (and keep customers happy), you need 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 If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

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?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

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?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half Company

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

Customer To avoid costly calls to your service center (and keep customers happy), you need 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 If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action Proactive customer service. Streamlined billing inquiries. Start delivering all of this and more with Pega Customer Service™.
Explore our industry-leading software
Learn more about intelligent guidance
Sign up for an upcoming demo

step 1 demo

Edit
Company

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

Customer To avoid costly calls to your service center (and keep customers happy), you need 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

Shadow DOM – yes:☝️ no:👇

Company

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

Customer To avoid costly calls to your service center (and keep customers happy), you need 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

step 2 demo

Edit

Why is my bill so high? Let me check.

Customer billing view If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

Shadow DOM – yes:☝️ no:👇

Why is my bill so high? Let me check.

Customer billing view If the billing issue is due to new fees and charges, the customer can log in and easily see what’s changed, thanks to Pega’s customer self-service view.

step 3 demo

Edit

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

Shadow DOM – yes:☝️ no:👇

Customer is 79% likely to call
about their bill.

Company

Offer to waive late fee.

Customer Use Pega’s AI-powered propensity modeling to determine the appropriate offer that gives your customer resolution she needs – without having to call your service center. See this in action

step 4 demo

Edit

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?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

Shadow DOM – yes:☝️ no:👇

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?

If a customer does pick up the phone, your agents will be ready. Pega provides a detailed view of charges over time, and self-learning adaptive models guide agents with scripts. That way they can always take the next best action for both your customer and your business. What do we mean by “next best action”?

step 5 demo

Edit

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half

Shadow DOM – yes:☝️ no:👇

Thanks for being a valued customer!

Thanks so much for waiving my late fee!

When your customers’ billing issues are resolved quickly, you see results. Think higher customer satisfaction, fewer repeat calls, and lower average handle time (AHT). Find out how Cisco cut AHT in half