SDK

Customizations

In this page we'll dive deeper into several aspects of our HTML 5 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.

1
2
3
4
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.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;
}