|
|
| (168 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>
| |
| | |
| ==Settings==
| |
| Namespace: io.ox/core
| |
| Path: upsell/enabled
| |
| | |
| <pre class="language-javascript">
| |
| // get all capabilities that can trigger upsell
| |
| require('settings!io.ox/core').get('upsell/enabled');
| |
| </pre>
| |
| | |
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
| |
| | |
| Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
| |
| | |
| [[Category:AppSuite]]
| |
| [[Category:UI]]
| |