Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The Storyboard is where you can edit and connect all the elements needed for your ad material to be dynamic.  This is where you can incorporate the widget relevant to your defined user interaction.

...

Once you created a story you can make it further dynamic using C-S Storyboard, a similar tool to the Journey Designer one (click here to see it) both in term of look&feel and functions.

C-S Storyboard allows you to create dynamic ads based on 1st and 3rd party data for each single impression and design a sequence of widgets within a single story according to users' interactions with them.

Image Added

The Storyboard provides a vertical personalization for each story ad and allows you to create dynamic sequences of widgets quickly, without writing a line of code.

With this C-S tool, you can easily setup stages (orange boxes) and conditions (blue and light blue boxes) through a drag and drop motion

SETTING UP A WIDGET'S SEQUENCE

  1. Enter the story you want to use and click on the "Storyboard" tab in the navigation menu on the top left; 

  2. Give a "Name" to your new sequence;

  3. Start dragging and dropping all the blocks you need. Keep in mind that every sequence should always be connected to the "User Data" block that represents the beginning of the sequence for each single story;

  4. Once you've added all the stages and their conditions, click on the "Save" button.


Info
titleTIP

Always remember that you can only add one stage (orange box) to the respective widget in the current story you're working on.


Image Added

THREE MAIN BLOCKS FOR A SEQUENCE

When setting up a sequence, you can find three types of boxes:

  1. Blue - If Then Else

  2. Light Blue - Switch

  3. Orange - Stage


Info
titleTIP

All blocks can be dragged and dropped to be positioned on the Storyboard canvas and, in order to save the sequence, you need to make sure all the blocks are properly connected to one another.

1. IF THEN ELSE:

Anchor
ifthenelse
ifthenelse

The Storyboard counts more than 30 1st party conditions and even more 3rd party conditions that can be easily selected through a dynamic drop-down list.

These blue boxes allow you to set conditions and sub-conditions to further breakdown your sequence. 

See below how to insert an "If then else" box:

  1. To insert an "If Then Else" block just drag and drop the box on the left top corner into your main framework;

  2. Name the block;

  3. Define the conditions: you can setup a box to have a true output if "All", "None", or "Any" of the conditions are met. For a detailed list of all the conditions visit the Conditions section;

  4. Save your new box;

  5. Each "If then else" box has one input and two outputs: to link blocks you need to drag and drop the arrow from a box to another one;

  6. Each box has one input and two outputs that need to be connected to respective boxes each representing an answer to the current condition. They are:

A. True (green-labeled) 

B. False (red-labeled).  


If this is your first box, connect "User Data" block to it.


Image Added

Above a sample that shows how to set up a condition. In this case it has been chose the "Random Boolean" one at 50%: it means that the two outputs will be triggered in a random way at 50% each.

2.  SWITCH:

Anchor
switch
switch

This box behaves like the "If Then Else" one with the only difference that here you have one input and as many outputs you need. 

  1. To insert a "Switch" box just drag and drop the box on the left top corner into your main framework;

  2. Name the box;

  3. Define the conditions: you can setup a box to have a true output if "All", "None", or "Any" of the conditions are met. For a detailed list of all the conditions visit the Conditions section;

  4. Save your new box;

  5. Each "Switch" box has one input and as many outputs you want;

  6. To link all the boxes you just need to drag and drop the arrow from a box to another one;

  7. The outputs need to be connected to a respective box each representing an answer to the condition;

  8. If this is should be the first box of your sequence, connect "User Data" block to it;

  9. Once you've connected all the boxes, click on "Save".

3.   STAGE:

Anchor
stage
stage

This box represents each single widget of your sequence. It is key to remember that in a sequence you can add as many stages as the number of widgets you have created and that you can never put the same stage twice or more.

  1. To insert a "Stage" block just drag and drop the box on the left top corner into your main framework;

  2. Name the box according to the respective stage of the consumer journey in that specific sequence or in a way that you will able to recognize it from the others;

  3. Save your new box;

  4. Each "Stage" block has one input and two outputs: to link boxes to their conditions, you need to drag and drop the arrow from a block to another one.

Info
titleINFO

Always remember that in your sequence you have to put as many stages as the stories you have to create and you can never repeat the same stage twice.


Image Added


After setting the Storyboard, you can always go back and adjust the parts according to your furnished widgets or changes you want to make in the sequence.

HOW TO CONNECT THE STORYBOARD TO WIDGETS

After setting up your storyboard, you've to link all the stages to the corresponding widget in the story you're working on.

Below we quickly show you how to connect storyboard's stages to their widget:

  1. Go back in the Story Editor;
  2. Click on "New Event" or hit on the three dots and choose the "Edit" icon if the event you want to connect has already been created;
  3. Choose the storyboard's stage you want to associate with the current story event by selecting it from a drop down list. You'll have to do this with all the stages you have created in your storyboard;
  4. Click on "Save" button;
  5. Now hit on "Open Preview" to see how your story evolves based on the events you connected within the underlying rules engine. 

Image Added


 SEE ALSO: Storyboard Conditions >>