JS API
Implementace
Předtím, než začnete JS API používat, je potřeba zaregistrovat se do Vilf.io, správně v administraci nastavit váš web a vložit do kořene URL vašeho webu soubor pro service worker. Podrobný návod naleznete zde.
Všechny metody – s výjimokou showPushMessageNow
– jsou pro stránky s HTTP i HTTPS protokolem stejné.
Inicializace
Pro inicializaci Vilf.io je potřeba zavolat setUp
s parametrem id aplikace.
Vždy vilf.io kód spouštějte pouze uvnitř VilfIo.push(()=>{
, ať máte jistotu, že je Vilf.io načtené.
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(()=>{
VilfIo.setUp(APP_ID).then(()=>{
// Vilf.io je inicializované zde
});
});
VilfIo.push(()=>{
// Vilf.io je inicializované zde
});
</script>
Práce s tagy
Ke každému uživateli lze přiřadit tag s hodnotou a datem expirace. Tagy slouží k přesnějšímu cílení a personalizaci push zpráv a k jejich automatickému spouštění. Ke každému uživateli lze přiřadit maximálně 30 tagů. Abyte mohli tagy používat, aktivujte si tarif „Maximální využití“.
Tato metoda slouží k přiřazení tagů k odběrateli. Pokud odběratel má již tag přiřazený, pomocí této metody dojde k jeho updatu. Pokud uživatel není odběratelem, tagy se uloží do localStorage
.
Jakmile se uživatel odběratelem stane, odešlou se tagy na server Vilf.io a přiřadí se. Při přiřazení tagu lze nastavit odeslání automatické notifikace. Více informací o tvorbě a nastavení automatických notifikací najdete zde.
Metoda vrací Promise
, jehož výsledkem je buď true
nebo číslo. Pokud uložení
proběhlo úspěšně,
je výsledkem hodnota true
. Pokud je výsledkem číslo, došlo při zpracování příkazu k chybě.
Argumenty:
Parameter | Typ | Hodnota |
---|---|---|
tags |
pole Tag objektů |
pole tagů, které chcete přidat. |
Přehled chybových kódu, které může metoda vrátit:
Hodnota | Význam |
---|---|
7 |
chyba při ukládání na straně Vilf.io, zkuste uložit znovu; pokud chyba přetrvává, kontaktujte podporu |
11 |
žádný tag nebyl přiřazen nebo je k uživateli je přiřazeno příliš mnoho tagů |
Příklad
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
// vložení tagu username a tagu haveSubscribe
VilfIo.setTags([
{
"tag": "username",
"value": "Petr22",
},
{
"tag": "haveSubscribe",
"expire": "2019-04-14T12:36:50+0200",
}
]).then((result)=>{
if(result===true){
console.log('Tagy byli přiřazeny.');
}
});
});
</script>
Slouží k odebrání přiřazených tagů. Při odstranění tagu lze nastavit odeslání automatické notifikace. Více informací o tvorbě a nastavení automatických notifikací najdete zde.
Vrací pole Promise
jeho výsledek je boolean
. Pokud uložení proběhlo úspěšně, je
výsledkem hodnota true
. Pokud nastavení neproběhne, vrátí se hodnota false
.
Argumenty:
Parameter | Typ | Hodnota |
---|---|---|
tags |
pole string | pole tagů, které chcete odstranit |
Příklad
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
// odebrání tagů username, haveSubscribe
VilfIo.removeTags(['username', 'haveSubscribe'])
.then((result)=>{
if(result===true){
console.log('Tagy byli smazány.');
}
});
});
</script>
Slouží k výpisu tagu odběratele. Metoda vrací Promise, jehož výsledek je pole Tag
objektů.
Příklad
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
// odebrání tagů username, haveSubscribe
VilfIo.getTags().then((tags) => console.log(tags));
});
</script>
Objekty
Parameter | Povinný? | Typ | Hodnota |
---|---|---|---|
tag |
ano | string | tag, který chcete přidat; maximální délka je 30 znaků |
value |
ne | string | nastavení push zprávy; maximální délka je 50 znaků |
expire |
ne | string obsahující datum a čas ve formátu ISO 8601, např.: 2019-07-11T20:06:53+02:00. | termín expirace tagu; jeho hodnota musí být vyšší, než je aktuální datum a čas |
Vlastní banner
Slouží k zobrazení vlastního banneru.
Argumenty:
Argument | Typ | Hodnota |
---|---|---|
banner |
Banner |
slouží k nastavení banneru – tento objekt získáte vytvořením banneru v administraci Vilf.io na stránce, která slouží k jejích tvorbě a editaci; pokud je zapnuté A/X testování, jde o stránku „skupina dotazů pro A/X testování“ (v menu pod záložkou „získávání odběratelů“, pokud A/X testování zapnuté není, jde o stránku „úprava dotazu pro odběr notifikací“ (v menu pod záložkou „získávání odběratelů“); nastavení, které se vypíše v konzoli, použijte jako parametr |
onConfirm |
funkce | ke spuštění funkce dojde po kliknutí na tlačítko odebrat |
onRefuse |
funkce | ke spuštění funkce dojde po kliknutí na tlačítko odebrat |
sendStats |
boolean | Pokud má proměnná hodnotu true , budou se odesílat statistiky o banneru |
Příklad
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
const banner = {"buttons":{"textAlign":"1","borderRadius":"3","position":"adjacent-c-a","exit":true,"apply":{"text":"Ok","border":"","background":"rgb(25%, 74%, 2%)","textColor":"rgb(96%, 96%, 96%)","textSize":"16"},"cancel":{"text":"Cancel","border":"","background":"rgb(51%, 51%, 51%)","textColor":"rgb(96%, 96%, 96%)","textSize":"12","enable":false}},"banner":{"overflow":"rgba(0%, 0%, 0%, 0.666)","background":"rgb(100%, 100%, 100%)","borderColor":"","borderSizer":"","type":"","position":"","backgroundUrl":"","width":"500","height":""},"footer":{"enable":false,"borderColor":"#ffffff","borderSizer":"","textColor":"rgb(100%, 100%, 100%)"},"text":{"text":"Own message","textColor":"rgb(20%, 20%, 20%)","textSize":"24"},"title":{"text":"Banner test","textColor":"rgb(20%, 20%, 20%)","textSize":"28"},"image":{"url":"","height":""},"image2":{"url":"https://vilf.io/assets/images/bannerExample/photo.png","height":"270"}};
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
// otevření banneru
VilfIo.showOwnBanner(banner, ()=>{console.log('Ok click');},()=>{console.log('Cancel click');});
// počká 15 sekund
setTimeout(()=>{
// zavření banneru
VilfIo.closeBanner();
}, 15000);
});
</script>
Slouží k zavření aktuálního banneru. Vrací Promise, jenž se dokončí po skončení animace, tedy v okamžiku, kdy lze otevřít nový dialog.
Příklad
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
// otevření banneru
VilfIo.showOwnBanner(banner).then(() => {
// počká 15 sekund
setTimeout(()=>{
// zavření banneru
VilfIo.closeBanner().then(() => console.log("Banner je zavřený!"));
}, 15000);
});
});
</script>
Odebírání push notifikací
Pokud jsou notifikace podporované, vrátí hodnotu true
. Pokud podporované nejsou, vrátí hodnotu false
.
Příklad použití
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
if (VilfIo.isPushMessagingSupported()) {
console.log('Push message jsou podporováné!');
} else {
console.log('Push message nejsou podporováné!');
}
});
</script>
Funguje jako Notification.permission, které lze navíc použít na webových stránkách s HTTP protokolem.
Příklad použití
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
const permission = VilfIo.getNotificationPermission();
console.log(permission)
});
</script>
Zobrazí nativní dotaz na odběr push notifikací a uloží odpověď.
Příklad použití
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
if (VilfIo.isPushMessagingSupported()) {
const permission = VilfIo.getNotificationPermission();
console.log(permission);
if(permission==='default'){
VilfIo.askPermissionAndResolve().then((result)=>{
if(result){
console.log('Uživatel se stal odběratelem!');
}
});
}
}
});
</script>
Vrátí id odběratele. Pokud uživatel není odběratelem, zobrazí hodnotu null
.
Příklad použití
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
console.log(VilfIo.loadSubscriberId());
});
</script>
Vloží do Vilf.io funkci, která se spustí po přihlášení k odběru notifikací s argumentem id odběratele.
Příklad použití
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
VilfIo.setOnSubscribe((subscribeId)=>{
console.log(subscribeId);
});
});
</script>
Zobrazení push zprávy
Ihned zobrazí push zprávu. Metoda má stejné parametry jako showNotification.
Příklad použití
<script type="text/javascript" src="https://vilf.io/api/api.js" async></script>
<script type="application/javascript">
var VilfIo = window.VilfIo || [];
VilfIo.push(() => {
VilfIo.setUp(APP_ID);
});
VilfIo.push(()=>{
VilfIo.showPushMessageNow('title', {body: 'ahoj'});
});
</script>