Get to know the functions and elements in every available Block
Overview
This article discusses and details what Blocks are, what types are available, what their functions are, and how they are strategically added in our templates to support your business goals. This article does not address logic or how to construct logic in eko projects. If you have any questions that are not addressed in this article, you are always welcome to contact us here.
Looking for something specific? Skip to the Block you want to learn more about:
[use anchors within the article to create hyperlinks for a table of contents]
What are eko blocks?
Blocks are reusable, configurable elements of an eko experience with a specific design and function. Each block has a predefined set of functionality that is unique to the block type and configurable to the end user. Like building blocks, they can be connected together to form a sequence using logic [Url to Logic doc] to create and deliver a full customer-led experience. All eko templates are constructed by configuring blocks in a certain order.
Read on to learn more about the specific roles and uses of each block type.
Intro Block
DESCRIPTION |
VISUAL REFERENCE |
The Intro Block is used in cases where audio is essential and we want the user to opt in to allow the audio to play. This is useful for footage with a host or narrator. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Title |
(text field) |
Description |
(text field) |
Video |
(video file) |
Logo |
(Image) |
Start button label |
(Call to action text field) |
Intro Block Example
Full Screen Intro Block:
DESCRIPTION |
VISUAL REFERENCE |
Similar to the Intro Block, a Full Screen Intro Block is used in cases where audio is essential and therefore we want the user to opt in to allow the audio to play. This is useful for content based on a host or narrator. Unlike the Intro Block, the text and the Start button are presented as an overlay, appearing directly on the video footage.
|
|
MODIFIABLE FIELDS |
DESCRIPTION |
Title |
(text field) |
Description |
(text field) |
Video |
(video file) |
Logo |
(Image) |
Start button label |
(Call to action text field) |
Full Screen Intro Block Example:
Choice Block:
DESCRIPTION |
VISUAL REFERENCE |
A Choice Block’s role is to allow a user to select one response from a list of choices. You can add 2-10 choices on a Choice Block. The buttons will appear on a side bar on the right side of your video. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Title |
(text field) |
Description |
(text field) |
Logo |
(image file) |
Intro video |
(video file) |
Option Text |
(button text) |
Option Image |
Image juxtaposed to button text |
Choice Block Example:
Full Screen Choice Block:
DESCRIPTION |
VISUAL REFERENCE |
Similar to a Choice Block, a Full Screen Choice Block’s role is to allow the user to select one answer from multiple choices. Unlike the Choice Block, the buttons are presented as an overlay, appearing directly on the video footage. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Title |
(text field) |
Description |
(text field) |
Logo |
(image file) |
Intro video |
(video file) |
Option Text |
(button text) |
Link out CTA |
[url link-out] |
Button Size |
[modify button] |
Text color |
[text color]* Allows for the color of the text in both the Title and Description field to be modified. Additional color options of black and white in case the primary/secondary colors in the global settings don't look good on top of the video |
Full Screen Choice block:
Choice with Preview Block:
DESCRIPTION |
VISUAL REFERENCE |
The Choice with Preview Block gives the user the ability to make one or more selections and then confirm it. In other words, this Block allows you to add response videos specific to a section chosen by the user. This can be used to let users browse choices visually before making a selection. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Title |
(text field) |
Description |
(text field) |
Logo |
(image file) |
Intro video |
(video file) |
Link out CTA |
[url link-out] |
Option Text |
(button text) |
Option Image |
Image juxtaposed to button text |
Select Button Label |
(select button text) |
Choice with Preview block elements as seen within the eko platform:
Multiple Choice Block:
DESCRIPTION |
VISUAL REFERENCE |
A Multiple Choice Block gives the user the ability to select and make multiple selections. The text and choices are displayed on a customizable side-bar. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Title |
(text field) |
Description |
(text field) |
Logo |
(image file) |
Intro Video |
(video file) |
Option Text |
(button text) |
Option preview video |
(video file) |
Multiple Choice Block Example:
Split Screen Choice Block (Simple):
DESCRIPTION |
VISUAL REFERENCE |
A Split Screen Choice Block’s role is to provide choices. A set of grid videos with text on them is presented to the user to choose from. The user can make one selection. NOTE: Simple usage of the split screen functionality can be found in the template explorer select: "Ready to use bundle"
|
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Description |
(text field) |
Logo |
(image file) |
Intro video |
(video file) |
Option Video |
(video file) |
Response video |
(video file) |
Response video title |
(text field) |
Response video description |
(text field) |
Response Video Skip Label |
(text label field) |
Link out CTA |
[url link-out] |
Split Screen Choice Block Example:
Video Block:
DESCRIPTION |
VISUAL REFERENCE |
A Video Block plays a video. Like all Blocks, it offers a mute/unmute button in the top right-hand corner. It is used as an intro/outro or a filler between blocks to provide information to viewers. A Video Block features a skip button. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Title |
(text field) |
Description |
(text field) |
Skip Button [Optional] |
(text label field) |
Link out Button |
(text label field) (URL field) |
Video Block Example:
Fullscreen Video Block:
DESCRIPTION |
VISUAL REFERENCE |
This block shows a video with the option to have a title and description to appear on top of the video. Like the Video Block, it is used as an intro-outro or filler between other blocks to give information to viewers. There is also the option to add your logo. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Title |
(text field) |
Description |
(text field) |
Logo |
(image file) |
Link out CTA |
[url link-out] |
Full Screen Video Block Example:
Sequence Block:
DESCRIPTION |
VISUAL REFERENCE |
A Sequence Block allows the user to navigate through a series of videos. The display supports easy navigation by going forward and backward through the sequence with arrows and by allowing the user to return to the main screen with a “Home” button. |
|
MODIFIABLE FIELDS |
DESCRIPTION |
Video |
(video file) |
Description |
(text field) |
Link out CTA |
[url link-out] |
Sequence Block Example:
Email Sign-up Block:
DESCRIPTION |
VISUAL REFERENCE |
An Email Sign-up Block gives the user the option to enter an email address and sign-up for a newsletter. An Email Sign-up Block allows you to add a checkbox with any legal text that you need to add. To learn how to integrate eko with your email marketing softwares, click here. |
|
Modifiable Fields |
Description |
Video |
(video file) |
Title |
(text field) |
Description |
(text field) |
Intro video |
(video file) |
Placeholder Text |
Input field placeholder text |
Consent |
(text field) |
Submit button label |
(text label field) |
Skip button label |
(text label field) |
Email Sign-up Block Example:
Product List Block:
DESCRIPTION |
VISUAL REFERENCE |
The Product List Block allows users to view a set of products. It adds products using the filters that you input and renders the list of products. When a view clicks a product, they will be directed to whatever link is provided. It’s highly recommended to link to the product detail page. |
|
Modifiable Field |
Description |
Video |
(video file) |
Title |
(text field) |
Intro Video |
(video file) |
Start Over Label |
(text label field) |
Product List Block Example:
Related Article: How to create grid assets for the split screen choice block assets