Page Comparison

Connected Stories offers different varieties of widgets that can be implemented in your story. Users can interact with After creating your story by uploading a video or a static image, you can start personalizing it by choosing your widgets from a more than 15 templates. Users will interact with those widgets via personalized content and that's what makes a story dynamic.

Below is a sample execution of how to add different types of widgets to your story.

How to Set Up a Widget

...

In this page we will show you short tutorials about the following things:

1. Create an Event
2. Set Up a Widget
3. Add a Custom Widget 
4. Move and Resize a Widget
5. Hide a Widget

1. CREATE AN EVENT 

Anchor
createevent createevent

On C-S studio you can put as many widgets you want but always keep an eye on adding to much to avoid a confused ad. 

Widgets can appear at the time you want or be triggered by another widget.

So, let's start!

1. On the right side, just below the video preview

...

1. , click on "New Event

...

1. ", to add your first widget;
2. Name the event you are adding and

...

1. then setup when to trigger it through the timecode

...

1. ;
2. "Save and Add Widget".

Image Removed

...

Image Added

2. SET UP A WIDGET

Anchor
setupwidget setupwidget

After creating your event, you will be prompt to the

...

4. Select "Show" under mode in order to have the widget appear at the time you selected. You will select "Hide" when you want the widget to disappear.

 Image Removed

...

Connecting the Widgets

The most fascinating aspect of Connected-Stories is the chance of defining a sequence of widgets based on user interactions. In order to understand and define the logic behind it, we encourage you to visit the Storyboard section.

Here you will see how to actually connect widgets (events) after a storyboard has already been designed for the story.

1.  Click on new event or hit on edit if the event you want to connect has already been created.

Image Removed

2.  Under the "Key Value" box, choose from the list of choices available to associate with a particular event.

3.  Now hit on "Open Preview" to see how your story evolves based on the events you connected within the underlying rules engine. 

*FYI: Status/Key Values are the final blocks you placed in the rules engine logic.  These are the ones you must connect to a particular event for the dynamic storytelling to be implemented. More of this in the Storyboard. 

...

Here's a list of all the widgets currently available:

• • Poll

  • Quiz

  • Photo Gallery

  • Custom Widget

*Any other form of widget can be customized according to requirement.

For a Visual example visit the Widgets Showcase section.

...

Custom Widgets are built in HTML5 and applicable as a "Widget Data" page.

Main widget's set up options:

1. Description: name your widget so that you will always be able to recognize it in the future (i.e. CTA, logo, video click...);
2. Widget Type: most of the times you have to select "Instant app" unless you want to create a quiz or a poll which work differently and have their own field in the drop down list;
3. Mode: select "Show" if you want your widget to appear at the selected time or hide if you need to let a widget disappear at the time you chose;
4. Widget ID: if this is you first widget select wcd-1, if it's the second one choose wcd-2 and so on;
5. Name: here you can write the same name you put in the "Description" field;
6. Template: choose from the template drop down list one of the available widgets that most suit your needs (I.e. Interactive Element, Interactive Logo...). To see our wide selection of widget's templates click here;
7. Unique ID: ALWAYS remember to put a unique ID. We suggest to insert the same name you gave to your widget as unique ID remembering that in this field you can't insert spaces and symbols;
8. Title: If you want to give your widget a title, write it in this field and it will appear on top of your widget.

 Image Added

Further widget's set up options:

• Image Link: if yo want your widget to open an external web page when triggered, you need to choose the correct landing page from the ones you set up in the Ad Export page. If you don't know how to do it, click here;
• Key Value: it is possible to track and assign a key value to each widget. This allows to establish conditions in both the Storyboard and the Journey Designer based on user interactions with the widget as the key value would works as a reference for the condition's setting (to see how to set up a Storyboard click here and here how to build a Journey Designer);
• Event: if you want your widget to trigger another one, choose from the drop down list the right event to associate;
• Event on Hover: you can decide if the event or landing page may be also triggered with a simple mouse hover on the widget;
• Pause on Show: flag this option if you want your video to be paused when a widget is triggered (i.e. interactive card, interactive map...);
• Card: by flagging this option, you will make appear your widget with a white frame like a card;
• Overlay Mode: choose this option if your widget needs to appear in overlay in all your video area. We mainly use this feature when inserting a videoclick on a story;
• Close Button: flag this if you want to add a close button to your widget. By default it will be added on the top right cornet but if you want to change its position, contact us here;
• Close Button Color: if you already selected the previous options, you can also choose your close button color by inserting the respective Hex code;
• Link Social: insert in this field an url if you'd like to allow its sharing on the main social networks (Facebook, Twitter);
• Hover Zoom-in: flag this option if you want your widget to zoom-in when doing a mouse hover on it. This one is available only on desktop;
• Opacity: if you'd like your widget not to cover too much the background video, you may need to choose this option to make the widget appear opaque and become solid only when passing over it with the mouse;
• Layer Order: C-S dynamic stories are all built of many different layers. This drop down list shows numbers from 1 to 10 when 1 refers to the lower layer which can stay in background (i.e. videoclick) and 10 to the top layer that will cover all the ones below (i.e. interactive card);
• Animation: Choose one from the many options in the drop down list if you'd like your widget to appear with an animation;
• Save: when all it's done, click on the "Save" button to return to the main C-S Studio page. You can always come back later to make changes to your widget's set up options.

Image Added

3. ADD A CUSTOM WIDGET 

Anchor
CustomizedWidget CustomizedWidget

We continuously add new widget's templates based on feedback coming from our clients and our marketing team. 

The process of adding a custom widget is identical quite similar to the one to adding a new widget . AnchorAdd an Instant App to a StoryAdd an Instant App to a StoryHow one.

Below you will see how to add a Custom App to a Storystory:

1. Create a new event at the desired timestamp "New event" and give it the timecode when you want it to be triggered;
2. Click on the "Add Widget" button underneath the event to open the "Widget Data" pageSelect the Widget Type ;
3. Description: choose the name of your widget, it's good if the name allows to recognize it in the future (i.e. if your widget is a Call to Action, you can name it CTA)
4. Widget Type: select "Instant App"
5. Mode: select "Show" 
6. Widget ID select: 
   
   1. Webcontent - for the Instant App to appear in the companion area*
   2. Webcontent-overlay - for the Instant App to appear as an overlay** on the video

Image Removed

*Each new companion content will replace the previous one in the companion area based on the timeline and rules set. 

**Overlay:

• once created it is possible to drag and drop the overlay on the preview area of the video in order to choose the exact position.
• to make an overlay disappear repeat the same process as "To Add an Instant App to a Story" but select the Mode "Hide"

"Key Value" field in the Widget Data page

It is possible to track and assign a Key Value to each instant app. This allows to establish conditions in both the Storyboard and the Journey Designer based on user interactions with the widgets. The Key Value would work as a reference for the condition.

Custom Widget Templates:

...

A reasonable number of templates are available and ready to be used, together with their relative structure, in the platform, example in Widget Showcase. 

We continuously add new templates based on feedback coming from our clients and our marketing team.  Each Template can be insert in overlay or in the companion area.

Here's the list of current available templates (for updates and new templates, contact your account representative):

*Any other form of widget can be customized according to requirement.

• Interactive Hotspot

• Interactive Logo

• InTouch Overlay
• Interactive Element
• Map
• Shoppable Product
• 3D Touch
• Lead Generation Form
• Interactive Calendar
• Interactive Icon CTA

1. *: if this is your first widget, select wcd-1 and if you add more select wcd-2 and so on**
2. Name: you can insert the se name name you put in the "Description" field
3. Template: see more 

4. MOVE AND RESIZE WIDGETS

Anchor
moveandresizewidget moveandresizewidget

Once you created a widget, you will see it the left window on C-S studio but maybe you'd like to adjust it:

• to Move your widget in the right position just click on it with your mouse and drag it in the video area where you want to place it;
• to Resize your widget just click on the cursors you can find on its corners and move them to make it bigger, smaller, wider or more narrow.

Image Added

5. HIDE A WIDGET

Anchor
hidewidget hidewidget

If you want one or more widgets disappear at a certain point during your ad you will need to do the following things:

1. Create a "New Event" and give it the timecode when you'd like to disappear the associate widget;
2. Then click on "Add Widget" to create a new one;
3. In the "Widget Data" tab flag give a name and select "Hide" mode option;
4. Give this widget the same widget ID you gave to the main one (i.e. if your interactive CTA has as wcd-2 as widget ID, you must choose wcd-2 for the hide widget you just created;
5. You don't need to choose a template; just click on "Save" button and that's all

Image Added

SEE ALSO: Widgets Showcase >>

Back to Top of Page