Login / Sign Up

Onboarding Card

This is single onboarding card. These are displayed with the title, a large icon / image in the middle, with a small bit of copy at the bottom.

Structure

{
  "title": "How many sleeps?",
  "copy": "The countdown to your break at Key Holiday Park has started...",
  "icon": "https://your-wordpress-install.com/wp-content/uploads/2021/08/celebration-stars-red.png?v=1629324947"
}

Properties

title

Type : String - Required

Title of onboarding card

copy

Type : Rich Text / Multiline String - Required

This works best a single sentence. Text renders at the bottom of the card under the icon

icon

Type : Image Url String - Required

The icon/image is rendered in the middle of the card. Generally a transparent icon works well.

Required Type Definitions

Image Url String - Reveal

Our app surfaces talk to an image engine on our infrastructure to process and resize images for different smart phone screen densities. Because of this the size of images are less relevant as they are delivered at optimum sizes anyway. However due to processing power and speed we do recommend that image urls are all 3000 pixels or below. The app surfaces will never need an image this large, so it gives you the option of still having a large quality image, but can be loaded in the apps and our infrastructure efficiently. We support both png, jpeg, and webp images. You can optionally include a '?v=' version integer so this can be used for versioning. If you do include this you can ensure images are reprocessed if the source image is changed on your servers.

{
  "imgUrl": "https://your-wordpress-site.com/wp-content/uploads/2023/08/a-large-image-3000x2100.jpg?v=1691481892",
  "image": "https://your-wordpress-site.com/wp-content/uploads/2023/08/a-smaller-image.png"
}

Rich Text / Multiline String - Reveal

Acts the same as the standard String type, however If text is assumed to include line breaks then we use a place holder of #BREAK#. These will then be replaced by the relevant line breaks depending on the language, and device that is rendering the text. This is commonly used in entity copy, and addresses. Rich text should not include HTML or other markup. There should always be a contextual consideration as well - for example if you copy includes a html anchor link to 'Read More' - then simply removing the markup will then leave the text 'Read More' which will be a redundant, none clickable piece of text within the app surfaces.

{
  "textWithBullets": "This paragraph will now have two line breaks, and then a list of bullets#BREAK##BREAK#• Bullet 1#BREAK#• Bullet 2#BREAK#• Bullet 3",
  "address": "Holidaymaker App Ltd#BREAK#Stowey House#BREAK#Bridport Road#BREAK#Dorchester#BREAK#DT12SB"
}

String - Reveal

Standard JSON String - Often will have certain characters escaped depending what system is writing the JSON packet, however our parser only requires to have double quotes (") escaped. UTF-8 encoding is our standard, but others may be accepted if required. If line breaks are required in the text then the Rich Text / Multiline String type is used instead.

{
  "key1": "A string value",
  "key2": "Another string with an some \"quotes\" that need escaping",
  "arrayOfStrings": [
    "Item one as a string",
    "Item two as a string",
    "Item three as a string",
  ] 
}