SmallFunnelWrapper

A SmallFunnelWrapper is a wrapper element, which wrapps SmallFunnelBlocks, an interactive image banner with optional text and clickable button. Those are represented as column in a flex-box parent container, where one SmallFunnelWrapper wraps n SmallFunnelBlocks.

Structure examples

Take a look at some examples, to further understand the possibilities, of how a SmallFunnelBlocks can be structured. The examples focus on the SmallFunnelBlocks and not the wrapper itself, as the wrapper is only responsible for the flex-box alignment.

One large block
3 medium blocks
No button block

This example shows a possible version of a SmallFunnelBlock with one large block item.

{
   "smallFunnelItems":[
      {
         "displayTitle":{
            "content":"Title",
            "size":"xl",
            "weight":"semibold",
            "classification":"sans"
         },
         "displayDescription":{
            "content":"Desc",
            "size":"base",
            "weight":"light",
            "classification":"sans"
         },
         "background":{
            "minified":"data:image/webp;base64,ABCdef01=",
            "url":"https://bg-image.webp",
            "altText":"alt text",
            "width":null,
            "height":null
         },
         "button":{
            "url":"https://www.shophub.com",
            "text":"Button text"
         },
         "styleOptions":{
            "size":"large",
            "alignment":"center",
            "showButton":true,
            "globallyClickable":false
         }
      }
   ]
}

Create

POST _apiBaseUrl/v1/cms/banner/small-funnel-wrapper

Code

CreateSmallFunnelWrapperDto

{
   "smallFunnelItems":[
      {
         "displayTitle":{
            "content":"Title",
            "size":"xl",
            "weight":"semibold",
            "classification":"sans"
         },
         "displayDescription":{
            "content":"Desc",
            "size":"base",
            "weight":"light",
            "classification":"sans"
         },
         "background":{
            "minified":"data:image/webp;base64,ABCdef01=",
            "url":"https://bg-image.webp",
            "altText":"alt text",
            "width":null,
            "height":null
         },
         "button":{
            "url":"https://www.shophub.com",
            "text":"Button text"
         },
         "styleOptions":{
            "size":"large",
            "alignment":"center",
            "showButton":true,
            "globallyClickable":false
         }
      },
      {...}
   ]
}

Arguments

smallFunnelItems●

Array<SmallFunnelBlockDto>

required

A list of all funnel blocks, associated to the funnel wrapper.

SmallFunnelBlockDto

displayTitle●

FontDto|

null

An optional title, that is displayed below the image of the funnel block.

displayDescription●

FontDto|

null

An optional description, that is displayed below the title and image of the funnel block.

button●

ButtonDto

required

The button that is visible in the left corner of the image. Is always required, even if the button is hidden on the banner, as the url of the button is referenced to be used as link, if the whole banner is clickable.

background●

ImageDto

required

The image that is the prominent part of the funnel block.

styleOptions●

SmallFunnelBlockStyleOptionsDto|

null

Optional style options to further customize the funnel block.

SmallFunnelBlockStyleOptionsDto

alignment●

AlignmentDto|

null