Visual Story

Text

Visual story represents web stories as in instagram, whatsapp stories.

Format

Visual story has to be passed in “cards” property and “story-template” should be “visual-story” in story JSON. Every story element in the card is a visual story, which should have a combination of an image story element and text story element. Every card represents a card in visual story and hence, that many cards needs to be given in every story.

JSON

{
  "cards": [
    {
      "story-elements": [
        {
          "description": "",
          "image-url": "http://test.com/visual-image-1.jpg",
          "type": "image",
          "image-attribution": "Suitable attribution for visual image 1",
          "title": "Suitable captions for visual image 1",
          "alt-text":"Suitable alt-text for visual image 1",
          "subtype": null,
          "metadata": {}
        },
        {
          "description": "",
          "title": "",
          "subtype": null,
          "text": "<p><strong>This is a first visual text element, </strong></p>",
          "type": "text",
          "metadata": {}
        }
      ]
    },
    {
      "story-elements": [
        {
          "description": "",
          "image-url": "http://test.com/visual-image-2.jpg",
          "type": "image",
          "image-attribution": "Suitable attribution for visual image 2",
          "title": "Suitable captions for visual image 2",
          "alt-text":"Suitable alt-text for visual image 2",
          "subtype": null,
          "metadata": {}
        },
        {
          "description": "",
          "title": "",
          "subtype": null,
          "text": "<p><strong>This is a second visual text element, </strong></p>",
          "type": "text",
          "metadata": {}
        }
      ]
    }
  ]
}

Schema

Key	Type
type *	String, Value should be `text`
description	String, Value should be `text`
image-attribution	String, Value should be `text`
title	String, Value should be `text`
alt-text	String, Value should be `text`
image-url *	String
subtype *	Value should be `null`
metadata	Object, Value should be `{}`
text *	HTML string starting and ending with `<p></p>`

Notes

[1] All mandatory fields are marked with an *