@orange-games/add-to-homescreen
v1.1.3
Published
Add to homescreen popup feature
Downloads
115
Readme
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 */
}
}
}