Storyteller

The Storyteller is a full page experience focused on engagement. Viewers are first introduced to the topic with a video background on the landing page. The viewers are presented with 3 different types of navigation. Top, bottom and the hamburger menu to the top right corner. This allows the viewer to jump between different pages if needed. The Storyteller template consists of different interactive elements like tabs, accordions and a short quiz. This template is perfect for guiding the viewers through a journey or path. At the end of the experience, viewers can download the whitepaper after filling out the form.

COMPLEXITY

Medium

TYPE

eBook

USE CASE

Engagement

Features available

Here are the major features, abilities, and interactive elements used in this template.

Hamburger Menu

Hamburger Menu will allow you to create a list of navigation items or other elements that users can access across the pages of your interactive experience. The list is kept hidden and the  user needs to click on the hamburger menu (three stacked bars) to toggle the menu.

Animation

Animation will allow you to animate elements via microthemes. A use case for this would be to have a section fade up and into a page via scroll.

Form

Form will allow you to build simple to complex forms that contain different types of inputs and toggles, and can be combined with rules to create logic based results. Use cases for a Form are quizzes, assessments, calculators, and traditional forms.

Flow

Flow will allow you to build step-based interactive elements, such as Tabs, Accordions, and other elements, with great customizability. Use cases and examples of its power are the ability to create a carousel of images all the way to a one page assessment that presents one question at a time.

Video

Video will allow you to add YouTube, Vimeo, and other video types to your creative as a standalone video element or as a video background. A use case for this would be a video auto playing in the background of a hero section container.

Accordion

Accordion will allow you to organize content vertically into separate sections that expand and contract when clicked on. A use case for this would be to create a FAQ of product or service related questions, where each accordion label would have its own questions and the answer within the accordion section.

Tabs

Tabs will allow you to organize content into separate tabs vertically or horizontally. A use case for this would be to create a timeline of events organized by dates, where each tab label would have its own date and list of events within the tab section.

How-to use

Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.
To edit the quiz question, begin by locating the Flow that encompasses the quiz components.
The quiz is composed by a Form element with a Form field inside. Each form field will include a Choice Group and Choices inside of it. To edit the choices, begin by selecting a Choice from the list.
Click into the Behaviors panel to open up the Edit window. 
In the Edit window, you can direct the choices to a certain result by adjusting the Move to Step options under the Behaviors in Flow tab. You can choose between Previous, Next, First and Last. After selecting the step, click OK.
Begin by selecting the element on the canvas you wish to animate.
Under the Animation panel, choose the type of trigger from the drop down list. 
Then another dropdown list will pop up on the right. Choose the type of animation you want from the list.
You can choose to remove an animation by clicking on the X next to the blue animation tag. 
To change a field on the Form, select the Form element on the canvas.
Select the Textbox within the Form field and click on the container under the Data Field panel on the right.
Select a new Data Field from the list then press OK.
To change the copy within the Textbox, expand the Pre-Populated Value tab under the Variables panel.
Change the copy by clicking on the Placeholder Text container then click OK.
To adjust the flow, first locate the Flow element on the canvas. Each Flow element contains Flow Steps. Each flow step will be displayed one at a time. 
You may edit the order of the flow steps by using the Scroll To behaviors on the elements, under the Behaviors panel. Begin by selecting the Column  and clicking on the Scroll To behavior to open up the edit window. 
Select the anchor you want the element to scroll to then press OK.
To edit the Video Background, first select the Video (Container Background) on the canvas.
Under the Variables panel, you can choose the type of video you will be using.
Under the Video Settings, you need to enter the Video ID in order to properly display the video. Please note that each video type requires slightly different information. For this example, we will be using Vimeo. You can find the video ID for Vimeo by looking at the last digits after the /videos/ tag in the link.
To edit the accordion content, begin by locating the Accordion element on the canvas. The accordion settings can be found under the Variables panel.
Like the Tabs settings, you can adjust the accordion sections by expanding the Sections under the Variables panel or clicking on the labels on the canvas.
You can add a new section by clicking on an empty section on the canvas or under the Variables panel.
You can add a new label and add an element within the Accordion Section Container.
You can add or remove tabs by first locating the Tabs element on the canvas.
You can edit the tab labels by looking under the Variables panel and expanding the tabs. Another option is clicking directly on the tab label on the canvas. This will automatically open the corresponding tab under the Variables panel.
You can edit the contents within the tab by double clicking on the Text element within the tab container.
To remove a tab, open the tab settings under the Variables panel and press the trashcan icon to delete the Label. You will also need to delete any content within the tab container on the canvas as well.
The hamburger menu is set up as a Reveal in each Flow step.
To edit the location of each navigation title, begin by selecting the Container. And under the Behaviors panel, click into the Scroll To panel to open up the edit window.
Choose the Anchor you want the navigation element to scroll to, then press OK.
To assign a new anchor, select the element you wish to anchor on the canvas.
Under the Edit panel, click the Anchor icon to assign a new anchor, then press OK. Please note that anchor names cannot be duplicated.

Content structure

Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.
Preview Content Writing TemplateOpens in a new window.

Best practices

Be sure to tag everything that is "taggable" so that you are able to review everything at a later time in your reports.

Reveals
Flows
Flowsteps
Links
Tabs
Accordions
Lightboxes
Rotators
Sliders

Your conversion point is the most important measurement in determining whether your creative is converting visitors. We recommend having one conversion point per creative. Here is the element and methods in which to set your conversions:

Links
Behaviors
Actions

Before going live with your experience, you want to run a final proofing process. This will review the experience as a whole, with any final revisions necessary. Here is the most important items to be reviewed before GoLive:

  • Review of any integrations
  • Review of conversion point
  • Review of tagging
  • External links are working correctly (opening in a new window)
  • Mark respondents as always new if used for conference or live event
  • Uncheck the robot meta directives (no archive, no follow, no index)
  • Remove path description (if applicable)
  • Make sure traffic source has been added to social share — og URL, twitter (create bit.ly), email share
  • Once live, debug on Facebook (if applicable)

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions, so we can make sure to have this page constantly up to date.