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>

Pomohl vám tento článek?

Rest API ← Kam dál? →