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

`setUp(appId: number): Promise`

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í“.

`setTags(tags: Array<Tag>): Promise`

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>

`removeTags(tags Array:<String>): Promise`

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>

`getTags(): Promise`

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

`Tag`

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

`showOwnBanner(banner: Banner, onConfirm: ?Function = undefined, onRefuse: ?Function = undefined, sendStats: Boolean = true)`

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>

`closeBanner()`

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í

`isPushMessagingSupported():boolean`

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>

`getNotificationPermission():string`

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>

`askPermissionAndResolve():Promise`

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>

`loadSubscriberId():?string`

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>

`setOnSubscribe(onSubscribe: function):void`

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

`showPushMessageNow(title: String, pushMessage: ): void`

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>

Dokumentace

JS API

Implementace

Inicializace

`setUp(appId: number): Promise`

Práce s tagy

`setTags(tags: Array<Tag>): Promise`

Argumenty:

Přehled chybových kódu, které může metoda vrátit:

Příklad

`removeTags(tags Array:<String>): Promise`

Argumenty:

Příklad

`getTags(): Promise`

Příklad

Objekty

`Tag`

Vlastní banner

`showOwnBanner(banner: Banner, onConfirm: ?Function = undefined, onRefuse: ?Function = undefined, sendStats: Boolean = true)`

Argumenty:

Příklad

`closeBanner()`

Příklad

Odebírání push notifikací

Zobrazení push zprávy

`showPushMessageNow(title: String, pushMessage: ): void`

Příklad použití

Pomohl vám tento článek?

Děkujeme za zpětnou vazbu.

Hodmocení

Hodmocení

Rest API ← Kam dál? →