Our documentation is changing, please click here to enjoy it!

Skip to end of metadata
Go to start of metadata


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.

 

ModernCustom

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:

  • Misc : to change the HTML contained in the misc section
  • Deny : to change the HTML contained in the deny section
  • Accept : to change the HTML contained in the Accept section
Modification examples 
Simple text changing example  Expand source

 

 

Add HTML to add a logo  Expand source

 

 

 


Further customization by adding your own CSS

 

You can easily add your own javascript file to override the CSS properties included in the plugin. Please find below 2 cases where CSS files have been added to modify the esthetics of the Alertbox

 

Alertbox HTML Structure

 

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
Css addition

 

 

 

 

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.

 

For example
Css addition  Expand source

 

 

 

"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.

Here are a few examples where you would want to use your own HTML creation, thanks to the use the library method "launchLandingOnClick".

 

 

  • No labels