Shapes by Omneo

Shapes

RewardBalance

Render a plain text representation of the customer's Omneo reward balance in dollars ($)

Setting Values Description
data-prefix string (any) Display value as prefix to reward balance
data-is-inline true false Display Shape container as inline element if true

PointBalance

Render a plain text representation of the customer's Omneo point balance

Setting Values Description
data-suffix string (any) Display value as suffix to point balance
data-is-inline true false Display Shape container as inline element if true

ProfileData

Render a plain text representation of a selected Omneo Profile value

Setting Values Description
data-key string (any) Displays Profile data by key. This can use dot (.) notation eg. joined_location.name or first_name
data-prefix true false Display value as prefix to profile data
data-suffix true false Display value as suffix to profile data
data-is-inline true false Display Shape container as inline element if true

TransactionList

Display a table displaying Omneo transaction data, including Order ID, Date, Location, Total and Items. Clicking / tapping a row will expand to display transaction line items. Transaction results are paginated to 10 results at a time, and the Shape will asynchronously fetch additional transactions as the user pages through results.

TransactionList

Setting Values Description
data-title string (any) false Override default "My Transactions" Shape title. Set to false to hide title
data-auto-hide-pagination true false When set to true, pagination will be hidden when all transactions are visible in one page

RewardList

Display a table displaying Omneo reward data, including Reward balance, names, expiry dates and remaining values. Reward results are paginated to 5 results at a time, and the Shape will asynchronously fetch additional rewards as the user pages through results.

RewardList

Setting Values Description
data-title string (any) false Override default "My Transactions" Shape title. Set to false to hide title
data-show-active-only true false When set to true, only currently active rewards will be displayed
data-auto-hide-pagination true false When set to true, pagination will be hidden when all transactions are visible in one page

CommsGroup

Display an toggle-able list of Omneo communication attributes. These attribtues are configured using a JSON setting field to allow full flexibility over what fields are shown, their titles and descriptions. This Shape updates profile attribute values asynchronously, as toggles are switched.

CommsGroup

Setting Values Description
data-title string (any) false Override default "My Transactions" Shape title. Set to false to hide title
data-fields JSON (required) Configure id, title and descriptions of fields to display

Configuring fields

The CommsGroup Shape takes an array of JSON objects, including the id, title and description for each field to render. This id references the value found in the Omneo profile's comms attributes.

Here is an example JSON configuration

[
    {
      "id": "email_promo", 
      "title": "News and offers", 
      "description": "Find out what`s happening"
    }
]

This would be minified for use as the data-attributes value and the single quote in what's would be replaced with a backtick (`)

<div 
    data-omneo-shape="CommsGroup"
    data-fields='JSON [{"id": "email_promo","title": "News and offers", "description": "Find out what`s happening"}]'
></div>

StatusList

Display a list of Profile Statuses with configurable icon, title and description

StatusList
Setting Values Description
data-title string (any) false Override default "My Statuses" Shape title. Set to false to hide title
data-mapping JSON (required) Configure visible statuses, with handle, title, icon and description

Configuring fields

The StatusList Shape takes an array of JSON objects, including the handle, title, description and icon_url for each field to render. This handle references the value found in the Omneo profile's statuses array. Only handles included in the data-mapping config will be displayed.

Here is an example JSON configuration

[
    {
      "handle": "staff", 
      "title": "Store Staff", 
      "description": "As a staff member, you have access to the newest products, exclusive events and more",
      "icon_url": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6"
    }
]

← Implementation →