Welcome
Design Principles
For Developers
For Designers
Extending
Writing Guidelines
Color
Icon
Text
General
Overview
Tabs
Form
Card
Editor
Iframe
Basic Grid
Flex Grid
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Action List
Upgrade
Order
Field
Input Group
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Numberinput
Textarea
Upload
Select
Multiselect
Datetime
Slider
Criteria
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Ring
Compare
Notification
Progress
Spinner
Validator
Tooltip
Checklist
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Widget
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
CSS Utility Classes
Flipper Service
Config
Authentication Token
Translation
Tracking
Redesign
Numeric
Time
Iframe Loader
Release Notes

Upgrade Components

Usage

The component is not part of the main ui framework, You should include additional files to use it in production:

<script src="https://redirector.eservice.emarsys.net/upgrade-recommender-client/latest/app.js"></script>

and in staging:

<script src="https://redirector-staging.eservice.emarsys.com/upgrade-recommender-client/latest/app.js"></script>

It's included by default in Suite.

Accordion

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-upgrade-accordion

<e-upgrade-accordion type="upsell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-accordion>
<e-upgrade-accordion type="upsell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-accordion>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

Variations

Cross sell
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="cross-sell"] crs-upgrade

<e-upgrade-accordion type="cross-sell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <crs-upgrade product="mobileEngage"></crs-upgrade>
  </e-upgrade-action>
</e-upgrade-accordion>
<e-upgrade-accordion type="cross-sell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <crs-upgrade product="mobileEngage"></crs-upgrade>
  </e-upgrade-action>
</e-upgrade-accordion>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

Button

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-upgrade-button

<e-upgrade-button type="upsell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-button>
<e-upgrade-button type="upsell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-button>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

Variations

Cross sell
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="cross-sell"] crs-upgrade

<e-upgrade-button type="cross-sell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <crs-upgrade product="mobileEngage"></crs-upgrade>
  </e-upgrade-action>
</e-upgrade-button>
<e-upgrade-button type="cross-sell">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <crs-upgrade product="mobileEngage"></crs-upgrade>
  </e-upgrade-action>
</e-upgrade-button>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

With image
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
> e-upgrade-image

<e-upgrade-button type="upsell">
  <e-upgrade-image>
    <img src="https://place-hold.it/300x110/E9EDF2/051C33&amp;text=300x110&amp;fontsize=20">
  </e-upgrade-image>
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-button>
<e-upgrade-button type="upsell">
  <e-upgrade-image>
    <img src="https://place-hold.it/300x110/E9EDF2/051C33&amp;text=300x110&amp;fontsize=20">
  </e-upgrade-image>
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-button>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

Label

Default

Copy Pug
Copy HTML
Open in playground
Show code
Hide code
e-upgrade-label

<e-upgrade-label type="upsell" package="advanced">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
<e-upgrade-label type="upsell" package="advanced">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

Variations

Cross sell
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[type="cross-sell"] crs-upgrade

<e-upgrade-label type="cross-sell" package="advanced">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <crs-upgrade product="mobileEngage"></crs-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
<e-upgrade-label type="cross-sell" package="advanced">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <crs-upgrade product="mobileEngage"></crs-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

Max AI
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
[package="max-ai"]

<e-upgrade-label type="upsell" package="max-ai">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
<e-upgrade-label type="upsell" package="max-ai">
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

With image
Copy Pug
Copy HTML
Open in playground
Show code
Hide code
> e-upgrade-image

<e-upgrade-label type="upsell" package="advanced">
  <e-upgrade-image>
    <img src="https://place-hold.it/300x110/E9EDF2/051C33&amp;text=300x110&amp;fontsize=20">
  </e-upgrade-image>
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
<e-upgrade-label type="upsell" package="advanced">
  <e-upgrade-image>
    <img src="https://place-hold.it/300x110/E9EDF2/051C33&amp;text=300x110&amp;fontsize=20">
  </e-upgrade-image>
  <e-upgrade-content>
    Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.
  </e-upgrade-content>
  <e-upgrade-action>
    <ups-upgrade product="mobileEngage"></ups-upgrade>
  </e-upgrade-action>
</e-upgrade-label>
JavaScript
Copy JavaScript
Get to know more about your whole customer lifecycle to boost conversions and retention with ADVANCED and MAX AI.

API Reference e-upgrade-accordion

Properties

NameDescriptionTypeRequiredDefault value
keyIf set, accordion saves its state. It should be unique.string
typeDefines the type of the component. It can be 'upsell' or 'cross-sell'.string
closedSets and gets state.booleanfalse

Events

EventDescriptionReturns
beforecloseFires before accordion starts to close.
afteropenFires after accordion is opened.

API Reference e-upgrade-label

Properties

NameDescriptionTypeRequiredDefault value
typeDefines the type of the component. It can be 'upsell' or 'cross-sell'.string
packageDefines the package string of the component. It can be 'advanced' or 'max-ai'.string

API Reference e-upgrade-button

Properties

NameDescriptionTypeRequiredDefault value
typeDefines the type of the component. It can be 'upsell' or 'cross-sell'.string