- Gain time by using the library
- "Step 1" customization possibilities : Using the Alertbox
- "Step 2" customization possibilities : Using your own HTML creation
Gain time by using the library
When you start implementing our Web Push technology on your website, a major thing to think through is your AlertBox scenario, and its design customization. Some people want to have full control of this part. That's why we created a very modulable system to adapt to your own thinking, but we also propose a turnkey solution for quick integrations
You can access this demo page to see an example of the library's integration
Otherwise, this page intends to explicit some common use cases about the optout-to-optin customization.
"Step 1" customization possibilities : Using the Alertbox
Accengage offers by default the possibility to use our pre-made Alertbox that can be displayed :
- Automatically when a user arrives on the website (set the push plugin "scenario" option to "showAlert", click here for more informations)
- At a specific moment decided by the developers with the method `push:showAlert` (click here to see how this command can be used in your pages)
The different themes
It is possible to choose a theme for the Alertbox in the Configuration JSON. To do so, use the content object "theme". Technically, changing theme will only alter the CSS file that is injected but the code architecture of the Alertbox HTML div will not change.
No CSS is included.
Don't forget to create your own CSS rule for the modifier class .acc--hidden (with a "display: none" for example)
The debug mode
When you modify the JSON configuration as presented below, the changes will take 30 mins to be live on your website. Using the debug mode allows you to see the modifications directly. To use the debug mode, refer to the documentation: Website#UsingtheDebugMode
Simple customization of the Alertbox in the configuration JSON
To modify the JSON conf, go to Settings -> Manage Applications -> Edit your app with the pencil
When you play the video, click on HD to enhance video quality
In the configuration JSON in the interface, you have 3 different content fields that you can modify:
Further customization by adding your own CSS
Alertbox HTML Structure
Example 1: Modifying pre-existing Light theme.
We saw before that themes are simply CSS properties added to your page when the plugin is loaded. You can override a few properties with your own CSS files.
|Simple design modification|
Example 2 : Fresh start from the blank theme
When you choose the blank theme, the HTML structure of the Alertbox is appended to the DOM but NO CSS is added.
You can then add your own CSS file without having to override already existing properties.
"Step 2" customization possibilities : Using your own HTML creation
The previous part was explaining how you could use our pre-made Alertbox to invite your visitors to receive your notifications. This part is designed to make you understand that you can trigger the Step2 with using it.