Features configuration

Determines the functionality and appearance of Online Ordering components. Selections can be made using the following modes:

  • In CP Channel Config interface
  • On Web integration
    • as a data attribute attached to #zuppler-menu placeholder.
      data-feature-a="value" data-feature-b-value
    • from URL using feature query string.
  • On Native App using configuration function. E.g.
          feature-a: "value", 
          feature-b: true,
    Features that are configured in CP Channel Config have higher specificity and will override those defined on the integration page



  • false [boolean] default - If enabled, user management is handled by the host application and Zuppler won't render the User Icon in toolbar.


  • false [boolean] default - If enabled users will be automatically cleared when they will land on order confirmation page


  • true [boolean] default - Show item quantity picker and qty display across the app

Configure how the navigation bar buttons are aligned

  • normal standard behavior
  • right all buttons are on the right except for the back button


Defines the display type for time selection screen

  • standard default - ASAP - TODAY - TOMORROW - OTHER
  • compact ASAP - SCHEDULE


  • all default - All configured loyalty providers are enabled
  • none No discounts or coupons will be made available
  • simple default - full page menu
  • drilldown categories are visible on the first screen, and then items as a secondary screen
  • sidebar Menus & Categories are displayed on the left side of the menu

Controls how the main integration view is rendered

  • simple default - Shows only the menu and toolbar
  • cart Shows the menu on the left and cart on the right and the special configuration toolbar at the top
  • cartfull Shows the menu on the left and cart with order info on the right


Configure how prices are shown on the menu page

  • default - Will only display the first price
  • range Will display min and max prices
  • priority Display the price of the size that is listed first
  • none Prices are not visible in menu page


Configures image quality for menu items

  • standard default - Use medium resolution image quality
  • high Use high resolution image

Determine how discounts are displayed in Menu Page

  • standard default - Standard discounts
  • none Discounts will not show


Defines quick add behavior

option quick add quick add collapse customize customize collapse
none no no no no
relaxed* yes yes yes yes
always-relaxed yes yes yes yes
strict yes no no no
inline yes no no no

Always relaxed setting is the same as relaxed but will apply even if the user clicks on the item name



  • standard default - modifiers on the left side, image with description, selections and actions on the right
  • builder full page image with editable summary on the right side


  • simple default option - list of modifiers with options
  • squares Modifiers with list of pictures. Falls back to standard version
  • plus - Same as squares but with circles


  • true [boolean] enable special instructions on item


Overrides quick-add mode for expanding/collapsing non required modifiers

  • quick-add default - Follows quick add mode
  • collapsed Non required modifiers will show as collapsed
  • expanded All modifiers will show as expanded


  • 250 [number] limit item comments to maxlength chars


Defines how options can be selected when max selection is reached on a modifier

  • snake default option - automatically uncheck older choices
  • fixed uncheck a choice manually in order to select another



  • true [boolean] Skip cart configuration when the menu is initially loaded


  • true [boolean] Enable Dashboard Saved Orders and Save Cart functionality


  • true [boolean] Consider street level addresses as valid delivery address (no house number is required)


  • false [boolean] Disable address lookup restriction to bounds around restaurant locations


  • false [boolean] If enabled this will make the cart render the custom fields read only and make the cart flow configure the custom fields having each set on its own page.


  • true [boolean] Enable Special Instructions on Cart


  • 250 [number] limit cart comments to maxlength chars

Orders Features


  • false [boolean] Display receipt & payment details in Order Confirmation and Dashboard


  • true [boolean] Display Restaurant review form and item rating buttons in Order Confirmation



  • false [boolean] Prevents ordering from restaurants that are currently closed


  • false [boolean] Paused restaurants will also be included with the portal results


  • true [boolean] Saves & restore last opened restaurant when the portal page is reloaded


Service ids to be supported by portal, separated by commas



Multiple selector for available cuisines


Time types available in portal


Configure navbar appearance in portal page

  • standard default
  • none


Displays how the restaurant name is showing in site

  • single default - The portal is featuring same restaurant with multiple locations
  • multi The portal features multiple restaurants


Controls how the breadcrumb is displayed

  • simple default - Shows the restaurant name and back button
  • details Show extra information about the restaurant in breadcrumb


  • [number] Min time to order ahead in hours


Slices are separated by | and their syntax is SliceName followed by size on desktop and mobile in square brackets ([6,12]) and then followed by eventually configuration in round brackets. The size param represents the number of columns to span on a flexible grid of 12 columns. If the size is defined as an underscode _, that slice will not render for the specified breakpoint.


Search[6,12](address,cuisine,name)  // Span 6 columns on desktop, 12 on mobile
Cuisines[4,_]                       // Span 4 columns on desktop, does not render on mobile

Slices followed by exclamation sign ! are required. Listing results are not displayed untill all required slices are filled in. Eg


Here's how the following slices configuration renders on both breakpoints: Service[4,12]|Address[8,10]|Cuisines[6,_]|Go[6,2]|Restaurants[12,12]

|  Service  |         Address         |
|   [4,12]  |          [8,10]         |
|     Cuisines    |         Go        |
|      [6,_]      |       [6,2]       |
|             Restaurants             |
|               [12,12]               |

|               Service               |
|                [4,12]               |
|           Address           |   Go  |
|            [8,10]           | [6,2] |
|             Restaurants             |
|               [12,12]               |

Available slices:

  • Spacer - this does not render anything but an empty space
  • Search - this is omni complete from various sources. Sources can be as follows:

    • Address - will search for an address for pickup or delivery. This will also use user saved addreses on search
    • Cuisines - will search for a cuisine from default configured per locale
    • Name - will search for restaurants matching on name
    • Location - will search for address. This will also include user saved addresses. The diference to Address is that it will not filter addresses for pickup or location.

      If there is just one source specified the source search criteria will be used as a placeholder for value when the component reloads

  • Address - this will only allow entering an address.

  • Service - this will allow selecting between services Pickup or Delivery
  • Cuisines - inline cuisine selector
  • CuisinesDropdown - dropdown cuisine selector
  • DietaryPreferences - renders the Dietary Preferences filter as a dropdown
  • Time - this will allow filtering on time
  • Go - shows the portal search button. If Go slice is configured, the portal won't show any results until this button is pressed. Accepts label as config: Go[0,0](Search Restaurants)
  • Restaurants - this will display the results. Configuration options:
    • Compact - this should be used for small one brand portals where we use the address for title
    • Large - this is portal view where restaurant with logo and everything else is visible.
  • Map - this will display the results on a map
    • MapStyled (default) - use theme colors
    • MapUnstyled - use default Google colors
  • MapRestaurants - display results map and restaurants as 2 columns
    • Accepts Restaurants and Map slices config (see above) separated by comma
    • Eg: MapRestaurants[12,12](Compact,MapUnstyled)
  • Queries - this is helpful in conjunction with Search with multiple sources as it will display all search conditions and also allow for query removal

Customizing the Theme

  • colors-background
  • colors-lowContrast
  • colors-midContrast
  • colors-highContrast
  • colors-brand
  • fonts-body
  • fonts-heading
  • fonts-deco

Colors can be defined hex or rgb formats.

Custom Icons

data-icon-A="B" replaces all icons of name A with B. Icon name can be any from https://material.io/tools/icons

EG. data-icon-shopping_cart='local_mall'

Custom SVG Paths

  • data-icon-A="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" replaces all icons of name A with a custom SVG Path. Custom Icons can be added as SVG Path via data-attributes in integration config for web, and via App Config in Native integrations. The following example will replace the cart icon with a circle:


data-icon-local_mall: "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"


"icon-local_mall": "M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z"

The SVG path should render corrently within a 24/24 points viewport:

<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="currentColor" d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2Z" />

External Render Containers

Allows rendering of different components in external DOM elements. The following ID's are available:

  • zuppler-navigation-left
    • zuppler-navigation-back
    • zuppler-navigation-cart
    • zuppler-navigation-discounts
    • zuppler-navigation-search
  • zuppler-navigation-right
    • zuppler-navigation-user
    • zuppler-navigation-dashboard

Custom notification delays

Overrides application defined timeouts for notifications. Accepted types: info, warning, error

EG. data-notification-delays="error:0|info:10000"

Custom Translations

Define a function and return custom translations.

    function _zupplerCustomTranslations(locale) {
        return {
            "item.actions.create": "Add to bag",
            "item.instructions.placeholder": "Who is this for?",

results matching ""

    No results matching ""