Demo Channel: Toast action types
Our 'Toast action types' demo channel sends toasts with content made up of eight toast elements combined into one: a text block, email, SMS, URL, a second text block, callback, spacer and a closing text block. We break down the different elements below.
Note: the alert at the top is not part of the toast content - it is the toast alert. The toast alert is the push notification message that subscribers receive. This is automatically added as a headline at the top of the toast.
The text block
Text is shown with the type set to 'text' and the text you want to show set in 'text'. You can optionally set a text style by setting the style to one of 'headline', 'subhead', 'body' or 'footnote'. The default style is 'body'.
In this example we use three text blocks. The first at the top with 'body' style, the second after the URL with 'footnote' style and the third at the bottom also with a 'body' style. All three shown in the code below.
{ type: "text", style: "body", text: "A demonstration toast showcasing text, email, sms, url, callback and spacer toast types." }
{ type: "text", style: "footnote", text: "Acknowledge receipt" }
{ type: "text", style: "body", text: "End of demo toast" }The email action
Email actions are shown with the type set to 'email'. You must set the to field to the email address. You can provide multiple email addresses by separating each address with a comma in the to field. There are three optional fields you can set: title, subject and body.
- title provides a title message above the email address.
- subject the default subject for the email.
- body the default body content for the email.
{ type: "email", title: "Email us", to: "support@toastworx.com", subject: "Toast test email", body: "Please contact us for help" }The SMS action
SMS actions are shown with the type set to 'sms'. You must set the to field to the telephone number of the recipient of the SMS. You can provide multiple telephone numbers by separating each number with a comma in the to field. There are two optional fields you can set: title and body.
- title provides a title message above the SMS telehone number.
- body the default body content for the SMS.
{ type: "sms", title: "Text us", to: "+442071234567", body: "Toast test SMS" }The URL link
URLs are shown with the type set to 'url'. You must set the url field to the URL link. There is an optional title field you can set to show a text string above the url.
{ type: "url", title: "Our website", url: "https://www.toastworx.com" }The Callback action
Callback actions are shown with the type set to 'callback'. There are two required fields for callbacks. The titles field contains an array of up to four strings. These are the string labels for the callback buttons. The identifiers field contains and array with the unique identifiers you want to use for the action, set as a string. When a customer presses the callback button we make a POST request to the callbackURL for your account. The payload we send includes the identifier so you can identify which action occurred. We also send account, channel, toast and subscriber identifiers.
{ type: "callback", titles: ["Acknowledged"], identifiers: ["1"] }The spacer
Spacers help make the toast look beautiful by letting you adjust the gaps between different toast elements. The type is set to 'spacer' and you provide an optional height for the spacer in pixels. Defaults to 10 pixels.
{ type: "spacer", height: 20 }Bringing it all together
All of the elements of the toast are combined into an array and this is set as the toast content.
const content = [
{ type: "text", style: "body", text: "A demonstration toast showcasing text, email, sms, url, callback and spacer toast types." },
{ type: "email", title: "Email us", to: "support@toastworx.com", subject: "Toast test email", body: "Please contact us for help" },
{ type: "sms", title: "Text us", to: "+442071234567", body: "Toast test SMS" },
{ type: "url", title: "Our website", url: "https://www.toastworx.com" },
{ type: "text", style: "footnote", text: "Acknowledge receipt" },
{ type: "callback", titles: ["Acknowledged"], identifiers: ["1"] },
{ type: "spacer", height: 20 },
{ type: "text", style: "body", text: "End of demo toast" }
];A full toast also includes the toast alert which is the push notification message that subscribers see as well as an optional sound set to one of the sounds ('bell 1', 'bell 2', 'buzz', 'claps', 'glitch', 'klaxon', 'oops', 'register', 'toaster 1', 'toaster 2' or 'yippee'). The complete toast for the toast action types demo channel is below. POST to /channels/{channelUUID}/toasts with this as the POST body:
//POST body
{
alert: "Friday's toast types demo",
sound: "yippee",
content: [
{ type: "text", style: "body", text: "A demonstration toast showcasing text, email, sms, url, callback and spacer toast types." },
{ type: "email", title: "Email us", to: "support@toastworx.com", subject: "Toast test email", body: "Please contact us for help" },
{ type: "sms", title: "Text us", to: "+442071234567", body: "Toast test SMS" },
{ type: "url", title: "Our website", url: "https://www.toastworx.com" },
{ type: "text", style: "footnote", text: "Acknowledge receipt" },
{ type: "callback", titles: ["Acknowledged"], identifiers: ["1"] },
{ type: "spacer", height: 20 },
{ type: "text", style: "body", text: "End of demo toast" }
]
};Example Javascript code
Here's an example of how you could create this toast using Javascript. If you want to use this code make sure to change {your-api-key} to your API key and {channelUUID} to one of your channels.
const body = {
alert: "Friday's toast types demo",
sound: "yippee",
content: [
{ type: "text", style: "body", text: "A demonstration toast showcasing text, email, sms, url, callback and spacer toast types." },
{ type: "email", title: "Email us", to: "support@toastworx.com", subject: "Toast test email", body: "Please contact us for help" },
{ type: "sms", title: "Text us", to: "+442071234567", body: "Toast test SMS" },
{ type: "url", title: "Our website", url: "https://www.toastworx.com" },
{ type: "text", style: "footnote", text: "Acknowledge receipt" },
{ type: "callback", titles: ["Acknowledged"], identifiers: ["1"] },
{ type: "spacer", height: 20 },
{ type: "text", style: "body", text: "End of demo toast" }
]
};
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer {your-api-key}'
};
fetch('https://api.toastworx.com/channels/{channelUUID}/toasts',
{
method: 'POST',
headers: headers,
body: JSON.stringify(body)
})
.then(function(res) {
return res.json();
}).then(function(body) {
console.log(body);
});Subscribe to this channel
To subscribe to this channel scan the QR code below in the ToastWorx app.
