Demo Channel: Wonderful World

Our 'Wonderful World' demo channel sends toasts with content made up of four toast elements combined into one: an image, text block, a map and a spacer. 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.

Demo channel 1

The image

Images are set in one of two ways. The simplest way is to set the type to 'image' and provide an url which links to the image you want to show. In this way the toast is showing an image hosted by you.

                  
{ type: "image", url: "https://s3-eu-west-1.amazonaws.com/toastworx.images/amanwana.jpg" }

The second way is for you to send us the image data and we host it for you. To do this you send the image data as a part of a multipart form submission. We show example code for multipart form submission at the bottom of the page.

The text

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 show the image attribution information with a 'footnote' style. 

                  
{ type: "text", style: "footnote", text: "Image attributed to Amanwana Hotel" }

The map

Maps are shown with the type set to 'map'. You must include lat and lng fields set to float for the location latitude and longitude. There are five optional fields you can set to customise the map:

  • zoom set to an integer zoom level between 1 and 20 to set the initial map zoom. Defaults to 10.
  • style sets the map style to one of 'standard', 'satellite' or 'hybrid'. Defaults to 'standard'.
  • height sets the map height in pixels. Defaults to 300. Note that the map width is automtically set to the screen width of the device.
  • isZoomEnabled determines if the user can pinch to zoom the map. Defaults to true.
  • isScrollEnabled determines if the user can scroll the map. Defaults to true.

For the demo channel we set just the lat, lng, zoom and isScrollEnabled values.

                  
{ type: "map", lat: -8.263, lng: 117.4987, zoom: 6, isScrollEnabled: false }

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: 10 }

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: "image", url: "https://s3-eu-west-1.amazonaws.com/toastworx.images/amanwana.jpg" },
  { type: "text", style: "footnote", text: "Image attributed to Amanwana Hotel" },
  { type: "map", lat: -8.263, lng: 117.4987, zoom: 6, isScrollEnabled: false },
  { type: "spacer", height: 10 }
];

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 wonderful world demo channel is below. POST to /channels/{channelUUID}/toasts with this as the POST body: 

                  
//POST body
{
  alert: "Amanwana, Indonesia",
  sound: "toaster 1",
  content: [
    { type: "image", url: "https://s3-eu-west-1.amazonaws.com/toastworx.images/amanwana.jpg" },
    { type: "text", style: "footnote", text: "Image attributed to Amanwana Hotel" },
    { type: "map", lat: -8.263, lng: 117.4987, zoom: 6, isScrollEnabled: false },
    { type: "spacer", height: 10 }
  ]
};

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: "Amanwana, Indonesia",
  sound: "toaster 1",
  content: [
    { type: "image", url: "https://s3-eu-west-1.amazonaws.com/toastworx.images/amanwana.jpg" },
    { type: "text", style: "footnote", text: "Image attributed to Amanwana Hotel" },
    { type: "map", lat: -8.263, lng: 117.4987, zoom: 6, isScrollEnabled: false },
    { type: "spacer", height: 10 }
  ]
};

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);
});

Using images hosted by ToastWorx

In the example above we created the image element and provided an url for the image location. You can also send the image data to us and we host the image for you. You do this by sending the image data along with the rest of the toast information as a multi-part form. An example of how this works is below using Javascript. We use axios, form-data and lodash to help. 

                  
const axios = require('axios');
const FormData = require('form-data');
var _ = require('lodash');

const imageURL = "the-url-to-your-source-image";
axios.get(imageURL, { responseType: 'stream' })
.then(function(response) {

  var formData = new FormData();

  formData.append('alert', "Amanwana, Indonesia");
  formData.append('sound', "toaster 1");

  formData.append('file', response.data);

  const content: [
    { type: "image" },
    { type: "text", style: "footnote", text: "Image attributed to Amanwana Hotel" },
    { type: "map", lat: -8.263, lng: 117.4987, zoom: 6, isScrollEnabled: false },
    { type: "spacer", height: 10 }
  ]
  formData.append('content', JSON.stringify(content));

  const config = { headers: { Authorization: 'Bearer {your-api-key}' }}
  return axios.post('https://api.toastworx.com/channels/{channelUUID}/toasts', formData,  _.merge(config, { headers: formData.getHeaders() }));
})
.then(function(response) {
  return callback(null, 200);
})
.catch(function(error) {
  console.log(error);
  return callback(error);
})

Subscribe to this channel

To subscribe to this channel scan the QR code below in the ToastWorx app.

Demo channel 1