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

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
Edit
Slot: top Slot: left Slot: right Slot: bottom

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

<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
Edit
top bottom

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, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, 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
Edit

Hey now!

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

<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, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, 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, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, 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, chart-bar, check, check-circle, check-solid, chevron-down, chevron-left, chevron-right, chevron-up, close, close-circled, close-open, close-solid, cloud, co-browse, communications, copy-to-clipboard, credit-card, customer-decision-hub, customer-onboarding, customer-service, data-integrations, documentation, download, email, energy, entertainment, exclamation, exit-full-screen, external-link, eye, eye-off, face-happy, face-sad, 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
Edit

WIP

Edit
How Pega technology resolves

Simple Steps


Shadow DOM – yes:☝️ no:👇


How Pega technology resolves

Simple Steps

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
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
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.
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
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”?
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