|
|
(166 intermediate revisions by 8 users not shown) |
Line 1: |
Line 1: |
− | =Upsell=
| + | <!-- !!! --> |
| + | <!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation --> |
| + | <!-- !!! --> |
| | | |
− | The OX Upsell packages provide the ability to show advertisements to end-users who are just using a free service like "Webmail". It gives hosting companies the possibility to take advantage of offering and selling premium OX services via in-app upsell technology.
| |
| | | |
− | When a free-mail user clicks on a premium feature like "OX Files" an upsell dialog is shown where the missing feature can be advertised via text, screenshots, and/or videos. Based on your specific configuration, the user can request a free trial period and/or directly buy the feature within the upsell dialog with one simple click. The customer never has to leave the application to upsell as it's a seamless in-app upsell.
| + | The content on this page has moved to http://oxpedia.org/wiki/index.php?title=AppSuite:OX_Upsell |
− | | |
− | It is also possible for hosting companies to easily integrate their own online shop into OX Upsell.
| |
− | | |
− | ==Events==
| |
− | | |
− | Whenever the user starts an app or clicks on an inline-action, a capability-check is performed internally. For example, all inline actions have native support for such checks:
| |
− | | |
− | <pre class="language-javascript">
| |
− | new Action('io.ox/calendar/detail/actions/sendmail', {
| |
− | capabilities: 'webmail',
| |
− | action: function (baton) {
| |
− | // send mail
| |
− | }
| |
− | });
| |
− | </pre>
| |
− | | |
− | Assuming the end-user does not have "webmail" (for example in a files-only setup), a proper event is fired:
| |
− | | |
− | <pre class="language-javascript">
| |
− | // if any action misses a capability
| |
− | ox.trigger('upsell:requires-upgrade');
| |
− | // which provides the following data for apps:
| |
− | {
| |
− | type: "app",
| |
− | id: "io.ox/mail/main",
| |
− | missing: "webmail"
| |
− | }
| |
− | // and for inline-actions:
| |
− | {
| |
− | type: "inline-action",
| |
− | id: "io.ox/calendar/detail/actions/sendmail",
| |
− | missing: "webmail"
| |
− | }
| |
− | </pre>
| |
− | | |
− | This event should open an upsell dialog like this:
| |
− | | |
− | <pre class="language-javascript">
| |
− | function showUpgradeDialog(e, options) {
| |
− | require(['io.ox/core/tk/dialogs'], function (dialogs) {
| |
− | new dialogs.ModalDialog({ easyOut: true })
| |
− | .build(function () {
| |
− | this.getHeader().append(
| |
− | $('<h4>').text('Upgrade required')
| |
− | );
| |
− | this.getContentNode().append(
| |
− | $.txt('This feature is not available.'),
| |
− | $.txt('You need to upgrade your account now.'),
| |
− | $.txt(' '),
| |
− | $.txt('The first 90 days are free.')
| |
− | );
| |
− | this.addPrimaryButton('upgrade', 'Get free upgrade');
| |
− | this.addButton('cancel', 'Cancel');
| |
− | })
| |
− | .setUnderlayStyle({
| |
− | opacity: 0.70,
| |
− | backgroundColor: '#08C'
| |
− | })
| |
− | .on('upgrade', function () {
| |
− | ox.trigger('upsell:upgrade', options);
| |
− | })
| |
− | .on('show', function () {
| |
− | ox.off('upsell:requires-upgrade', showUpgradeDialog);
| |
− | })
| |
− | .on('close', function () {
| |
− | ox.on('upsell:requires-upgrade', showUpgradeDialog);
| |
− | })
| |
− | .show();
| |
− | });
| |
− | }
| |
− | | |
− | function upgrade(e, options) {
| |
− | console.debug('upgrade', options);
| |
− | alert('User decided to upgrade! (global event: upsell:upgrade)');
| |
− | }
| |
− | | |
− | ox.on('upsell:requires-upgrade', showUpgradeDialog);
| |
− | | |
− | /* | |
− | * convention: 'upsell:upgrade' is used to trigger final upsell
| |
− | * the current user and user_id can be found in global variables ox.user and ox.user_id
| |
− | */
| |
− | ox.on('upsell:upgrade', upgrade);
| |
− | | |
− | </pre>
| |
− | | |
− | Hint: For simple demo purposes, you can enable an internal upsell configuration by appending "&demo=upsell" to the URL. Needs to reload page, of course.
| |
− | | |
− | ==Settings==
| |
− | The upsell configuration is located in namespace "io.ox/core", path is "upsell/enabled". Example:
| |
− | | |
− | <pre class="language-javascript">
| |
− | // get all capabilities that can trigger upsell
| |
− | require('settings!io.ox/core').get('upsell/enabled');
| |
− | // contains data like this
| |
− | {
| |
− | infostore: true,
| |
− | portal: true,
| |
− | tasks: true
| |
− | }
| |
− | </pre>
| |
− | | |
− | [[Category:AppSuite]]
| |
− | [[Category:UI]]
| |