this package provide rewards integration of any existing system to integrate rewards and claim.
You can install this package using npm:
npm i ionic-gamification-testYou can install this package for lock rotation screen npm:
npm install @capacitor/screen-orientationimport {ScreenOrientation} from '@capacitor/screen-orientation';
1.create new page and import Gamification & pass config.
import package
import Gamification from "ionic-gamification-test";initialize config
const config = {
baseUrl: "https://thelogicalbanya.com/popupdemo/dashboard.php",
clientID: "demo",
key: "demo",
userID: "100031",
username: "TheLogicalBanya",
keyString: "bR5z6*r$00p#Eno__odrEgeW",
appId: 'app' /* pass div id in used index.html like <body> <div id="app"></div>< /body> */
utm_param1 :'' // optional parameters
utm_param2 :'' // optional parameters
utm_param3 :'' // optional parameters
utm_param4 :'' // optional parameters
style: {height: '100vh'} // optional parameters you can pass styles here height,width,left,zIndex,top
};
Gamification.init(config);open gamification
const openApp = async () => {
router.forward(`${route.path}?gamification=on`)
try {
await ScreenOrientation.lock({orientation: 'portrait'});
} catch (e) {
console.error(e.message)
}
await Gamification.run();
// for close gamification window
const divElement = document.querySelector('.close_btn');
divElement.addEventListener('click', async () => {
await gamification.close(divElement.dataset.id);
try {
await ScreenOrientation.unlock();
} catch (e) {
console.error(e.message)
}
});
isOpen.value = true;
}close gamification
const closeApp =async () => {
Gamification.close();
await ScreenOrientation.unlock();
}1.vue js
<template>
<ion-page>
<ion-content :fullscreen="true">
<div style="padding: 10px">
<IonButton @click="openApp" type="button" mode="md" color="primary">
IONIC Test
</IonButton>
</div>
</ion-content>
</ion-page>
</template>
<script setup>
import {IonButton, IonContent, IonPage} from '@ionic/vue';
import Gamification from "ionic-gamification-test";
import {ref} from "vue";
import {ScreenOrientation} from '@capacitor/screen-orientation';
Gamification.init({
baseUrl: "https://thelogicalbanya.com/popupdemo/dashboard.php",
clientID: "demo",
key: "demo",
userID: "100031",
username: "TheLogicalBanya",
keyString: "bR5z6*r$00p#Eno__odrEgeW",
appId: 'app', /* pass div id in used index.html like <body> <div id="app"></div>< /body> */
// style: {
// height: 'calc(100vh - 70px)',
// top: '70px',
// }
});
const isOpen = ref(false);
const openApp = async () => {
try {
await ScreenOrientation.lock({orientation: 'portrait'});
} catch (e) {
console.error(e.message)
}
await Gamification.run();
isOpen.value = true;
// for close gamification window
const divElement = document.querySelector('.close_btn');
divElement.addEventListener('click', async () => {
await Gamification.close(divElement.dataset.id);
isOpen.value = false;
try {
await ScreenOrientation.unlock();
} catch (e) {
console.error(e.message)
}
});
}
</script>
also you can pass another optional parameters
1.utm_param1
2.utm_param2
3.utm_param3
s4.utm_param4
style: {height: '100vh'} // optional parameters you can pass styles here height,width,left,zIndex,top
for example