Customizations
In this page we'll dive deeper into several aspects of our Web library that can be customized to match your needs.
Setting keys in code
Instead of relying on the applicationKey and applicationSecret in the config.json file, it is possible to set these in code.
var instance = $('body').notificare({
"appKey": "APPLICATION_KEY",
"appSecret": "APPLICATION_SECRET"
});Customizing UI for Actions
Actions of type Response with keyboard or camera will automatically present the user with UI, it's up to you to customize the look & feel of these interfaces. Add the following styles to your website:
.notificare-modal-bg{
position: fixed;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, .5);
right: 0px;
bottom: 0px;
}
.notificare-modal{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 680px;
height: 570px;
background: white;
padding: 20px;
text-align: center;
}
.notificare-image, .notificare-camera{
width: 640px;
height: 480px;
}
.notificare-text-area{
width: 640px;
height: 480px;
border: 1px solid grey;
border-radius: 5px;
outline: 0;
}
.notificare-send, .notificare-cancel, .notificare-capture-image, .notificare-close-modal{
display: inline-block;
padding: 8px;
color: white;
margin: 12px 5px 0 0;
}
.notificare-send, .notificare-capture-image{
background: green;
}
.notificare-close-modal, .notificare-cancel{
background: red;
}