Message style guide
Contents
Rogerthat makes it possible to include your logo, brand, or company style in the messages you sent to users. This concept is called message branding.
Check the following message, once with and once without branding.
About Message Branding
Branding impacts how messages are visualized on the mobile devices or in the browser of Rogerthat recipients.
- A branding archive is packaged as a single zip file, as explained below.
- A branding archive contains an HTML-based look and feel for messages received on the mobile device, and HTML-based look and feel for messages received in a web browser.
- One or more branding archives can be uploaded upfront in the Service Panel. For each branding archive you will get a unique branding identifier.
- When you send a new message using the API, you can set the branding property. In this field you must put a unique branding identifier.
- When the message is received by the user (on mobile or in browser), it will be visualized using the look and feel defined in the branding.
Branding Archive Structure
Branding Archive Content
The toplevel folder of a branding archive must contain at least the following 2 files:
- branding.html contains the branding for mobile devices
- branding_web.html contains the branding for messages received in the browser
The branding files will be parsed by the Rogerthat software. When rendered, the following HTML tags are replaced inside the message content
- <span><nuntiuz_message/></span> will be replaced with the message text. Newlines inside the message text will be replaced with <br>
- <span><nuntiuz_timestamp/></span> will be replaced with the sender timestamp
The branding archive can optionally contain images and style sheets.
Do not create directories inside the branding archive.
Additional configuration of the mobile device look and feel is possible using meta tags in branding.html:
- <meta property=”rt:style:background-color” content=”#ffffff”/> will set the background color of the full screen around the message body (except for navigation bars)
- <meta property=”rt:style:show-header” content=”true”/> allows you to hide the header when a message is displayed. This way, the service logo, name and email address can be hidden. You should include identification of the sender in your branding.
- <meta property=”rt:style:color-scheme” content=”dark”/> will set the colorscheme of the header. When you have a dark background (e.g. black) you should use colorscheme dark. For a light background use light. This way, the text in the header is readable for the user.
Additional configuration of the web look and feel is possible using meta tags in branding_web.html head section:
- <meta property=”rt:style:background-color” content=”#ffffff”/> will set the background color of the box around the message
Restrictions
The parser will validate some restrictions on the branding files
- HTML templates must be encoded in UTF-8
- The HTML <head> section must contain the following tag
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/> - The HTML <head> section of branding_web.html must contain information on the background color of the rendered message. For example a white background will be realized with
<meta property=”rt:style:background-color” content=”#ffffff”/> - The HTML MUST NOT include or refer to other files from remote locations. ALL includes (CSS & images) must be packaged in the branding archive.
- The HTML MUST NOT contain links to remote websites.
- The following HTML tags are prohibited:
- <applet>
- <object>
- <script>
Branding HTML
We will create the branding.html and branding_web.html files for a fictitious Car Repair service. Apart from the two HTML files, we included a single image car_128.png in the branding.
Important parts in the branding files are highlighted in red:
- Content-Type must be set to UTF-8
- nuntiuz_message placeholder
- nuntiuz_timestamp placeholder
- Rogerthat background color property for in-browser messages (only for branding_web.html)
Scroll to the bottom of this page to see the example file content for branding.html and branding_web.html
Now we create the branding archive:
Carl-DHalluins-MacBook-Pro-2:branding carl$ ls -l total 48 -rwxr-xr-x@ 1 carl wheel 1109 Sep 26 14:40 branding.html -rwxr-xr-x@ 1 carl wheel 1172 Sep 26 14:40 branding_web.html -rw-r--r--@ 1 carl staff 12609 Sep 26 09:11 car_128.png Carl-DHalluins-MacBook-Pro-2:branding carl$ zip ../branding.zip * updating: branding.html (deflated 53%) updating: branding_web.html (deflated 53%) updating: car_128.png (deflated 0%) Carl-DHalluins-MacBook-Pro-2:branding carl$ shasum -a 256 ../branding.zip cc01398a6f61f73bdc6efc54c5ba9c5ca01907ef8752e5ddb798add6f8504b82
Next, go to the Service Control Panel and upload the branding archive:
Click the Preview button to check how your message will be visualized on a mobile phone:
You might want to modify your branding a couple of times, and check the preview each time. Once you are happy with the look and feel, you can start sending some real messages:
- The branding identifier is shown in the service control panel. It corresponds to the SHA-256 of your branding.zip archive
- In the example, the branding identifier is CC01398A6F61F73BDC6EFC54C5BA9C5CA01907EF8752E5DDB798ADD6F8504B82
- You can send a branded message by setting the branding field in the messaging.send API call:
POST /api/1/ HTTP/1.1 Content-type: application/json-rpc X-Nuntiuz-API-Key: your_secret_api_key { "method": "messaging.send", "params": { "parent_message_key": null, "message": "This is a test message", "answers": [ ], "sender_answer": null, "flags": 31, "alert_flags": 1, "members": [ "john@example.com" ], "branding": "CC01398A6F61F73BDC6EFC54C5BA9C5CA01907EF8752E5DDB798ADD6F8504B82", "tag": "37AAF801-CE21-4AC5-9F43-E8E403E1EB5F" }, "id": "CB9FBCB4-E099-43CA-810A-632A1CF60869" }
Here are some example screenshots of the resulting message received in-browser and on mobile device
on mobile device
branding.html for mobile phone
<html>
<!-- branding.html -->
<!-- Rogerth.at stylesheet for messages on mobile device -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta property="rt:style:background-color" content="#ffffff"/>
<meta property="rt:style:show-header" content="true"/>
<meta property="rt:style:color-scheme" content="light"/>
<style type="text/css">
body { background:#ffffff;
font-family:Arial; color:#333333;
font-family:Arial !important;
font-size:1em; }
#info { color:#00A8FF;
font-size:1.2em;
font-weight:bold;
text-align:right; }
#title { float:left;
color:#000000;
font-size:1.2em;
font-weight:bold; }
#footer { color:#777777;
font-size:0.8em;
font-style:italic; }
</style>
</head>
<body>
<div style="float:left;">
<img src="car_128.png"/>
</div>
<div id="info">
Tom's Car Repair<br>
23, High Street<br>
My Home Town<br><br>
+1 232 552 4152
</div>
<div style="clear:both;"/>
<div id="title">Appointment reminder</div>
<div style="clear:both;"></div>
<br><span><nuntiuz_message/></span><br><br>
<div id="footer">This message was sent
at <span><nuntiuz_timestamp/></span>.</div>
</body>
</html>
branding_web.html for in-browser messages
<html>
<!-- branding_web.html -->
<!-- Rogerth.at stylesheet for in-browser messages -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta property="rt:style:background-color" content="#ffffff"/>
<style type="text/css">
body { background:#ffffff;
font-family:Arial; color:#333333;
font-family:Arial !important;
font-size:1em; }
#info { color:#00A8FF;
font-size:1.2em;
font-weight:bold;
text-align:right;
float:right;
margin-right:1em;
margin-top:0.2em; }
#title { color:#000000;
font-size:1.2em;
font-weight:bold; }
#footer { color:#777777;
font-size:0.8em;
font-style:italic; }
</style>
</head>
<body>
<div style="float:right;">
<img src="car_128.png"/>
</div>
<div id="info">
Tom's Car Repair<br>
23, High Street<br>
My Home Town<br><br>
+1 232 552 4152
</div>
<div id="title">Appointment Reminder</div>
<br><span><nuntiuz_message/></span><br><br>
<div id="footer">This message was sent
at <span><nuntiuz_timestamp/></span>.</div>
</body>
</html>