diff --git a/UsabillaSampleApp/.gitignore b/UsabillaSampleApp/.gitignore index 2dcac0b..b406b03 100644 --- a/UsabillaSampleApp/.gitignore +++ b/UsabillaSampleApp/.gitignore @@ -11,3 +11,5 @@ plugins/ # res resources/signing +resources/android/ +resources/ios/ diff --git a/UsabillaSampleApp/README.md b/UsabillaSampleApp/README.md index 7369a14..5dde1ca 100644 --- a/UsabillaSampleApp/README.md +++ b/UsabillaSampleApp/README.md @@ -2,17 +2,26 @@ # Usabilla for Cordova -## Resource Generator +Demonstrates how to use the usabilla cordova plugin. + +## Getting Started + +This project is a starting point for a Cordova application. + +### Create Cordova Application +For help getting started with Cordova and to setup a new app [online documentation](https://cordova.apache.org/#getstarted). + +### Resource Generator This tool will crop and resize JPEG and PNG source images to generate icons and splash screens for modern devices. `cordova-res` was developed to be used with Cordova, but Capacitor and other native runtimes are supported. -### Install +#### Install ```bash $ npm install -g cordova-res ``` -### Usage +#### Usage To generate resources with all the default options, just run: @@ -26,4 +35,124 @@ $ cordova-res $ cordova-res ios ``` -Otherwise, if `config.xml` exists, `cordova-res` will look for platforms (e.g. ``) and generate resources only for the configured platforms. \ No newline at end of file +Otherwise, if `config.xml` exists, `cordova-res` will look for platforms (e.g. ``) and generate resources only for the configured platforms. + +### Add Platform + +- To add native platforms like android & ios , just run: + +```bash +$ cordova platform add android ios +``` + +### Add Usabilla plugin + +- To add the Usabilla SDK into your Cordova application, just run: + +```bash +$ cordova plugin add usabilla-cordova --save +``` + +### Setup SDK + +- Update Configurations to run sample app +``` js + +``` +``` js +/// Usabilla Configuration +const appId = 'YOUR_APP_ID_HERE'; +const formId = 'YOUR_FORM_ID_HERE'; +let event = 'YOUR_EVENT_TAG_HERE'; +const customVariable = {'YOUR_KEY_HERE': 'YOUR_VALUE_HERE'}; +``` + +### Functions + +- Initialize the SDK and set custom variables for targeting campaigns +``` +initialize → String appId , Object customVariable +``` +``` js + const customVariable = {'YOUR_KEY_HERE': 'YOUR_VALUE_HERE'}; + Usabilla.initialize(function() {}, function (err) {}, appId, customVariable); +``` +- Show the passive form and return a JSON Object containing the results - rating, pageIndex and sent flag +``` +loadFeedbackForm → String formId +``` +``` js + Usabilla.loadFeedbackForm(function() {}, function (err) {}, formId); +``` +- Load the passive form with the current screen captured and return a JSON Object containing the results - rating, pageIndex and sent flag +``` +loadFeedbackFormWithCurrentViewScreenshot → String formId +``` +``` js + Usabilla.loadFeedbackFormWithCurrentViewScreenshot(function() {}, function (err) {}, formId); +``` +- Load the campaign and return a map containing the results - rating, pageIndex and sent flag +``` +sendEvent → String event +``` +``` js + Usabilla.sendEvent(function() {}, function (err) {}, event); +``` +- Reset campaign data, so they can be triggered again from a fresh count +``` +resetCampaignData() +``` +``` js + Usabilla.resetCampaignData(function() {}, function (err) {}); +``` +- Dismiss the currently visible form +``` +dismiss() +``` +``` js + Usabilla.dismiss(function() {}, function (err) {}); +``` +- Set data masking based on passed/default rules using a passed/default character for obfuscation +``` +setDataMasking → Array masks, String character +``` +``` js + const masks = 'YOUR_Masking_Regex'; + const maskCharacter = 'YOUR_Masking_Character'; + Usabilla.setDataMasking(function() {}, function (err) {}, masks, maskCharacter); +``` +- Return the array of default masking rules +``` +getDefaultDataMasks() +``` +``` js + Usabilla.getDefaultDataMasks(function() {}, function (err) {}); +``` +- Store form(s) in memory to be used in offline mode +``` +preloadFeedbackForms → List formIds +``` +``` js + Usabilla.preloadFeedbackForms(function() {}, function (err) {}, formIds); +``` +- Remove cached forms stored for offline use +``` +removeCachedForms() +``` +``` js + Usabilla.removeCachedForms(function() {}, function (err) {}); +``` +- Set debug mode to enable logging on console of Usabilla SDK errors and informations +``` +setDebugEnabled → Boolean debugEnabled +``` +``` js + Usabilla.setDebugEnabled(function() {}, function (err) {}, debugEnabled); +``` +- Set filename used for localization `[Available only for iOS]` +``` +loadLocalizedStringFile → String localizedStringFile +``` +``` js + Usabilla.loadLocalizedStringFile(function() {}, function (err) {}, localizedStringFile); +``` \ No newline at end of file diff --git a/UsabillaSampleApp/www/css/index.css b/UsabillaSampleApp/www/css/index.css index 17f9c1d..b272927 100644 --- a/UsabillaSampleApp/www/css/index.css +++ b/UsabillaSampleApp/www/css/index.css @@ -16,106 +16,140 @@ * specific language governing permissions and limitations * under the License. */ -* { - -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ -} -body { - -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ - -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ - -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ - background-color:#E4E4E4; - background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); - background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); - background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%); - background-image:-webkit-gradient( - linear, - left top, - left bottom, - color-stop(0, #A7A7A7), - color-stop(0.51, #E4E4E4) - ); - background-attachment:fixed; - font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; - font-size:12px; - height:100%; - margin:0px; - padding:0px; - text-transform:uppercase; - width:100%; -} + @font-face { + font-family: 'MiloOT'; + src: url('../fonts/MiloOT-Text.otf'); + } -/* Portrait layout (default) */ -.app { - position:absolute; /* position in the center of the screen */ - top:30px; - height:50px; /* text area height */ - width:100%; /* text area width */ - text-align:center; - padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */ -} + @font-face { + font-family: 'MiloOT-Bold'; + src: url('../fonts/MiloOT-Bold.otf'); + } -/* Landscape layout (with min-width) */ -@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { - .app { - background-position:left center; - padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ - margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ - /* offset horizontal: half of image width and text area width */ - } -} + @font-face { + font-family: 'MiloOT-Medi'; + src: url('../fonts/MiloOT-Medi.otf'); + } -h1 { - font-size:24px; - font-weight:normal; - margin:0px; - overflow:visible; - padding:0px; - text-align:center; -} - -.event { - border-radius:4px; - -webkit-border-radius:4px; - color:#FFFFFF; - font-size:12px; - margin: 10px auto; - padding:2px 0px; - max-width: 200px; -} - -.event.listening { - background-color:#333333; - display:block; -} - -.event.received { - background-color:#4B946A; - display:none; -} - -@keyframes fade { - from { opacity: 1.0; } - 50% { opacity: 0.4; } - to { opacity: 1.0; } -} - -@-webkit-keyframes fade { - from { opacity: 1.0; } - 50% { opacity: 0.4; } - to { opacity: 1.0; } -} - -.blink { - animation:fade 3000ms infinite; - -webkit-animation:fade 3000ms infinite; -} - -.event.received.formDetails { - padding: 20px 20px; - display: inline-block !important; - max-width: 600px; - background-color: transparent; -} + body { + background-image: url('../img/background.png'); + background-size: 100%; + } + + /* Can be used to apply style over whole page div + .app { + //text-align:center; + } + */ + .ub-title { + height: 192px; + width: 272px; + color: #00A5C9; + font-family: "MiloOT-Bold"; + font-size: 55px; + font-weight: bold; + letter-spacing: 0; + margin-left: 30px; + margin-top: 30px; + line-height: 65px; + } + + .ub-group { + text-align:center; + margin-top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + } + /* Can be used to apply style over form div + .show-form { + // text-align: center; + } + */ + .show-form .btn{ + color: #FFFFFF; + font-family: "MiloOT-Medi"; + font-size: 19px; + font-weight: 500; + letter-spacing: 0; + line-height: 19px; + border-radius: 2px; + background-color: #00A5C9; + width: 334px; + height: 48px; + } + /* Can be used to apply style over event div + .event-group { + // text-align: center; + } + */ + + .show-event { + padding-top: 40px; + } + .show-event .event-input{ + color: #A6B5C3; + font-family: "MiloOT"; + font-size: 19px; + letter-spacing: 0; + line-height: 19px; + box-sizing: border-box; + height: 48px; + width: 186px; + padding-left: 16px; + margin-right: 16px; + border: 1px solid #C8D2DA; + border-radius: 2px; + background-color: #FFFFFF; + } + .show-event .btn{ + color: #00A5C9; + font-family: "MiloOT-Medi"; + font-size: 19px; + font-weight: 500; + letter-spacing: 0; + text-align: center; + box-sizing: border-box; + height: 48px; + width: 130px; + border: 1px solid #00A5C9; + border-radius: 2px; + background-color: #FFFFFF; + } + + .reset-event { + padding-top: 16px; + } + .reset-event .btn{ + color: #00A5C9; + font-family: "MiloOT-Medi"; + font-size: 19px; + font-weight: 500; + letter-spacing: 0; + line-height: 19px; + text-align: center; + box-sizing: border-box; + height: 48px; + width: 334px; + border: 1px solid #00A5C9; + border-radius: 2px; + background-color: #FFFFFF; + } + + .footer { + position: fixed; + bottom: 0; + margin-bottom: 40px; + width: 100%; + text-align: center; + } + + .footer img { + height: 50px; + width: 83px; + } diff --git a/UsabillaSampleApp/www/fonts/MiloOT-Bold.otf b/UsabillaSampleApp/www/fonts/MiloOT-Bold.otf new file mode 100644 index 0000000..64192ca Binary files /dev/null and b/UsabillaSampleApp/www/fonts/MiloOT-Bold.otf differ diff --git a/UsabillaSampleApp/www/fonts/MiloOT-Medi.otf b/UsabillaSampleApp/www/fonts/MiloOT-Medi.otf new file mode 100644 index 0000000..8f7a6bc Binary files /dev/null and b/UsabillaSampleApp/www/fonts/MiloOT-Medi.otf differ diff --git a/UsabillaSampleApp/www/fonts/MiloOT-Text.otf b/UsabillaSampleApp/www/fonts/MiloOT-Text.otf new file mode 100644 index 0000000..8b6af26 Binary files /dev/null and b/UsabillaSampleApp/www/fonts/MiloOT-Text.otf differ diff --git a/UsabillaSampleApp/www/img/background.png b/UsabillaSampleApp/www/img/background.png new file mode 100644 index 0000000..363efc4 Binary files /dev/null and b/UsabillaSampleApp/www/img/background.png differ diff --git a/UsabillaSampleApp/www/img/footer.png b/UsabillaSampleApp/www/img/footer.png new file mode 100644 index 0000000..65603a3 Binary files /dev/null and b/UsabillaSampleApp/www/img/footer.png differ diff --git a/UsabillaSampleApp/www/img/logo.png b/UsabillaSampleApp/www/img/logo.png deleted file mode 100644 index 9519e7d..0000000 Binary files a/UsabillaSampleApp/www/img/logo.png and /dev/null differ diff --git a/UsabillaSampleApp/www/index.html b/UsabillaSampleApp/www/index.html index 7a1cce0..d209835 100644 --- a/UsabillaSampleApp/www/index.html +++ b/UsabillaSampleApp/www/index.html @@ -37,24 +37,27 @@
-

Usabilla SDK

- -
- - -
-
- - -
-
- +
Usabilla Cordova Demo App
+
+
+ +
+
+
+ + +
+
+ +
+
+
+ +
+ diff --git a/UsabillaSampleApp/www/js/config.js b/UsabillaSampleApp/www/js/config.js new file mode 100644 index 0000000..e3450b3 --- /dev/null +++ b/UsabillaSampleApp/www/js/config.js @@ -0,0 +1,33 @@ + + /* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +/// Usabilla Configuration +// Replace appId with your usabilla app id. +const appId = 'YOUR_APP_ID_HERE'; +// Replace FormId with your usabilla form id. +const formId = 'YOUR_FORM_ID_HERE'; + +/// To use event from here at initEvent line #87 at index.js +/// Don't put anything into inputbox event will be overriden. +// Replace event with your usabilla campaign event tag created for targeting specific Campaign. +let event = 'YOUR_EVENT_TAG_HERE'; + +// Replace custom variable with your usabilla custom variable created for targeting specific Campaign.. +const customVariable = {'YOUR_KEY_HERE': 'YOUR_VALUE_HERE'}; diff --git a/UsabillaSampleApp/www/js/index.js b/UsabillaSampleApp/www/js/index.js index 547ad30..bfaccd0 100644 --- a/UsabillaSampleApp/www/js/index.js +++ b/UsabillaSampleApp/www/js/index.js @@ -23,7 +23,6 @@ var app = { this.initForm(); this.initEvent(); this.initResetCampaign(); - this.receivedEvent('deviceready'); }, // deviceready Event Handler @@ -31,59 +30,34 @@ var app = { // Bind any cordova events here. Common events are: // 'pause', 'resume', etc. onDeviceReady: function() { - this.receivedEvent('deviceready'); this.initApp(); }, - - setButtonsDisabled: function(disabled) { - Array.prototype.forEach.call (document.querySelectorAll('button'), function (item) { - item.disabled = disabled; - } ); - }, - - // Update DOM on a Received Event - receivedEvent: function(id) { - var parentElement = document.getElementById(id); - var listeningElement = parentElement.querySelector('.listening'); - var receivedElement = parentElement.querySelector('.received'); - - listeningElement.setAttribute('style', 'display:none;'); - receivedElement.setAttribute('style', 'display:block;'); - }, - initApp: function() { - this.setButtonsDisabled(true); var self = this; - var appId = "{YOUR_APP_ID_HERE}"; - var customVars = { - type: 'premium' - }; Usabilla.initialize( - function() { - self.setButtonsDisabled(false); - }, - function () { - self.setButtonsDisabled(false); + function(res) { + console.log('Init - ',JSON.stringify(res)); + }, + function (err) { + console.log('Init - ',JSON.stringify(err)); }, appId, - customVars - ) + customVariable + ); }, initForm: function() { var self = this; var sendFeedback = document.getElementById("feedback-button"); sendFeedback.onclick = function() { - self.setButtonsDisabled(true); - var formId = document.getElementById("form-id").value; if (!formId) { alert("Input a form id to submit"); } else { Usabilla.loadFeedbackForm( - function() { - self.setButtonsDisabled(false); + function(res) { + console.log('Form - '+JSON.stringify(res)); }, - function () { - self.setButtonsDisabled(false); + function (err) { + console.log('Form - '+JSON.stringify(err)); }, formId); } @@ -93,14 +67,13 @@ var app = { var self = this; var resetEvent = document.getElementById("reset-button"); resetEvent.onclick = function() { - self.setButtonsDisabled(true); Usabilla.resetCampaignData( - function() { - self.setButtonsDisabled(false); + function(res) { + console.log('Reset - '+JSON.stringify(res)); + }, + function (err) { + console.log('Reset - '+JSON.stringify(err)); }, - function() { - self.setButtonsDisabled(false); - } ); }; }, @@ -109,21 +82,23 @@ var app = { var sendEvent = document.getElementById("event-button"); sendEvent.onclick = function() { var eventId = document.getElementById("event-id").value; - self.setButtonsDisabled(true); - if (!eventId) { + if (eventId !== "") { + event = eventId; + } + if (!event) { alert("Input an event id to submit"); } else { Usabilla.sendEvent( - function() { - self.setButtonsDisabled(false); + function(res) { + console.log('Event - '+JSON.stringify(res)); }, - function () { - self.setButtonsDisabled(false); + function (err) { + console.log('Event - '+JSON.stringify(err)); }, - eventId); + event); } } } }; -app.initialize(); \ No newline at end of file +app.initialize();