AppSuite:Upsell tools

Revision as of 15:30, 17 December 2013 by Tierlieb (talk | contribs) (The Upsell Widget)

Synopsis: This article introduces several ways of promoting applications and other upgrades for App Suite. Sine Upsell is usually very customer specific, we do only provide the framework.

The Upsell Widget

The Upsell widget is a widget displayed on the portal. It can show images, text or combinations thereof. A widget can contain several "slides". A click on the widget starts the Upsell Wizard. There can be more than one Upsell Widget (just remember not to annoy your customer with too many!). Upsell widgets can be moved, but not removed from the portal.

The Upsell Widget needs two different configurations:

     plugin: "plugins/portal/upsellads/register"
     type: "upsellads"
     index: 0
       index: true
       ad: "openexchangeAdvertisement"

This part defines a widget as protected. This is not upsell-specific, it is an option for every kind of portal widget. The upsell-specific part is the value of "props/ad", which identifies the content via the name "openexchangeAdvertisement". That name points to another part of the YAML file that looks like this:

   delayInMilliseconds: 10000
     upsellWizard: "shop"
           type: text-bottom
           image: 'https://image1'
           text: 'Awesome stuff'
           type: text-top
           image: 'https:image2'
           text: 'More awesome stuff'

What you can see here is that an advertisement consists of several slides. Due to some peculiarities of the App Suite YAML parser, you have to name them "slide?" with a number. They will be sorted alphabetically, so if you plan to use more than 10 slides, remember to pad the number with enough zeros, the first slide being 00, the second being 01.

Slides can be provided in different languages. This example provides slides only for en_US. The slides need to match the user language exactly (sorry, no smart guessing so that British users with en_UK get the en_US version). The system defaults to en_US when no appropriate language can be found.

The delayInMilliseconds represents the transition time from one slide to the next.

The text can contain HTML and is inserted via the innerHtml method of JQuery in case you feel the need for markup.

The value of "image" is put into the src attribute of an <img/;gt; element, so you can use a local path as well as a URL.

The type can be one of text-top, text-bottom, text-only and image-only. Text usually takes up a third of an ad that also contains an image. Text and image are cut off in case they exceed the space.

The Upsell Bubbles

Upsell bubbles are little popups based on hopscotch, similar to the guided tours. They show up after a given amount of time and point to a defined UI element to display some text. Clicking on them starts the Upsell Wizard (unless you click "cancel", of course).

The Upsell Wizard

The Upsell Wizard is a small shopping cart application that displays things that can be sold. They process is the usual three-step process of putting items in your cart, reviewing them and ordering them. Upon completion the Wizard calls an URL with the ordered items as well as the shoppers's ID and context number. It is left to the provider to implement some handler for that.

Making all of it work

The configuration for all three elements is done in YAML instead of JavaScript, assuming that most users of this feature are not developers but from marketing or sales departments. They will probably need starting help from a sysadmin, though, as by default, the whole Upsell process is disabled two-fold:

  • The configuration file is not deployed. To do so, one needs to create one in the settings subfolder of the server configuration. This is usually /opt/openexchange/etc/settings. And example can be found in the UI folder as upsell-examples.yml
  • The capability is not enabled. It is called "upsell" and, well, needs to be enabled.

After that, a server restart (necessary for every config change, sorry!) and some hard refreshing to get rid of eventual caching artefacts, you are good to go!