An "add to homescreen" pop-up feature.

This tool wil display a popup on the second day a use visits your site, it will suggest the user that he can add it to his homescreen note: this is a mobile feature.

Getting started

Lets start by installing the package, like most of the other package we will make use of NPM

npm install @orange-games/add-to-homescreen --save-dev

Now lets call get the tool in our project.

import Homescreen from '@orange-games/add-to-homescreen';

At last let's call the feature!

new Homescreen('popup', {
    storage_name: "homescreen",
    title: "title",
    stepChrome: "step 1 chrome",
    stepSafari: "step 1 safari",
    step2: "step 2"
});

note: all those parameters are REQUIRED

And done, it's that simple!

The styles are not included in this tool. Here are the style elements used. (SASS format)

popup {
    /* Basic styling of the popup */
    .title-container,
    .text-container {
        /* The container elements (basic styling like padding etc.) */
        p {
        	/* This is for the icons of the respective browser */
            &.chrome {
                &:after {
                    /* Chrome icon */
                }
            }
            &.safari {
                &:after {
                    /* Safari icon*/
                }
            }
        }

    }
    .title-container {
        /* The title style (Things like background-color, font color etc.) */
        /* It is recommended to use display: flex; for this */
        h3 {
            /* The actual text */
        }
        button {
            /* This is the little close button. */
            &:before {
                /* Close icon */
            }
        }
    }
    .text-container {
        /* Style for the steps (Things like background color etc.) */
        p {
            /* Style for the text + icon */
        }
    }
}