OX6:OX6-Upsell

Upsell Gui

Introduction

The Open-xchange Upsell packages provide the ability to show the OX user advertisements for different OX features which are only available when he upgrades his account to a higher level of access rights like "Groupware" or "Mobility". It also enables hosting companies to easily integrate their online shopping system into Open-Xchange to directly sell features without actually leaving the Open-Xchange application / Gui. The upsell layer window will be shown if the user clicks on a deactivated feature like calender/infostore etc.

We have implemented 3 different types of upsell possibilities:

• Show the Upsell Layer window and trigger the upgrade via a generated email
• Show the Upsell Layer window and open a configurable URL including all needed parameters after the user clicked "buy" or "trial.
• Directly display a configurable URL/Online SHOP (systemwide or/and per context configurable) within the upsell Layer window instead of standard OX upsell content

The upsell layer has full i18n (EN and DE are included) support integrated and offers following components for advertisement:

• Text
• Video
• Screenshots

to promote a certain feature for Open-Xchange.

Installation

• Download and install following OX upsell packages from the corresponding repository:

open-xchange-upsell-multiple
open-xchange-upsell-multiple-gui

After installation of these packages, you have installed one server side plugin and one gui-plugin. If you have dedicated apaches running in your setup, only install the "open-xchange-upsell-multiple-gui" package on them. The upsell layer is now available to ALL contexts/users of this OX application server/gui instance.

Configuration

Once installed, all nessecary configuration can be done in one single file. This file can be found at the following directory on the OX application server:

/opt/open-xchange/etc/groupware/upsell.properties

Switching between the 3 different types of the upsell layer, edit parameter:

com.openexchange.upsell.multiple.method=

Possible values: "direct", "static" or "email".

direct = Redirect within IFRAME immediately to parameter "com.openexchange.upsell.multiple.method.static.shop_redir_url" or to the context specific URL value after clicking one of the upsell triggers.

static = Redirect AFTER clicking a button within the shipped OX Upsell pages to parameter "com.openexchange.upsell.multiple.method.static.shop_redir_url" or to the context specific URL value after clicking one of the upsell triggers.

email = Send email to specific address AFTER clicking a button within the shipped OX Upsell pages

Defining the redirect URL for method "static" and "direct" for all contexts which are not specially provisioned, edit parameter:

com.openexchange.upsell.multiple.method.static.shop_redir_url=

Example:

http://shop.host.tld/store?src=ox&user=_USER_&userid=_USERID_&mail=_MAIL_&login=_LOGIN_&imaplogin=_IMAPLOGIN_&clicked_feat=_CLICKED_FEATURE_&lang=_LANG_&cid=_CID_

As you can see from the example, the server side upsell plugin will replace all placeholders (_USER_ , _USERID_ etc.) with the data from the users OX session while he is logged into OX. You can use following parameters in this URL:

"_USER_"
"_USERID_"
"_MAIL_"
"_LOGIN_"
"_IMAPLOGIN"
"_CLICKED_FEATURE_"
"_UPSELL_PLAN_" - Not in use.
"_CID_"
"_LANG_"
"_PURCHASE_TYPE_" - Only used if email or static method is used due to the OX upsell layout/buttons
"_INVITE_" - User checked "invite my friends" checkbox in upsell box

Adding new feature (e.g. video, screenshot)

• Open register.js (located in gui folder)
• Search for upsell.config.features
• add the following code ( description inline )

featurename: {
  name: ["trigger element"],
  title: _("upsell window title"),
  product_name: _("feature headline"),
  intro: _("upsell description text"),
  list: {
    list_item_1:  _("enumeration"),
    list_item_2:  _("enumeration"),
    list_item_3:  _("..."),
  },
  outro: _("upsell text that shows at end"),
  videos: {
    video_1: {
      thumb: "name_of_video_thumbnail.png",
      video: "name_of_video_file.swf"
    }
  },
  images: {
    image_1: {
      thumb: "name_of_image_thumbnail.png",
      image: "name_of_lightbox_image.png"
    }
  },
  buttons: {
    trial: {
      content: _("buttonlabel"),
      action: "put javascript actions here if any"
    },
  },
  checkboxes: {
    invite:{
      content: _("checkboxlabel"),
      action: "put javascript actions here if any"
    }
  }
},

• after the feature is implemented you should create the nessacarry files and place them as follow

-templates
--_featurename
---- language ( for example de_DE )
-------- flash ( for videos )
-------- img ( for images )

Load required js/cs files

• to load additional files open register.js and add the following code

upsell = {
  files: {
    jss: {
      name: {
        script: "name.js",
      },
    },
   css: {
     name: "name.css",
   },
 },
}

• add name.js to jss/name.js
• add name.css to css/name.css

Change look and feel (e.g. branding, colors and sizes)

• you should edit the existing css located in /var/www/ox6/plugins/com.openexchange.upsell.multiple.gui/css/upsell.css
• you can add / edit background in /var/www/ox6/plugins/com.openexchange.upsell.multiple.gui//img

Possible triggers

modules/calendar/freebusy
modules/calendar/team
modules/calendar/mini_calender
modules/calendar/new/add_participants
modules/calendar/new/remove_participants
modules/calendar/new/add_attachment
modules/calendar/new/delete_attachment
modules/contacts/new/add_attachment
modules/contacts/new/delete_attachment
modules/mail/save_to_infostore
modules/infostore/send_as_attachment
modules/infostore/send_as_link
modules/infostore/mail/save_to_infostore
modules/tasks/new/add_participants
modules/tasks/new/remove_participants
modules/tasks/new/add_attachment
modules/tasks/new/delete_attachment
configuration/mail/accounts/new
modules/folders/users

modules/infostore
modules/calender
modules/contacts
modules/mail
modules/portal
modules/tasks
modules/configuration

modules/outlook
modules/mobility