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
let notificare = new 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;
}

Customizing text for UI

Some actionable notifications may contain text in its UI. By default all those texts will be in English. However you can customize it by passing the following values when instantiating the library:

1
2
3
4
5
6
7
8
9
10
11
12
let notificare = new Notificare({
	"UI": {
		"text": {
			"keyboard": "Type a reply",
			"next": "Next",
			"send": "Send",
			"cancel": "Cancel",
			"close": "Close",
			"camera": "Take a Picture"
		}
	}
});